多条折线图修改图例以及自定义tooltip

• 在图例后面添加所有数据之和
• 修改之后 series 中的name之后导致tooltip也加上了
• 重新自定义tooltip，去掉总量统计

核心代码

1. 监听数据改变计算总量
2. 修改name字段
3. 自定义 tooltip

 // 计算每条线的总和
const sum1 = this.VALUE1.reduce((acc, val) => acc + val, 0);
const sum2 = this.VALUE2.reduce((acc, val) => acc + val, 0);
const sum3 = this.VALUE3.reduce((acc, val) => acc + val, 0);

series: [
    {
      name: `火灾总量(${sum1})`,
      data: this.VALUE1,
    },
    {
      name: `轻微火灾(${sum2})`,
      data: this.VALUE2,
    },
    {
      name: `非轻微火灾(${sum3})`,
      data: this.VALUE3,
    },
  ],
  
  
 
 tooltip: {
      show: "true",
      trigger: "axis",
      textStyle: {
        fontSize: this.fontSize(0.15),
      },
      // ☆☆☆☆☆☆自定义tooltip，去掉图例后面添加的总数值统计
      formatter: function (params) {
        console.log("params", params);
        let content = "";
        params.forEach((param) => {
          const value = param.value;
          const seriesName = param.seriesName;
          const marker = param.marker;

          content += `<div>${marker}${
            seriesName.split("(")[0]
          } ：${value}</div>`;
        });
        // 构建tooltip的内容
        return content;
      },
 },

整个折线图组件

<template>
  <div class="w100 h100" ref="chart"></div>
</template>

