echarts图表添加除labelH和value以外的动态值

echarts图表添加动态值，除labelH和value以外的动态值

echarts图表添加除label和value以外的动态值

除echarts本身提供的label和value以外，有时候项目需求还需要添加除这两个值以外的动态参数，跟随value一起在切换x轴时显示不同的参数

渲染出来的效果：

渲染的代码如下：

setAllExampleOprLazy() {
      let num = '(channelfi19kf)'
      let data = this.allExampleOperateLazy //需要渲染的值
      //构造渲染echarts图标的配置项
      let allExampleOperateLazyDefineEchar = {
        titleText: "所有实例操作延迟",
        yAxisName: "单位: ms",
        xAxis: data.scan ? data.scan.times : [],
        series: [{//上图添加了四个折线轴
            name: 'Delete最大值',
            type: "line",
            data: data.delete ? data.delete.values : []
          },
          {
            name: "Get最大值",
            type: "line",
            data: data.get ? data.get.values : []
          },
          {
            name: "P999 Scan最大值",
            type: "line",
            data: data.scan ? data.scan.values : []
          },
          {
            name: "Put 最大值",
            type: "line",
            data: data.put ? data.put.values : []
          }
        ]
      }
      //初始化需要渲染的echart图表
      let show = this.$echarts.init(this.$refs.allExampleOperateLazyEc);
      let init = evisual.init("lineAndBar");
      let Option = init.getOption(allExampleOperateLazyDefineEchar);
      //echarts图loadding加载
      this.hideLoading(this.$refs.allExampleOperateLazyEc);
      this.$nextTick(() => {//echarts跟随页面大小动态变化
        show.resize();
      });
      //重点：tooltip格式化，拿到数据后将数据渲染成需要的样子
      Option.tooltip.formatter = function(params) {
        let msg;
        if(params[0]){
           msg='<div>' + params[0].name + '<br>' +
          params[0].marker + params[0].seriesName + '(' + params[0].data.comment + ') : '  + params[0].data.value + '<br>' 
        }
        if(params[1]){
          msg+=params[1].marker + params[1].seriesName + '(' + params[1].data.comment + ') : '  + params[1].data.value + '<br>'
        }
        if(params[2]){
          msg+=params[2].marker + params[2].seriesName + '(' + params[2].data.comment + ') : ' + params[2].data.value + '<br>'
        }
        if(params[3]){
          msg+=params[3].marker + params[3].seriesName + '(' + params[3].data.comment + ') : '  + params[3].data.value + '</div>'
        }
        return msg;
      }
      Option.legend.type = "scroll" //legend. type图例的类型。可选值：'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
      show.setOption(Option, true); 
    },

渲染图表的数据结构如下：

红色框为第一层数据，绿色框为第二层数据，蓝色框为第三层数据