vue中对echarts的tooltip自定义内容

约定不等于承诺〃 2022-12-22 04:50 189阅读 0赞

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

change: { 
    	date: { 
    		date_x: ["2020-11-12"], 
    		date_y: [10],
    		date_describe: [5]
    	}
    }

tooltip 格式化后显示效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]  
格式化代码部分：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/fcc9084b33644a0db25655b90ca98d65.png