| echarts双Y轴（简单明了） | 您所在的位置：网站首页 › 如何做双坐标轴的曲线图 › echarts双Y轴（简单明了） |
echarts双Y轴（简单明了）
|
本文主要实现echarts双Y轴，并在此过程中解决： 实现echarts双Y轴echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整X/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、案例源码 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(); }); } } }; .home { width: 100%; height: 100%; display: flex; justify-content: center; #wire { width: 800px; height: 500px; border: 1px solid; } } |
【本文地址】
公司简介
联系我们