echarts双Y轴(简单明了)

本文主要实现echarts双Y轴,并在此过程中解决:

  • 实现echarts双Y轴
  • echarts双Y轴左右刻度线一致
  • 图例分布显示
  • 坐标轴刻度标签数值取整
  • X/Y轴名称的分布
  • 坐标轴刻度标签数值以某一值为分界点改变颜色

等问题
下方有源码!请注意查收!
在这里插入图片描述

1、 实现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, //设置坐标轴的分割段数
	}],

2、 echarts双Y轴左右刻度线一致

参考文档:
https://blog.csdn.net/qq_40845885/article/details/82108525
https://blog.csdn.net/LzzMandy/article/details/79400141?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

2.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.2 、确定两侧坐标轴的分割段数

splitNumber: 6,

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

interval: (maxData1 - minData1) / 6,

2.4、 设置yAxisIndex

yAxisIndex: 1,    //在单个图表实例中存在多个y轴的时候有用

3、图例分布显示

利用legend组件的top、bottom、left、right属性去配置

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

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

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

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

5、X/Y轴名称的分布

根据文档X/Y轴名称显示位置 nameLocation的值只能是:‘start’、‘middle’ 或者’center’、‘end’,没办法指定到某一位置,所以本人想到的方法就是利用nameLocation.padding。

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

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

利用axisLabel.color属性

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

value >= 1000 ? “red” : “green”;为三目运算符,意思是:如果数值大于等于1000那么数值颜色为红色,否则为绿色。

源码:

<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>

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页