14. echarts画双y轴

用echarts实现双y轴，并且实现指定数据使用y轴

参考链接：https://blog.csdn.net/qq_44827865/article/details/107000180

在使用echarts中，我们经常会用到双y轴去展示数据，有时候，我们可能需要自己去设置，具体使用某一个y轴去展示某一个具体的数据。
           

一、实现echarts双y轴

1、只有一个y轴时，yAxis为对象

yAxis: {
	type: 'value',
	name: 'y轴名称'
},
           

2、两个y轴时，yAxis为数组

yAxis : [{
  type: 'value',
  name:'左侧Y轴名称',
  min: 0,
  max: 5,
  interval: 1,
  splitNumber: 6, //设置坐标轴的分割段数
},
{
  type: 'value',
  name:'右侧Y轴名称',
  min: 0,
  max: 125,
  interval: 25,
  splitNumber: 6, //设置坐标轴的分割段数
}],
           

二、echarts双y轴左右刻度线一致

1、获取数据最大值与最小值

// 获取最大值方法
function calmax(arr) {
    var max = Math.max.apply(null, arr);  // 获取最大值方法
    var maxint = Math.ceil(max / 5);  // 向上以5的倍数取整
    var maxval = maxint * 5 + 5;  // 设置最大值
    return maxval;
}
// 获取最小值的方法
function calMin(arr) {
    var min = Math.min.apply(null, arr); // 获取最小值方法
    var minint = Math.floor(min / 1);  // 向下以1的倍数取整
    var minval = minint * 1 - 5;  // 最终设置的额最小值
    return minval;  // 输出最小值
}
// 调用方法获取数据的最大值/最小值
......
           

2、确定两侧坐标轴的分割段数

3、通过坐标轴的分割段数splitNumber计算坐标轴分割间隔interval

4、设置yAxisIndex

三、图例分布显示

利用

legend

组件的

top

、

bottom

、

left

、

right

属性去配置

legend: [
  {
    top: "30%",
    right: "0%",
    data: [ {name: "数据1" } ]
  },
  {
    bottom: "20%",
    left: "0%",
    data: [ {name: "数据2"} ]
  }
],
           

四、坐标轴刻度标签数值取整

利用toFixed()方法，该方法可把 Number 四舍五入为指定小数位数的数字。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20。

axisLabel: {
    formatter: function(v) {
        return v.toFixed(2);  // 2表示小数为2位
    }
}
           

五、x/y轴名称的分布

根据文档x/y轴名称显示位置

nameLocation

的值只能是：

'start'、'middle'

或者

'center'、'end'

，没办法指定到某一位置，可以利用

nameLocation.padding

。

nameTextStyle: {
  padding: [上, 右, 下, 左]
   // 或 padding: [上下，左右]
}
           

六、坐标轴刻度标签数值以某一值为分界点改变颜色

利用

axisLabel.color

属性

axisLabel: {
  color: function(value, index) {
      turn value >= 1000 ? "red" : "green";
  }
}
           

七、参考一段案例源码

<template>
  <div class="home">
    <div id="wire"></div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      data1: [820, 932, 901, 934, 1290, 1330, 1320, 1330, 1340],
      data2: [134, 133, 132, 133, 129, 93, 90, 93, 82]
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("wire"));
    this.initData();
  },
  methods: {
    initData() {
      // 获取最大值方法
      function calMax(arr) {
        var max = Math.max.apply(null, arr); // 获取最大值方法
        var maxint = Math.ceil(max / 5); // 向上以5的倍数取整
        var maxval = maxint * 5 + 5; // 最终设置的最大值
        return maxval; // 输出最大值
      }
      // 获取最小值方法
      function calMin(arr) {
        var min = Math.min.apply(null, arr); // 获取最小值方法
        var minint = Math.floor(min / 1); // 向下以1的倍数取整
        var minval = minint * 1 - 5; // 最终设置的最小值
        return minval; // 输出最小值
      }
      // 调用方法，获取数据的最大值&最小值
      var maxData1 = calMax(this.data1);
      var maxData2 = calMax(this.data2);
      var minData1 = calMin(this.data1);
      var minData2 = calMin(this.data2);

      const option = {
        // 图例组件
        legend: [
          {
            top: "30%",
            right: "0%",
            textStyle: {
              fontSize: 12, //字体大小
              color: "#" //字体颜色（图例与图例文字配色保持一致）
            },
            data: [
              {
                name: "数据1"
              }
            ]
          },
          {
            bottom: "20%",
            left: "0%",
            textStyle: {
              fontSize: 12, //字体大小
              color: "#" //字体颜色
            },
            data: [
              {
                name: "数据2"
              }
            ]
          }
        ],
        // 直角坐标系内绘图网格
        grid: {
          show: true,
          x: 120,
          y: 50,
          x2: 120,
          y2: 50
        },
        xAxis: {
          name: "X轴数据",
          type: "category",
          data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
          nameTextStyle: {
            padding: [0, 0, 50, 50]
          }
        },
        yAxis: [
          {
            type: "value",
            name: "左侧",
            nameTextStyle: {
              padding: [0, 0, -55, -150]
            },
            min: minData1,
            max: maxData1,
            splitNumber: 6, //设置坐标轴的分割段数
            interval: (maxData1 - minData1) / 6, // 标轴分割间隔
            axisLabel: {
              formatter: function(v) {
                return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
              },
              color: function(value, index) {
                return value >= 1000 ? "red" : "green";
              }
            }
          },
          {
            type: "value",
            name: "右侧",
            nameTextStyle: {
              padding: [0, 50, -50, 200]
            },
            min: minData2,
            max: maxData2,
            splitNumber: 6,
            interval: (maxData2 - minData2) / 6,
            axisLabel: {
              formatter: function(v) {
                return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
              }
            }
          }
        ],
        series: [
          {
            name: "数据1",
            type: "line",
            color: ["#eb9f0d"],
            symbol: "none",
            smooth: true,
            data: this.data1
          },
          {
            name: "数据2",
            type: "line",
            color: ["#969ac7"],
            symbol: "none",
            smooth: true,
            yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
            data: this.data2
          }
        ]
      };
      this.myChart.setOption(option);
      // 自适应布局
      let _this = this;
      window.addEventListener("resize", function(event) {
        _this.myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  #wire {
    width: 800px;
    height: 500px;
    border: 1px solid;
  }
}
</style>