echarts两个折线图共用x轴且合并tooltip功能代码

问题描述

产品要这样的效果，就做这样的效果呗。有图有真相，我们先来看一下效果图：

效果图

代码附上

运行的话，直接赋值粘贴即可，遇到类似的功能，ctrl+CV改一下就行啦 ^_^

<template>
  <div class="eWrap">
    <div id="echartsDom"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 定义变量用来存放echarts实例
      xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 两个echarts公用的x轴的数据
      y1Data: [8888, 9999, 7777, 10000, 3334, 7878, 6543], // 小件货物
      y2Data: [56, 64, 32, 58, 64, 76, 81], // 网点负荷
      y3Data: [88, 99, 77, 100, 21, 66, 95], // 大件货物
    };
  },
  mounted() {
    this.drawEcharts();
  },
  methods: {
    // 画图方法
    drawEcharts() {
      this.myChart = Echarts.init(document.getElementById("echartsDom"));
      this.myChart.setOption({
        color: ["#bfa", "#baf", "pink", "#baf"], // 配置数据颜色
        grid: [
          // 配置第一个折线图的位置
          {
            left: "14.5%",
            right: "12%",
            top: "10%",
            height: "32%",
          },
          // 配置第二个折线图位置
          {
            left: "14.5%",
            right: "12%",
            top: "60%",
            height: "32%",
          },
        ],
        tooltip: {
          trigger: "axis",
          // formatter函数动态修改tooltip样式
          formatter: function (params) {
            if (params) {
              var htmlStr = "";
              htmlStr += params[0].name.replace(/\-/g, "/") + "<br/>"; //x轴的名称
              for (var i = 0; i < params.length; i++) {
                var param = params[i]; // 存一份item项
                var seriesName = param.seriesName; //图例名称
                var value = param.value; //y轴值
                var color = param.color; //图例颜色
                htmlStr += "<div>";
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>';
                //圆点后面显示的文本
                htmlStr += seriesName + "：" + value;
                switch (seriesName) {
                  case "小件货物":
                    htmlStr += " " + "件";
                    break;
                  case "网点负荷":
                    htmlStr += " " + "%";
                    break;
                  case "大件货物":
                    htmlStr += " " + "件";
                    break;
                  default:
                    htmlStr += " ";
                }
                htmlStr += "</div>";
              }
              return htmlStr;
            } else {
              return;
            }
          },
          backgroundColor: "#ccc",
          borderWidth: 1,
          borderColor: "#ccc",
          padding: 10,
          textStyle: {
            color: "#000",
            fontSize: 12,
            align: "left",
          },
        },
        legend: {
          show: true,
          x: "center",
          y: "0",
          data: ["小件货物", "网点负荷", "大件货物", "网点负荷"],
          textStyle: {
            fontSize: 12,
          },
        },
        // 将上下两个tootip合成一个
        axisPointer: {
          link: { xAxisIndex: "all" },
        },
        xAxis: [
          {
            type: "category",
            scale: true,
            axisLabel: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            splitLine: {
              show: false,
            },
            data: this.xData, //x轴时间的数据
          },
          {
            gridIndex: 1,
            type: "category",
            scale: true,
            axisLabel: {
              fontSize: 10,
            },
            axisTick: {
              alignWithLabel: true,
            },
            splitLine: {
              show: false,
            },
            data: this.xData, //x轴时间的数据
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "件数",
            nameLocation: "center",
            nameGap: 50,
            nameTextStyle: {
              fontSize: 12,
              fontWeight: "500",
            },
            axisLabel: {
              fontSize: 12,
            },
            min: function (value) {
              return parseInt(value.min);
            },
            max: function (value) {
              return parseInt(value.max * 1.05);
            },
            scale: false,
            boundaryGap: [0, "100%"],
            splitLine: {
              show: false,
            },
            splitNumber: 4, //设置坐标轴的分割段数
          },
          {
            type: "value",
            name: "负荷/百分比",
            nameLocation: "center",
            nameGap: 42,
            nameTextStyle: {
              fontSize: 12,
            },
            axisLabel: {
              fontSize: 12,
            },
            // min: function (value) {
            //   return parseInt(value.min);
            // },
            // max: function (value) {
            //   return parseInt(value.max * 1.05);
            // },
            scale: true,
            boundaryGap: [0, "100%"],
            splitLine: {
              show: false,
            },
            splitNumber: 4, //设置坐标轴的分割段数
          },
          {
            type: "value",
            name: "件数",
            nameLocation: "center",
            gridIndex: 1,
            nameGap: 30,
            nameTextStyle: {
              fontSize: 12,
            },
            axisLabel: {
              fontSize: 12,
            },
            min: function (value) {
              return parseInt(value.min);
            },
            max: function (value) {
              return parseInt(value.max * 1.05);
            },
            scale: true,
            boundaryGap: [0, "100%"],
            splitLine: {
              show: false,
            },
            splitNumber: 4, //设置坐标轴的分割段数
          },
          {
            type: "value",
            name: "负荷/百分比",
            nameLocation: "center",
            gridIndex: 1,
            nameGap: 42,
            nameTextStyle: {
              fontSize: 12,
            },
            axisLabel: {
              fontSize: 12,
            },
            // min: function (value) {
            //   return parseInt(value.min);
            // },
            // max: function (value) {
            //   return parseInt(value.max * 1.05);
            // },
            scale: true,
            boundaryGap: [0, "100%"],
            splitLine: {
              show: false,
            },
            splitNumber: 4, //设置坐标轴的分割段数
          },
        ],
        dataZoom: [
          {
            type: "inside",
            startValue: this.y1Data.length - 4, // 放置最后4个数组
            endValue: this.y1Data.length - 1,
            xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提示就会出问题
          },
        ],
        series: [
          {
            name: "小件货物",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            hoverAnimation: true, // 悬浮的动画加上
            data: this.y1Data, //小件货物
          },
          {
            name: "网点负荷",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 1,
            hoverAnimation: true, // 悬浮的动画加上
            data: this.y2Data, //网点负荷
          },
          {
            name: "大件货物",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 2,
            hoverAnimation: true, // 悬浮的动画加上
            data: this.y3Data, //大件货物
          },
          {
            name: "网点负荷",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 3,
            hoverAnimation: true, // 悬浮的动画加上
            data: this.y2Data, //网点负荷
          },
        ],
      });
      // 自适应
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.eWrap {
  width: 100%;
  height: 400px;
  overflow: hidden;
  #echartsDom {
    width: 100%;
    height: 100%;
  }
}
</style>