Echarts的tooltip中动态单位设置（使用formatter函数加工）

需求描述

• 可视化折线图
• 有好几条线，不同的线条单位不一样
• 在鼠标悬浮tooltip的时候，将对应单位对应添加

效果图

思路：使用tooltip中的formatter函数去控制即可

代码

复制粘贴即可使用，不难，可能一时间想不到...

<template>
  <div class="demo">
    <div ref="myDiv" class="echart_line" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      unit: "", // 变量单位赋值
      legendData: ["甲", "乙", "丙", "丁"],
      // 图表使用的一系列数据
      series: [
        {
          unit: "米",
          type: "line",
          data: [
            95, 16, 66, 51, 15, 15, 15, 4, 16, 5, 115, 55, 114, 56, 15, 77, 15,
            99, 153, 22, 33, 88, 23, 11, 33, 46, 22, 11, 6, 129,
          ],
          name: "甲",
        },
        {
          unit: "千克",
          type: "line",
          data: [
            139, 27, 60, 0, 60, 99, 11, 77, 88, 54, 68, 99, 60, 99, 24, 12, 18,
            133, 99, 54, 60, 24, 60, 54, 60, 99, 88, 111, 99, 60,
          ],
          name: "乙",
        },
        {
          unit: "秒",
          type: "line",
          data: [
            54, 14, 3, 69, 23, 88, 60, 54, 60, 54, 16, 72, 54, 14, 19, 34, 36,
            6, 14, 54, 99, 19, 60, 27, 41, 14, 32, 72, 82, 92,
          ],
          name: "丙",
        },
        {
          unit: "安培/摩尔",
          type: "line",
          data: [
            5, 72, 13, 1, 115, 82, 63, 14, 125, 99, 121, 135, 54, 15, 35, 15,
            2.5, 47, 31, 23, 15, 9, 14, 7, 15, 48, 88, 123, 31, 49,
          ],
          name: "丁",
          // yAxisIndex: 0, // 1 可设置左侧和右侧y轴线条...
        },
      ],
      // x轴刻度数值
      dataX: [
        "2023-03-01",
        "2023-03-02",
        "2023-03-03",
        "2023-03-04",
        "2023-03-05",
        "2023-03-06",
        "2023-03-07",
        "2023-03-08",
        "2023-03-09",
        "2023-03-10",
        "2023-03-11",
        "2023-03-12",
        "2023-03-13",
        "2023-03-14",
        "2023-03-15",
        "2023-03-16",
        "2023-03-17",
        "2023-03-18",
        "2023-03-19",
        "2023-03-20",
        "2023-03-21",
        "2023-03-22",
        "2023-03-23",
        "2023-03-24",
        "2023-03-25",
        "2023-03-26",
        "2023-03-27",
        "2023-03-28",
        "2023-03-29",
        "2023-03-30",
      ],
    };
  },
  mounted() {
    this.chart();
  },
  methods: {
    chart() {
      this.$nextTick(() => {
        var that = this;
        // 初始化一个Echarts
        this.myChart = echarts.init(this.$refs.myDiv);
        // 给Echarts设置对应的配置缠住
        this.myChart.setOption({
          color: ["#F26522", "#8DC63F", "#00AEEF", "#FFC20E"],
          // 图表左上方的圆点图例
          legend: {
            type: "scroll",
            data: that.legendData,
            icon: "circle",
            itemHeight: 10,
            top: 4,
            left: 24,
          },
          // x轴的设置
          xAxis: {
            type: "category",
            // x轴的凸起小竖点
            axisTick: {
              show: true,
              inside: true,
              lineStyle: {
                color: "#999",
              },
            },
            // x轴的线条颜色
            axisLine: {
              lineStyle: {
                type: "dashed",
                color: "#999",
              },
            },
            // x轴使用的数据
            data: that.dataX,
            // x轴的文字设置
            axisLabel: {
              margin: 8,
              interval: 7,
              formatter: function (params) {
                return (params = params.slice(0));
              },
            },
          },
          // y轴的设置
          yAxis: [
            {
              type: "value",
              name: "(KPA)", // 左上方的圆点下方
              nameTextStyle: {
                // 设置位置
                padding: [10, 0, 0, -20],
              },
              axisLine: {
                show: false, // 最左侧的y轴的线条 将其隐藏
                lineStyle: {
                  color: "#BDBDBD", // 另外的颜色设置，如刻度数值
                },
              },
              splitLine: {
                show: true, // 显示横向分隔线
                lineStyle: {
                  type: "dashed", // 样式为虚线
                  color: "#e1e1e1", // 设置对应分隔线的颜色
                },
              },
              min: 0, // 设置左侧Y轴的最小刻度从哪里开始，此案例从0开始
              max: function (value) {
                // 设置最大值，即为最大值，当然也可以再加点
                // return value.max;
                return value.max + 12;
              },
            },
          ],
          // 鼠标悬浮提示框
          tooltip: {
            trigger: "axis", // 触发
            // 轴指针
            axisPointer: {
              // 鼠标样式
              animation: true,
              // 竖线条样式
              lineStyle: {
                color: "#123", // 设置颜色
                width: 2, // 宽度
                opacity: 0.8,
              },
            },
            /**
             * 重点是这个tooltip的formatter加工函数
             * */
            formatter: function (format) {
              /**
               * 根据format参数定义动态dom
               * */
              var result = `<div
                  style="height:100%;
                  min-height:${30 + 28 * format.length}px;
                  width: 200px;
                  background: rgba(255, 255, 255, 0.27);
                  "
                >
                <div 
                  style="width: 100%;
                    height: 30px;
                    padding-left:10px;
                    background: rgba(0, 0, 0, 0.79);
                    font-size: 14px;
                    line-height: 30px;
                    color: #ffffff;
                  "
                >
                  ${name ? name : format[0].name}
                </div>
                <div
                  style="
                      height: 100%;
                      padding-left:10px;
                      width: 100%;
                      border-radius: 3px;
                  "
                >
              `;
              /**
               * 遍历判断动态添加dom单位
               * */
              format.map((item) => {
                // console.log("item", item);
                that.series.map((it, index) => {
                  if (index == item.seriesIndex) {
                    // 索引要对上
                    that.unit = it.unit;
                  }
                });
                result +=
                  "<div style='height: 28px;line-height:28px'>" +
                  '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
                  item.color +
                  '"></span>' +
                  item.seriesName +
                  " : " +
                  item.value +
                  that.unit;
                ("</div>");
              });
              result += "</div>";
              return result;
            },
          },
          // 图表使用的一系列数据
          series: that.series,
          // 图表距容器的距离
          grid: {
            bottom: 60,
            left: "4%",
            right: "2%",
          },
          // 区域缩放配置
          dataZoom: [
            {
              type: "slider",
              start: 0,
              end: 50,
              backgroundColor: "#e9e9e9",
              fillerColor: "#666",
              opacity: 0.2,
              show: true,
              height: "24ph",
              bottom: "12ph",
            },
          ],
        });
        // 添加自适应
        window.addEventListener("resize", this.resizeFn);
      });
    },
    // 自适应函数
    resizeFn() {
      this.myChart.resize();
    },
  },
  beforeDestroy() { // 销毁时候移除resize事件
    window.removeEventListener("resize", this.resizeFn);
  },
};
</script>

<style>
.echart_line {
  width: 900px;
  height: 600px;
  border: 1px dotted #159;
}
</style>

总结

• 很多东西，很快就忘
• 记录一下，留个印象
• 他日再用，找到文章
• 复制粘贴，不忙不慌