echarts双Y轴（简单明了）

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

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

等问题

下方有源码！注意查收！

1、实现echarts双Y轴

就一个Y轴时yAxis为对象

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

两个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 那么数值颜色为红色，否则为绿色。如果将不想显示的数值改成同背景色一样的颜色，就可以实现隐藏（或空缺）的效果！！！

7、案例源码

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