<script>
import resize from "./mixins/resize";
let color = ["rgba(28, 214, 170,1)", "#FFF200", "#FF6200"];
let color1 = [
  "rgba(28, 214, 170,.1)",
  "rgba(255, 255, 0,.1)",
  "rgba(255, 98, 0,.1)",
];
export default {
  mixins: [resize],
  props: ["list", "type"],
  watch: {
    list: {
      // 深度监听没有旧值
      handler(val) {
        console.log(val, "tab3双折现");
        this.initChart();
        this.xAxisData =
          this.type == 1 ? val.monthOrDayOrTimeList : val.monthOrDayOrTimeList;
        this.VALUE1 =
          this.type == 1 ? val.policeTotalCountList : val.policeTotalCountList;
        this.VALUE2 = this.type == 1 ? val.minorFireList : val.minorFireList;
        this.VALUE3 =
          this.type == 1 ? val.notMinorFireList : val.notMinorFireList;
        // this.xAxisData = val.map((item) => item.date);
        // this.VALUE1 = val.map((item) => 50 - item.sugarAfterMeal);
        // this.VALUE2 = val.map((item) => item.sugarBeforeMeal);
        // this.VALUE3 = val.map((item) => item.sugarAfterMeal);
        // 计算每条线的总和
        const sum1 = this.VALUE1.reduce((acc, val) => acc + val, 0);
        const sum2 = this.VALUE2.reduce((acc, val) => acc + val, 0);
        const sum3 = this.VALUE3.reduce((acc, val) => acc + val, 0);
        let option = {
          xAxis: [
            {
              data: this.xAxisData,
            },
          ],

          series: [
            {
              name: `火灾总量(${sum1})`,
              data: this.VALUE1,
            },
            {
              name: `轻微火灾(${sum2})`,
              data: this.VALUE2,
            },
            {
              name: `非轻微火灾(${sum3})`,
              data: this.VALUE3,
            },
          ],
        };
        this.chart.setOption(option);

        if (this.timeId) {
          clearInterval(this.timeId);
          this.timeId = null;
        }
        if (this.xAxisData.length > this.maxNum) {
          let num = 0;
          this.timeId = setInterval(() => {
            if (num + this.maxNum == this.xAxisData.length) {
              num = 0;
            } else {
              num += 1;
            }

            let option = {
              dataZoom: [
                {
                  startValue: num, // 从头开始。
                  endValue: num + this.maxNum - 1, // 一次性展示几个
                },
              ],
            };
            this.chart.setOption(option);
          }, 3000);
        }
      },
      // 这里是关键，代表递归监听的变化
      deep: true,
    },
  },

  data() {
    return {
      chart: null,
      xAxisData: [],
      VALUE3: [],
      maxNum: 12, // 一次性展示几个。
      timeId: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
    clearInterval(this.timeId);
    this.timeId = null;
  },
  methods: {
    init() {},
    // 体温
    initChart() {
      this.chart = this.$echarts.init(this.$refs.chart);
      this.chart.setOption({
        // color: color,
        tooltip: {
          show: "true",
          trigger: "axis",
          textStyle: {
            fontSize: this.fontSize(0.15),
          },
          // ☆☆☆☆☆☆自定义tooltip，去掉图例后面添加的总数值统计
          formatter: function (params) {
            console.log("params", params);
            let content = "";
            params.forEach((param) => {
              const value = param.value;
              const seriesName = param.seriesName;
              const marker = param.marker;

              content += `<div>${marker}${
                seriesName.split("(")[0]
              } ：${value}</div>`;
            });
            // 构建tooltip的内容
            return content;
          },
        },
        grid: {
          top: "20%",
          left: "6%",
          right: "1%",
          bottom: "4%",
          containLabel: true,
        },
        legend: {
          itemHeight: this.fontSize(0.13), //图例图标的高度
          itemWidth: this.fontSize(0.2), //图例图标的宽度
          itemGap: this.fontSize(0.23), //图例图标与文字间的间距
          textStyle: {
            color: "#fff",
            borderColor: "#fff",
            fontSize: this.fontSize(0.14),
          },
          top: 7,
          right: 20,
        },
        // 横坐标设置
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            //坐标轴
            axisLine: {
              lineStyle: {
                color: "#2384B1", //横轴颜色
                width: this.fontSize(0.01), //横轴粗细
              },
            },
            axisLabel: {
              interval: 0, // 显示所有标签
              rotate: 30, // 倾斜标签以节省空间
              textStyle: {
                color: "#fff", // 横坐标颜色
                fontSize: this.fontSize(0.13),
              },
            },
            axisTick: {
              show: true, //不显示坐标轴刻度
              alignWithLabel: true, // 刻度线与标签对齐
            },
            // data: this.xAxisData,
          },
        ],
        // Y轴设置
        yAxis: [
          {
            type: "value",
            min: 0,
            // max:  150,
            minInterval: 0.5,
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: "#023052",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            //坐标值标注
            axisLabel: {
              // formatter: "{value}", //右侧Y轴文字显示
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize(0.13),
              },
            },
          },
        ],
        //滑动条
        dataZoom: [
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: this.maxNum - 1, // 一次性展示几个
          },
          {
            xAxisIndex: 0, //这里是从X轴的0刻度开始
            show: false, //是否显示滑动条，不影响使用
            type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: this.maxNum - 1, // 一次性展示几个
          },
        ],
        series: [
          {
            name: " ",
            type: "line",
            smooth: true, //是否平滑曲线显示
            symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
            lineStyle: {
              normal: {
                width: this.fontSize(0.01),
                color: color[0], // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: color[0],
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[0],
                    },
                    {
                      offset: 1,
                      color: color1[0],
                    },
                  ],
                  false
                ),
                // shadowColor: color[0], //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            label: {
              normal: {
                show: false,
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: color[0],
                  Size: this.fontSize(0.15),
                  fontWeight: 700,
                },
              },
            },
            // data: this.goodRate, //折线图数据
          },
          {
            name: " ",
            type: "line",
            smooth: true, //是否平滑曲线显示
            symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
            lineStyle: {
              normal: {
                width: this.fontSize(0.01),
                color: color[1], // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: color[1],
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[1],
                    },
                    {
                      offset: 1,
                      color: color1[1],
                    },
                  ],
                  false
                ),
                // shadowColor: color[1], //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            label: {
              normal: {
                show: false,
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: color[1],
                  Size: this.fontSize(0.13),
                  fontWeight: 700,
                },
              },
            },
            // data: this.goodRate, //折线图数据
          },
          {
            name: " ",
            type: "line",
            smooth: true, //是否平滑曲线显示
            symbol: "none", // circle | rect | roundRect | triangle | diamond | pin | arrow
            lineStyle: {
              normal: {
                width: this.fontSize(0.01),
                color: color[2], // 线条颜色
              },
            },
            itemStyle: {
              normal: {
                color: color[2],
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[2],
                    },
                    {
                      offset: 1,
                      color: color1[2],
                    },
                  ],
                  false
                ),
                // shadowColor: color[2], //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            label: {
              normal: {
                show: false,
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: color[2],
                  Size: this.fontSize(0.13),
                  fontWeight: 700,
                },
              },
            },
            // data: this.goodRate, //折线图数据
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";

.item {
  width: 33%;
}
</style>