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('')
          }
        }
　  }）