1. 程式人生 > >vue-echarts-v3 使用 tooltip顯示內容自定義

vue-echarts-v3 使用 tooltip顯示內容自定義

tick editor out auto title cli method fault onclick

<template> <div class="echarts"> <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> <button @click="test">go</button> </div> </template> <script> import IEcharts from ‘vue-echarts-v3/src/lite.js‘; import ‘echarts/lib/component/title‘; //引入標題組件 import ‘echarts/lib/component/legend‘; //引入圖例組件 import ‘echarts/lib/component/tooltip‘; //引入圖例組件 import ‘echarts/lib/chart/bar‘; // import func from ‘./vue-temp/vue-editor-bridge‘; export default { components: {IEcharts}, data: () => ({ pie: { color: [‘#3398DB‘], tooltip : {
trigger: ‘axis‘, formatter:function (params){ console.log(params[0].name) let res =‘<p>‘+params[0].data.name+‘</p>‘ return res } }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, xAxis : [ { type : ‘category‘, data : [‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘], axisTick: { alignWithLabel: true } } ], yAxis : [ { type : ‘value‘ } ], series : [ { name:‘直接訪問‘, type:‘bar‘, barWidth: ‘60%‘, data:[{name:‘自定義‘,value:10
}, 52, 200, 334, 390, 330, 220] } ] } }), methods: { onReady(instance) { console.log(instance); }, onClick(event, instance, echarts) { console.log(arguments); }, test () { this.$router.push(‘/HelloWorld1‘) } } }; </script> <style scoped> .echarts{ width: 100%; height: 400px; margin: auto; text-align: center; } </style> 技術分享圖片

vue-echarts-v3 使用 tooltip顯示內容自定義