ECharts提示框浮層內容格式化

以多折線圖為例：

 

1. 初始化echarts

 this.chart = echarts.init(this.$el, 'default')

 

2. echarts配置項-提示框組件-提示框浮層內容格式器

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: (params) => { // params為懸浮框上的全部數據
            const newParams = []
            params.forEach((p) => {
              // p.marker為對應數據線的顏色的圓點
              // p.seriesName為對應數據的數據名稱
              // p.value為對應數據的值
              const cont = '<div style="margin-bottom: 10px;">' + p.axisValueLabel + '<br/>' + p.marker + ' ' + p.seriesName + ': ' + p.value + '</div>'
              if (p.seriesName == '折線圖1') {
                newParams[0] = cont
              } else if (p.seriesName == '折線圖2') {
                newParams[1] = cont
              } else if (p.seriesName == '折線圖3') {
                newParams[2] = cont
              }
            })
            // 這里需要將數組轉化成字符串顯示，如果不轉化，每個數據前面都會出現一個逗號
            return newParams.join('')
          }
        }
　  }）