vchart 官方文档在此 https://vue-echarts.github.io
vchart 是结合vue 的非常不错的绘图工具,但是我发现一个问题,那就是显示的都是有数值的,无法显示字符串的。比如有这么一个需求,显示每天走路的步数。如下图
发现备注无法显示。也就是我们需要自定义这个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='<div>日期: '+params[0].name+'</div>'
for(var i=0;i<params.length;i++){
res+=params[i].seriesName+': '+params[i].data[1]+'<br>'
}
return res
},
},
效果如图