vchart实现自定义备注的显示

vchart 官方文档在此 https://vue-echarts.github.io
vchart 是结合vue 的非常不错的绘图工具,但是我发现一个问题,那就是显示的都是有数值的,无法显示字符串的。比如有这么一个需求,显示每天走路的步数。如下图
vchart实现自定义备注的显示_第1张图片
发现备注无法显示。也就是我们需要自定义这个tooltip,能让它显示备注,经过摸索,原来这么搞。需要指定一个tooltip的样式tips,在return的变量里面定义tips即可

<ve-line :data="chartData" :settings="setting" :tooltip="tips"></ve-line>
data () {
    return {
	   tips: {
         trigger: 'axis',
       	 formatter: function(params) {
           var res='
日期: '+params[0].name+'
'
for(var i=0;i<params.length;i++){ res+=params[i].seriesName+': '+params[i].data[1]+'
'
} return res }, },

效果如图
vchart实现自定义备注的显示_第2张图片

你可能感兴趣的:(vue,vchart,vchart,数据可视化)