echarts 折线图中如为markline设置悬浮提示

664 阅读1分钟

当trigger : axis 鼠标移入标线不会有悬浮框出现 params的值为一个数组,只会悬浮series

当trigger : item 鼠标移入标线有悬浮框出现 params的值为一个对象,会区别鼠标移入的是series还是markLine

tooltip: {
    // 当trigger : axis 鼠标移入标线不会有悬浮框出现 params的值为一个数组,只会悬浮series
    // 当trigger : item 鼠标移入标线有悬浮框出现 params的值为一个对象,会区别鼠标移入的是series还是markLine
    // 使用axis 注释掉formatter 自己写也行 ;使用item放开formatter
    show: true,
    trigger: "item",//axis item
    axisPointer: {
        type: "cross",
        label: {
            backgroundColor: "#6a7985",
        },
    },
    formatter: (params) => {
        if(params.componentType === "series"){
            return params.name + '<br>' + params.marker+' '+params.data;
        }else if(params.componentType === "markLine"){
            return params.marker+' '+ params.data.label.formatter + ':' + params.value ;
        }
    }
},
tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   animation: false
      // },
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
      formatter: (params: { 
        data: string, 
        name: string,
        marker: string,
      }[]) => {
        return params[0].name + '<br>' + params[0].marker+'平均值:  '+params[0].data
        // if(params[0].componentType === "series"){
        //     return params[0].name + '<br>' + params[0].marker+' '+params[0].data;
        // }else if(params[0].componentType === "markLine"){
        //     return params[0].marker+' '+ params[0].data.label.formatter + ':' + params[0].value ;
        // }
      }
},

series 中加 silent: false, //鼠标移入标线是否高亮 false为高亮  true为不高亮

series: [
{
    type: "line",
    smooth: true,//是否平滑曲线显示。
    silent: false, //鼠标移入标线是否高亮 false为高亮  true为不高亮
    showSymbol: false,//去掉折现上的小圆圈
    data: data.seriesData,
    markLine: {
        data: [
            {
                lineStyle: {
                  // 警戒线的样式  ,虚实  颜色
                  type: "dashed",
                  color: "#c9356e",
                  width: 2,
                },
                label: {
                  position: 'insideEndTop',
                  distance: [-65,-8],//文字在标线处的位置
                  formatter: "最大值",
                },
                yAxis: 30, // 警戒线的标注值,可以有多个yAxis,多条警示线   或者采用    {type : 'average', name: '平均值'},type值有  max  min  average,分为最大,最小,平均值
              }
            ],
        },
    },
],