vue中对echarts的tooltip自定义内容

最新推荐文章于 2024-08-23 17:46:00 发布

前端开心果

最新推荐文章于 2024-08-23 17:46:00 发布

阅读量3.1k

点赞数 2

分类专栏： Echarts 文章标签： vue echarts

本文链接：https://blog.csdn.net/qq_38157825/article/details/109749675

版权

Echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先看一下后端返回的数据结构

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'
        }
      }]
    })
  }
},