【echarts多个y轴分页展示，格式化label，格式化tooltip，自动换行】

摸鱼的图图

已于 2022-12-27 14:01:06 修改

阅读量1k

点赞数

分类专栏： vue elementui 文章标签： echarts javascript 多分类

于 2022-12-27 13:59:37 首次发布

本文链接：https://blog.csdn.net/qq_25529689/article/details/128453749

版权

vue elementui 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

echarts多个y轴分页展示，格式化label，格式化tooltip

呈现的结果：

图一 tooltip 未加formatter方法
在这里插入图片描述
图二添加tooltip 数字过多时自动换行

图三加tooltip 的formatter 方法，切记trigger:'item’才会起作用，鼠标放上去只显示一个数据点，但是也有问题，就是多个数据点重合时，最后一个会把之前的都覆盖，所以tooltip 显示出来的只是最上面的点的数据。
在这里插入图片描述

  <!--echarts容器 -->
          <div
            v-show="standingbookTblRefresh && curSelItemType === 'chart'"
            id="chartContainer"
            style=" padding-top:50px;position:absolute;width:100%;height: 100%;"
          >
            <div
              id="main"
              style="overflow:hidden;position:absolute;height: 90%;"
            ></div>
          </div>

    // 初始化曲线
    initEcharts() {
       // 判断是否有数据，没有数据时显示标题
      if (!this.standingbookListData || this.standingbookTblData.length === 0) {
        this.isShowEchartsTitle = true;
      } else {
        this.isShowEchartsTitle = false;
      }
       // 判断chart是否已初始化，每次点击时先销毁，重新加载。
      if (this.chart) {
        this.chart.dispose();
      }
      // 设置外层width为chart的宽度，根据外层宽度放大缩小
      let width = document.getElementById("chartContainer").offsetWidth + "px";
      document.getElementById("main").style.width = width;
      this.chart = echarts.init(document.getElementById("main"));
      // 当前选中的需要展示的数据
      let listItem = this.standingbookListData[this.curSelListItemIdx];
      let chartVars = listItem.chartVars; // 曲线要展示的y轴
      let legendData = []; //图例数据
      let units = []; // y轴的单位
      let yAxisData = []; // y轴数据 同 图例个数一致
      let seriesData = []; // 系列数据 同 图例个数一致
     
      if (chartVars) {
        for (let i = 0; listItem.vars && i < listItem.vars.length; i++) {
          for (let j = 0; j < chartVars.length; j++) {
            if (listItem.vars[i].varlabel === chartVars[j]) {
              legendData.push(listItem.vars[i].varname);
              units.push(
                listItem.vars[i].varunit ? listItem.vars[i].varunit : "mm"
              );              
            }
          }
        }

        let chartVarAndVal = new Map(); // y轴名称和数据集合
        let remarkMap = new Map(); // 备注点
        for (let i = 0; i < chartVars.length; i++) {
          let varlabel = chartVars[i];
          let varname = legendData[i];
          let vals = [];
          let cellRemarksMap = new Map(); // 问题点集合
          for (let j = 0; j < this.standingbookTblData.length; j++) {
            vals.push(
              this.standingbookTblData[j][varlabel] ? this.standingbookTblData[j][varlabel] : 0
            );
      
            cellRemarksMap.set(varname + '_' + this.standingbookTblData[j][varlabel],
            this.standingbookTblData[j][varlabel + '_remark'] ? this.standingbookTblData[j][varlabel + '_remark'] : '');
          }
          chartVarAndVal.set(varname, vals);
          remarkMap.set(varname,cellRemarksMap);
        }

        let xAxisData = []; // x轴表示时间
        for (let i = 0; i < this.standingbookTblData.length; i++) {
          xAxisData.push(this.standingbookTblData[i]._datetime);
        }

        for (let i = 0; i < legendData.length; i++) {
          // 设置每个y轴的属性
          let temp = {
            type: "value",
            name: legendData[i],
            min: 0,
            max: function(value) {
              return value.max + value.max * 0.1;
            },
            position: i == 0 ? "left" : "right",
            offset: i > 1 ? (i - 1) *  60: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[i],
              },
            },
            //坐标轴文字标签
            axisLabel: {
              formatter: "{value}" + units[i],
            },
          };
          yAxisData.push(temp);

          // 设置每个y轴对应的一系列数据
          let seriesTemp = {
            yAxisIndex: i,
            name: legendData[i],
            type: "line",
            smooth: true,
            data: chartVarAndVal.get(legendData[i]),
            label:{ // 设置每个数据点的label
              show: true,
              formatter: function(param){
               let map = remarkMap.get(legendData[i]);
               let remark = map ? map.get(param.seriesName + '_' + param.data) : '';
               if (remark){
                return remark;
               }else{
                return '';
               }
               
              }
            }
          };

          seriesData.push(seriesTemp);
        }

        let option = {
          title: {
            show: this.isShowEcharts, // 是否显示title
            text: "暂无数据",
            left: "center",
            top: "center",
            textStyle: {
              color: "pink",
              fontSize: 16,
              fontWeight: 400,
            },
          },
          color: this.colors,
          //鼠标hover提示框
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
        formatter: function(params){
        //----------------------鼠标放上去显示多个数据，如果数字过多进行换行-------------------
			return this.optionTooltipFormatter('axis',params);
        //---------------------------鼠标放上去显示单个tooltip,需要设置trigger为item---------
           // return this.optionTooltipFormatter('item',params);
            }
          grid: {
            right: "30%",
          },
          //图例
          legend: {
            show: true,
            data: legendData,
          },
          xAxis: {
            type: "category",
            axisTick: {
              alignWithLabel: false,
            },
            axisLabel: {
              // interval:0, 强制显示文字
              // show: true,
              rotate: 30,
              formatter: function(val) {
                let strs = val.split("");
                let str = "";
                for (let i = 0, s; (s = strs[i++]); ) {
                  str += s;
                  if (!(i % 11)) str += "\n";
                }
                return str;
              },
            },
            data: xAxisData,
          },
          yAxis: yAxisData,
          series: seriesData,
        };

        // 展示数据
        this.chart.setOption(option);
        //  当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
          // 让我们的图表调用 resize这个方法
          if (this.chart){
            this.chart.resize();
          }
          
        });
      }
    },

