关于echarts:echarts折线图两组数据使用两个y轴代码

记录一下成果以及相干代码，留作当前复用

效果图

代码

<template>
  <div class="zhexianWrap">
    <div id="echartsBox"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {data() {
    return {
      myChart: null, // 定义变量用来寄存 echarts 实例
      minData: 1,
      maxData: 10,
    };
  },
  mounted() {this.drawEcharts();
  },
  methods: {
    // 画图办法
    drawEcharts() {this.myChart = Echarts.init(document.getElementById("echartsBox"));
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          confine: true, // 解决悬浮提醒被遮住的问题
          formatter: function (params) {
            var res =
              "<div style='padding:0 12px;height:24px;line-height:24px;'><p>" +
              params[0].name +
              "</p></div>";
            for (var i = 0; i < params.length; i++) {
              // 因为是个数组，所以要遍历拿到外面的数据，并退出到 tooltip 的数据内容局部外面去
              res += `<div style="padding:0 12px;">
                  <span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color, // 默认是小圆点，咱们将其批改成有圆角的正方形，这里用的是模板字符串。并拿到对应色彩、名字、数据
                  ]};"></span>
                  ${params[i].seriesName}
                  ${params[i].data} ${i == 0 ? "km" : "min"}
                </div>`;
            }
            return res; // 通过这么一加工，最终返回进来并渲染，最终就呈现了咱们所看的成果
          },
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          axisLabel: {
            // 设置 x 轴下方文字的款式
            textStyle: {
              show: true,
              color: "#BDBDBD",
              fontSize: "12",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              // 设置 x 轴线条的款式
              color: "#BDBDBD",
              width: 1,
              type: "solid",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitNumber: 4, // 设置坐标轴的宰割段数
            splitLine: {
              // 去除网格线
              show: false,
            },
            axisLine: {
              // y 轴线的色彩以及宽度
              show: true,
              lineStyle: {
                color: "#BDBDBD",
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              // 设置 y 轴的文字的款式
              textStyle: {
                show: true,
                color: "#BDBDBD",
                fontSize: "12",
              },
            },
          },
          {
            type: "value",
            splitLine: {
              // 去除网格线
              show: false,
            },
            axisLine: {
              // y 轴线的色彩以及宽度
              show: true,
              lineStyle: {
                color: "#BDBDBD",
                width: 1,
                type: "solid",
              },
            },
            min: this.minData, // 最大值和最小值要从后端获取，或者写死数值，或者不去自定义最大最小值
            max: this.maxData,
            splitNumber: 6, // 设置坐标轴的宰割段数
            axisLabel: {formatter: function (v) {return v.toFixed(1); // 0 示意保留小数为 0 位，1 示意 1 位，2 示意 2 位
              },
            },
          },
        ],
        legend: {data: ["跑步", "平板撑持"],
        },
        series: [
          {
            name: "跑步",
            yAxisIndex: 0, // 默认应用的是左侧的 y 轴 左侧的 y 轴 yAxisIndex 值为 0
            data: [8.5, 7.2, 10, 9.5, 4, 6.6, 10],
            type: "line",
          },
          {
            name: "平板撑持",
            yAxisIndex: 1, // 指定应用右侧的 y 轴，也就是 yAxisIndex 为 1 即可
            data: [3.5, 4, 2.5, 5, 9.4, 1, 5],
            type: "line",
          },
        ],
        grid: {
          // 地位
          show: true,
          x: 48,
          y: 24,
          x2: 48,
          y2: 26, // 6
          borderWidth: 0, // 去除图表的边框
        },
        title: [
          // 因为是两个 y 轴，所以 title 写成数组的模式，进行配置
          {
            // title 为题目局部，有一级题目 text，二级题目 subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过 title.subtextStyle 去配置
            subtext: "公里数（km）",
            left: 48, // 间隔右边地位
            top: 0, // 间隔下面地位
            subtextStyle: {
              // 设置二级题目的款式
              color: "#BFBFBF",
            },
          },
          {
            // title 为题目局部，有一级题目 text，二级题目 subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过 title.subtextStyle 去配置
            subtext: "分钟（min）",
            right: 48, // 间隔右边地位
            top: -8, // 间隔下面地位
            subtextStyle: {
              // 设置二级题目的款式
              color: "#BFBFBF",
            },
          },
        ],
        color: ["#ED837C", "#E8D095"], // 管制折线图的色彩
      });
      // 自适应
      window.addEventListener("resize", () => {this.myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.zhexianWrap {
  width: 100%;
  height: 300px;
  overflow: hidden; // 解决鼠标移除 echarts 图当前呈现滚动条问题
  #echartsBox {
    width: 100%;
    height: 100%;
  }
}
</style>