echarts 上下双坐标轴Y轴对齐 |
您所在的位置：网站首页 › 左右对称柱状图 › echarts 上下双坐标轴Y轴对齐 |
echarts 上下双坐标轴Y轴对齐
|
1.问题：不同的数据源用同一个布局页面来显示会导致对齐一个页面另外的页面Y轴对不齐，如下图： 图1：
图2：
后来经过观察发现，图1和图二的下半部分的y轴数量坐标位数不一样，导致了长度不同，这样的话就不行，不能够适配其他的数据。所以就必须把上下两个轴的Y轴的数量的宽度固定下来，然后让它们左对齐或右对齐，而echarts 好像没有固定这个宽度的api. 所以，就采用补空位的方法。 本例中我是预设6位数的，不够就在其左边补齐，这样就使得上下的Y轴数据的宽度一样，所以就会对齐。
代码： workTime(group, a, b) { // ["1-2Y", "1-3M", "10-12Y", "10-20d", "12-15Y", "15Y~", "2-3Y", "21-30d", "3-5Y", "3-6M", "5-8Y", "5d", "6-10d", "6-12M", "8-10Y"] var aa = ["A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C"]; // console.log(group,a,b,"dsdsdsdsdsd") // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('workRate')); var option1 = { tooltip: { show: true, trigger: 'item', formatter: '{a}: {c}人', axisPointer: { type: 'shadow', } }, legend: { data: [], top: 15, right: "0", orient: "vertical", center: true, textStyle: { textAlign: 'center', fontSize: 12 }, itemGap: 30, itemWidth: 25, }, grid: [{ show: false, bottom: '10%', left: 93, right: 100, containLabel: true, height: '40%' }, { show: false, top: '42%', left: 140, right: 100, height: '0%' }, { show: false, top: '3%', // left: 76, left: 93, right: 100, containLabel: true, height: '40%' }], yAxis: [{ type: 'value', inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, position: 'left', axisLabel: { show: true, formatter: function (params) { return _this.alignment(params); }, textStyle: { color: '#646464', fontSize: 12, // align:'left' } }, splitLine: { show: true, lineStyle: { color: "rgba(0,162,255,0.08)", width: 1, } } }, { gridIndex: 1, show: false, }, { gridIndex: 2, type: 'value', axisLine: { show: false, }, axisTick: { show: false, }, position: 'left', axisLabel: { show: true, formatter: function (params) { return _this.alignment(params) }, textStyle: { color: '#646464', fontSize: 12, // align:'left' } }, splitLine: { show: true, lineStyle: { color: "rgba(0,162,255,0.08)", width: 1, } } }, ], xAxis: [{ type: 'category', position: 'bottom', axisLine: { show: false, }, axisTick: { show: false }, axisLabel: { show: false, }, data: [], }, { gridIndex: 1, type: 'category', position: 'center', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: true, align: 'center', textStyle: { color: '#323232', fontSize: 12 } }, data: aa, }, { gridIndex: 2, type: 'category', position: 'top', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false, }, data: [], } ], series: [{ name: '', type: 'bar', barWidth: '40%', itemStyle: { normal: { color: '#49a1ff' } }, label: { normal: { show: true, color: '#323232', position: 'top' } }, xAxisIndex: 2, yAxisIndex: 2, data: a }, { name: '', type: 'bar', barWidth: '40%', itemStyle: { normal: { color: '#f9d446' } }, label: { normal: { show: true, color: '#323232', position: 'bottom' } }, data: b, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option1); }, // 上下坐標軸對齊 yk: function (val) { return 6 - val.toString().length; }, alignment: function (val) { let val1 = val.toString(); if (val1 != null) { let len = this.yk(val1); return String.fromCharCode(8194).repeat(len) + val1; } },
|
结果发现图1，对齐了，图2跑偏了，可是明明是同一个布局。
【本文地址】
今日新闻 |
推荐新闻 |