Vue+echarts,tooltip下的formatter方法自定义提示框

项目需求

1.不同的判断条件对应不同的echarts折线图

2.当判断条件为title===颗粒度时，提示框里面的内容要根据返回的值判断来显示对应的文字

3.当判断条件为元素时，是两条折线图，提示框里要有两条内容

效果展示

 

用到tooltip下面的formatter，参数value就是当前横坐标对应的echarts图的数据，它是一个数组，是按series的数据的顺序来的。formatter函数return的东西就是你的tooltip的内容。里面可以是标签文本，想要什么样子的tooltip框，就组什么样子的标签以及内容就好了。 

代码展示 

tooltip: {
          trigger: 'axis',
          borderWidth: 0, // 去除数据提示框默认的边框
          axisPointer: {
            lineStyle: { // 设置hover时竖线样式
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                global: false // 缺省为 false
              }
            }
          },
          backgroundColor: 'transparent',  // 去除数据提示框默认的背景
          formatter: (value) => {
            let dom = null;
            if (title !== '颗粒度'&& title !== '元素') {
              dom = `<div style="background-color: #666;padding: 15px;display: inline-block;border-radius: 8px;">
                <span style="color: #fff;">${value[0].axisValue}</span><br>
                <span style="display: flex;align-items: center;">
                  <span style="width: 10px;height: 10px;background-color: red; border-radius: 50%;"></span>
                  <span style="color: #fff;margin-left: 5px;">${value[0].seriesName}:${value[0].value}${this.name.replace('单位:', '')}</span>
                </span>
              </div>`  
            } else if(title === '颗粒度'){
              dom = `<div style="background-color: #666;padding: 15px;display: inline-block;border-radius: 8px;">
                <span style="color: #fff;">${value[0].axisValue}</span><br>
                <span style="display: flex;align-items: center;">
                  <span style="width: 10px;height: 10px;background-color: red; border-radius: 50%;"></span>
                  <span style="color: #fff;margin-left: 5px;">${value[0].value === "0.8" ? "异常" : "正常"}</span>
                </span>
              </div>`
            }else {
              let str = ""
              let color = ["red","black"]
              value.map((item,index) => {
                str =str+` <span style="display:flex;align-items: center">
                    <span style="width: 10px;height: 10px;background-color: ${item.seriesName === "铁元素" ? color[0] : color[1] }; border-radius: 50%;"></span>
                    <span style="color: #fff;margin-left: 5px;" >${item.seriesName}:${item.value}${this.name.replace('单位:', '')}</span>
                  </span>`
              })
              dom =  `
              <div style="background-color: #666;padding: 15px;display: inline-block;border-radius: 8px;">
                <span style="color: #fff;">${value[0]?.axisValue}</span><br>
                ${str} 
                </div>
                `
            }
            return dom;
          }
        },