| 实现ECharts双Y轴左右刻度线一致 | 您所在的位置：网站首页 › 柱状图怎么设置两个y轴 › 实现ECharts双Y轴左右刻度线一致 |
实现ECharts双Y轴左右刻度线一致
|
先上图：
这是未解决的，双Y轴左右刻度线不一致 这是已解决的，双Y轴左右刻度线一致 1、原因 刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。 2、思路 根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。 3、解决方法 ①首先固定两边的分隔的段数。 ①分别求出左边Y轴和右边Y轴的最大值max和最小值min，根据max和min之间的和去除以分隔的段数，分别算出左边Y轴和右边Y轴的分隔间隔。 ②在ECharts中有两个很重要的属性： interval：强制设置坐标轴分割间隔。 splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 根据上面的值，结合min和max属性去配置ECharts。 4、源码 app.title = '折柱混合'; //计算最大值 function calMax(arr) { let max = 0; arr.forEach((el) => { el.forEach((el1) => { if (!(el1 === undefined || el1 === '')) { if (max < el1) { max = el1; } } }) }) let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度 let maxval = maxint * 10;//让显示的刻度是整数 return maxval; } //计算最小值 function calMin(arr) { let min = 0; arr.forEach((el) => { el.forEach((el1) => { if (!(el1 === undefined || el1 === '')) { if (min > el1) { min = el1; } } }) }) let minint = Math.floor(min / 10); let minval = minint * 10;//让显示的刻度是整数 return minval; } var data1 = [59357.9, 52789.77, 24837.98, 14345.02, 2291.93], data2 = [-12108.81, 701.43, 1280.75, -2109.83, -18693.95], data3 = [0, -11.07, -52.95, -42.25, -84.02], data4 = [0, 105.79, 82.59, -264.73, -786.04] var Min1 = calMin([data1, data2]), Min2 = calMin([data3, data4]), Max1 = calMax([data1, data2]), Max2 = calMax([data3, data4]); option = { grid: {left: '100', right: '100', bottom: '100', top: '100'}, color: ['#0698d6', '#fd8246', '#d773b4', '#41ac7c', '#e86367', '#aada9c'], tooltip: {trigger: 'axis', axisPointer: {type: 'cross', crossStyle: {color: '#999'}}}, legend: {data: ['营业收入', '净利润', '营业收入同比增长率', '净利润同比增长率']}, xAxis: [{ type: 'category', show: false, lineWidth: 0, axisPointer: { type: 'shadow' }, data: ["2013-12-31", "2014-12-31", "2015-12-31", "2016-12-31", "2017-12-31"] }], yAxis: [{ name: '单位：万元', nameTextStyle: {color: '#999999'}, type: "value", axisLine: {show: false}, axisTick: {show: false}, axisLabel: {verticalAlign: "bottom", color: "#999999"}, min: Min1, max: Max1, splitNumber: 5, interval: (Max1 - Min1) / 5 }, { name: '单位：%', type: 'value', nameTextStyle: {color: '#999999'}, axisLine: {show: false}, axisTick: {show: false}, axisLabel: {verticalAlign: "bottom", color: "#999999"}, min: Min2, max: Max2, splitNumber: 5, interval: (Max2 - Min2) / 5 }], series: [{name: '营业收入', type: 'bar', barGap: 0, barWidth: 30, data: data1}, {name: '净利润', type: 'bar', barGap: 0, barWidth: 30, data: data2}, {name: '营业收入同比增长率', type: 'line', yAxisIndex: 1, data: data3}, {name: '净利润同比增长率', type: 'line', yAxisIndex: 1, data: data4} ] }
|
【本文地址】
公司简介
联系我们