vue项目折线图通过自定义formatter函数为tooltip提示框数据动态添加不同单位

首先引入echarts，效果如下：

见代码：

<template>
  <div>
    <div id="chartLineBox" style="width: 90%;height:100vh;border:1px solid red;"></div>
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  name: "lineEacharts",
  mounted() {
    this.chartLine = echarts.init(document.getElementById("chartLineBox"));
 
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        //设置tip提示
        trigger: "axis",
        // formatter: '{c}',
        formatter: function(params) {
          //自定义函数修改折线图给数据加单位
          var str = ""; //声明一个变量用来存储数据
          str += "<div>" + params[0].name + "</div>"; //显示日期的函数
          for (var i = 0; i < params.length; i++) {
            // console.log(params[1].seriesName,1111111)
            //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
            str +=
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
              params[i].color +
              ';"></span>' +
              params[i].seriesName +
              "</span> : <span>" +
              (params[i].seriesName == "学生成绩"
                ? params[i].data + "分"
                : params[i].seriesName == "平均成绩"
                ? params[i].data + "人"
                : params[i].data + "个") +
              "</br>"; 
          }
          return str;
        }
      },
      dataZoom: [
        {
          start: 80,
          type: "inside"
        },
        {
          start: 80
        }
      ],
      legend: {
        //设置区分（哪条线属于什么）
        data: ["平均成绩", "学生成绩", "我的成绩"]
      },
      color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        //设置x轴
        type: "category",
        boundaryGap: false, //坐标轴两边不留白
        data: [
          "2019-1-1",
          "2019-2-1",
          "2019-3-1",
          "2019-4-1",
          "2019-5-1",
          "2019-6-1",
          "2019-7-1"
        ],
        name: "DATE", //X轴 name
        nameTextStyle: {
          //坐标轴名称的文字样式
          // color: "#FA6F53",
          fontSize: 16,
          padding: [0, 0, 0, 20]
        }
      },
      yAxis: {
        name: "SALES VOLUME",
        nameTextStyle: {
          // color: "#FA6F53",
          fontSize: 16,
          padding: [0, 0, 10, 0]
        },
        type: "value"
      },
      series: [
        {
          name: "平均成绩",
          data: [220, 232, 201, 234, 290, 230, 220],
          type: "line", // 类型为折线图
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
              color: "#8AE09F"
            }
          }
        },
        {
          name: "学生成绩",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "line",
          lineStyle: {
            normal: {
              color: "#FA6F53"
            }
          }
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option，true);
  }
};
</script>
<style lang="scss" scoped>
div{
  font-weight: bolder;
}
</style>