echarts折线图tooltip自定义多条折现写法

<template>
  <div class="ebox">
    <img class="borimg" src="~@/assets/img1/public/border.png" alt />
    <div class="outborder" :id= "id"></div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { nowSize } from "@/util/util.js";
import resize from "element-resize-detector";
export default {
  name: "Bar",
  props: ["setData", "id"],
  data() {
    return {
      time:['1234','2345','5678'],
      sitedata:this.setData
    };
  },
  //实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图
  watch: {
    setData: {
      handler(val) {
        console.log("父组件传值",this.setData)
        this.drawBar(val);
      },
      deep: true
      // immediate: true
    }
  },
  mounted() {
    this.drawBar();

    // console.log(this.setData);
    // console.log(this.setData.color)
  },

  methods: {
    drawBar() {
 
      //折线图实现
      // console.log("setData",this.setData)
      // var scolor = this.color.color;
      let myChart = echarts.init(document.getElementById(this.id));
      let unit = this.setData.timeData;
      let name = this.setData.text;
      let eu = this.setData.name;
      let option = {
        title: {
          text: this.setData.text,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight:'normal'
          },
          left: "center",
          top:-2,
        },
        legend: {
          show: true,
          type: 'scroll',
          right:nowSize(30),
          top: nowSize(30),
          width: '70%',
          icon: "stack",
          itemWidth: nowSize(10),
          itemHeight: nowSize(10),
          pageTextStyle: {
              color: '#fff'
          },
          textStyle: {
            color: "#fff",
            fontSize: nowSize(10),
          },
          data: [this.setData.aname, this.setData.bname, this.setData.cname,],
        },

        xAxis: {
          data:this.setData.xAxisData,
          showMinLabel: true,
          showMaxLabel: true,
          axisLabel: {
            inside: false, //x轴文字显示位置,true则显示在柱子上
            // rotate: 30,
            textStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            //x轴刻度样式
            show: false
          },
          axisLine: {
            //x轴轴线的样式
            show: true,
            lineStyle: {
              color: "#CCCCCC",
            }
          },
          z: 10
        },
        grid: {
          top: "30%",
          left: "8%",
          right: "8%",
          bottom: "6%",
          containLabel: true
        },

        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            console.log(params,1234567)
            console.log(unit[params[0].dataIndex],1234567)
            // return [
            //       '时间: ' + unit[params[0].dataIndex],
            //        name + ':' + params[0].data + eu,
            //     ].join('<br/>')

            // console.log(this.time,1234567)
            // console.log(this.setData.timeData,1234567)
            // let newdata = this.setData.timeData;
            let str ='时间: ' + unit[params[0].dataIndex] + "<br />" ;
            params.forEach((item) => {
              str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName+ " : " + item.data + eu + "<br />";
            });
            return str;
          },
        },
        yAxis: {
          name:this.setData.name,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            }
          },
          axisTick: {
            show: false,
            interval: 'auto',
            lineStyle: {
              color: "#ccc",
              type: "dotted"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            },
            
          },
          splitLine: {
            // show: false,
            lineStyle: {
              color: "rgba(20, 251, 246, 0.1)",
              type: "solid"
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],

        series: [
          {
            name:this.setData.aname,
            type: "line",
            symbol: "none",
            smooth: true,
            data:this.setData.seriesData,
            // data: [5, 10, 15, 12, 16, 20],
            barMaxWidth: 50,
            color: this.setData.linecolor ,//折线颜色
            areaStyle: {
              // color: "rgba(20, 251, 246, 0.2)"
              color: new echarts.graphic.LinearGradient(
                0,0,0,1,
                this.setData.color
              )
            },
          },{
            name:this.setData.bname,
            type: "line",
            symbol: "none",
            smooth: true,
            data:this.setData.seriesTwoData,
            // data: [5, 10, 55, 12, 16, 20],
            barMaxWidth: 50,
            color: this.setData.lineTwocolor,
            // lineStyle: {
            //   color: this.setData.lineTwocolor //折线颜色
            // },
            areaStyle: {
              // color: "rgba(20, 251, 246, 0.2)"
              color: new echarts.graphic.LinearGradient(
                0,0,0,1,
                this.setData.color1
              )
            },
          },{
            name:this.setData.cname,
            type: "line",
            symbol: "none",
            smooth: true,
            data:this.setData.seriesThreeData,
            // data: [5, 10, 55, 12, 16, 20],
            barMaxWidth: 50,
            color: this.setData.lineThreecolor, //折线颜色
        
            areaStyle: {
              // color: "rgba(20, 251, 246, 0.2)"
              color: new echarts.graphic.LinearGradient(
                0,0,0,1,
                this.setData.color2
              )
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      var erd = resize();
      erd.listenTo(document.getElementById(this.id), element => {
        var width = element.offsetWidth;
        var height = element.offsetHeight;
        this.$nextTick(function() {
          //console.log("Size: " + width + "x" + height)
          //使echarts尺寸重置
          echarts.init(document.getElementById(this.id)).resize();
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ebox {
  position: relative;
  width: 100%;
  height: 100%;
}

.borimg {
  position: absolute;
  top: 0;
  width: 100%;
  height:100%;
}
.outborder{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

echarts折线图tooltip自定义多条折现写法