echarts系列-----2 (多个Y轴)

最新推荐文章于 2025-06-26 12:00:02 发布

zhooson

最新推荐文章于 2025-06-26 12:00:02 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/Zhooson/article/details/90232788

echarts 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何在ECharts中实现多个Y轴的图表展示，包括Y轴的配置、数据映射及动态渲染等关键步骤，适用于需要同时比较不同类型数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇讲解的echarts 多个Y轴的实现方法，具体见代码，并标注注释（例子文档事例都是有的，传送门?）

yAxisIndex 代表第一个Y轴（0，1，2…）
- this.myChart.setOption(options, true); 重新渲染canvas传送门?

在这里插入图片描述

<template>
  <div>
    <div id="main" style="width:1200px;height:600px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echartsmorey",
  data() {
    return {
      list: [
        {
          x: 1,
          y: 1,
          z: 99,
          k: 11
        },
        {
          x: 2,
          y: 2,
          z: 70,
          k: 11
        },
        {
          x: 3,
          y: 3,
          z: 1,
          k: 11
        },
        {
          x: 4,
          y: 4,
          z: 30,
          k: 11
        },
        {
          x: 5,
          y: 1,
          z: 20,
          k: 11
        },
        {
          x: 6,
          y: 0,
          z: 18,
          k: 11
        },
        {
          x: 7,
          y: 10,
          z: 12,
          k: 11
        }
      ],
      dataX: [],
      dataY: [],
      dataY2: []
    };
  },
  methods: {
    init(dataX, dataY) {
      this.myChart = echarts.init(document.getElementById("main"));
      let option = {
        legend: {
          icon: "stack",
          data: ["AA", "BB", "CC"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: true
          }
        },
        // 工具栏
        toolbox: {
          x: 1100,
          y: 0,
          feature: {
            saveAsImage: {
              name: `test`
            }
          }
        },
        grid: {
          left: "5%", //组件距离容器左边的距离
          right: "20%",
          top: "15%"
        },
        // X轴 滑块 可缩放
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0, // 开始百分数
            end: 100 // 结束百分数
          }
        ],
        xAxis: {
          type: "category",
          splitLine: {
            // X 轴分隔线样式
            show: true,
            lineStyle: {
              color: ["#f3f0f0"],
              width: 2,
              type: "solid"
            }
          },
          data: dataX
        },
        yAxis: [
          {
            name: "Y轴单位写的位置",
            type: "value",
            // max: 100,
            // min: 0,
            position: "left",
            splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            }
          },
          {
            name: "Y2轴单位写的位置",
            type: "value",
            position: "right",
            splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            }
          },
          {
            name: "Y3轴单位写的位置",
            type: "value",
            offset: 70,
            nameGap: 30, // 上下距离的位置
            position: "right",
            splitNumber: 10, // Y 轴分隔格数
            splitLine: {
              // Y 轴分隔线样式
              show: true,
              lineStyle: {
                color: ["#f3f0f0"],
                width: 2,
                type: "solid"
              }
            }
          }
        ],
        series: dataY
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.dataX = this.list.map(item => item.x);
      // 第1个Y轴
      this.dataY.push({
        name: "AA",
        type: "line", // 直线
        yAxisIndex: 0, // 第几个Y轴 索引值
        data: this.list.map(item => item.y)
      });
      // 第2个Y轴
      this.dataY.push({
        name: "BB",
        type: "line",
        yAxisIndex: 1, // 第几个Y轴 索引值
        data: this.list.map(item => item.z)
      });
      // 第3个Y轴
      this.dataY.push({
        name: "CC",
        type: "line",
        yAxisIndex: 2, // 第几个Y轴 索引值
        data: this.list.map(item => item.k)
      });

      this.init(this.dataX, this.dataY);
    });
  }
};
</script>

<style scoped>
</style>