echarts 上下双坐标轴Y轴对齐

1.问题：不同的数据源用同一个布局页面来显示会导致对齐一个页面另外的页面Y轴对不齐，如下图：

图1：

图2：

结果发现图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;}},

echarts 上下双坐标轴Y轴对齐相关推荐

echarts柱状图x，y轴对应多条数据(可自定义)
echarts,x,y轴对应多条数据,y轴取反就行先说需求,我做这个图表是多个物流商对应不同月份的数值配置项option option = {tooltip: {trigger: 'axis',a ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
echarts配置多个y轴
echarts配置多个y轴的时候,需要加上: yAxisIndex: 1 1 { 2 name:'来水增量累积(mm)', 3 type:'line', 4 stack: '总量', 5 yAxisI ...
echarts 折线图设置y轴最小刻度_用plotly和plt画图的基本设置（标题、坐标轴、图例、注释、图像）...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客非常好的文章,值得推荐. 一用matplotlib.py ...
Origin绘制双x,y轴图像
1.前言目的是绘制双x,双y轴的图像,并且两组数据的个数不一致. 2.准备模拟数据首先在excel中模拟了两组数据,P列为1-5随机个数的数值,用于绘制直方图.Q,S列的关系为S=sin(Q),用 ...
echarts图表x，y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [{type : 'category', // type:坐标轴类型.// [ default: 'category' ]/*可 ...
Echarts多系多y轴的配置
有时候在一个图形中需要显示的对象多样化,一个y轴并不能满足我们的需求.这时我们就需要配置多个y轴 <!DOCTYPE html> <html> <head>< ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
Echarts中折线图Y轴数据值太长显示不全-解决办法
正常状态不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况代码 <div id="c ...

echarts 上下双坐标轴Y轴对齐

echarts 上下双坐标轴Y轴对齐相关推荐

最新文章

热门文章