vue中对echarts的tooltip自定义内容
先看一下后端返回的数据结构change: {date: {date_x: ["2020-11-12"],date_y: [10],date_describe: [5]}}tooltip 格式化后显示效果格式化代码部分:drawPass(){// 基于准备好的dom,初始化echarts实例let ref = this.$refs.passlet discrible = this.pwd_data_
·
先看一下后端返回的数据结构
change: {
date: {
date_x: ["2020-11-12"],
date_y: [10],
date_describe: [5]
}
}
tooltip 格式化后显示效果
格式化代码部分:
drawPass(){
// 基于准备好的dom,初始化echarts实例
let ref = this.$refs.pass
let discrible = this.pwd_data_describe
if (ref && ref !== undefined) {
let myChart = this.$echarts.init(ref)
// 绘制图表
myChart.setOption({
tooltip: {
show: true,
formatter: function (param) {
console.log(param)
return param.name + '<br/>' + param.value + '<br/>描述:距上一次修改天数为 ' + discrible[param.seriesIndex]
}
},
xAxis: {
type: 'category',
data: this.pwd_data_x,
},
yAxis: {
type: 'value'
},
series: [{
data: this.pwd_data_y,
type: 'line',
symbol: 'triangle',
symbolSize: 20,
lineStyle: {
color: '#cc302e',
width: 4,
type: 'dashed'
},
itemStyle: {
borderWidth: 3,
borderColor: '#ff6f6c',
color: '#ff9392'
}
}]
})
}
},
更多推荐
已为社区贡献31条内容
所有评论(0)