// 格式化tooltip的方法
optionTooltipFormatter(type,params){
	 // type为axis时，params为一个数组，数组元素是数据点
	if (type === 'axis'){
		 let name = ''; // x轴的名称
         const newParams = params.reduce((prev,curr) => {    
         // 根据y轴的名称获取map，map<key,value>,key为 curr.seriesName + '_' + curr.data，value存的是要展示的备注信息          
        	 let map = remarkMap.get(curr.seriesName); 
         	name = curr.name;
         	// 公共部分
         	let common = "<div style='display:block;width:300px;padding:-10px;'>"  + curr.marker +  curr.seriesName + ':' + curr.data + '; 问题：'; 
         	// 备注部分存在     
                if (map &&  map.get(curr.seriesName + '_' + curr.data)){
                // 判断如果字数大于10个，则要进行强制换行
                    let str = map.get(curr.seriesName + '_' + curr.data).toString()
                    let remarkTemp =  str.length > 10 ? "<span style='word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;'>" +
                     common + str + "</span>" : (common+ str);
                   prev.push( remarkTemp + "</div>" )
                }else{ // 备注不存在
                   prev.push(common + '无</div>') ;
                }
                return  prev;
              },[])
             return name + '<br>' + newParams.join('');
    }else {
		 let map = remarkMap.get(params.seriesName);
            let curr = params;
            let  name = curr.name;
            let result = '';
                let common = "<div style='display:block;width:300px;padding:-10px;'>"  + curr.marker +  curr.seriesName + ':' + curr.data + '; 问题：';      
                if (map &&  map.get(curr.seriesName + '_' + curr.data)){
                    let str = map.get(curr.seriesName + '_' + curr.data).toString()
                    let remarkTemp =  str.length > 10 ? "<span style='word-break:normal; width:auto; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;'>" +
                     common + str + "</span>" : (common+ str);
                     result =  remarkTemp + "</div>" ;
                }else{
                    result = common + '无</div>';
                }
                return name + '<br>' + result;
    }
}