本文主要是介绍echarts设置上下Y轴,多轴设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
echarts 设计双Y轴,X轴在中间位置,实现图形上下延伸,
option = {legend:{data:["直接访问","间接"],},color: ['#3398DB'],tooltip : {trigger: 'axis',axisPointer : { // 坐标轴指示器,坐标轴触发有效type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},grid:[ //用于调整X轴以及Y轴的位置{show: false,bottom: '12%',left: 93,right: 100,containLabel: true,height: '40%'}, {show: false,top: '48%',left: 124,right: 100,height: '0%',zlevel:100}, {show: false,top: '8%',// left: 76,left: 93,right: 100,containLabel: true,height: '40%'}],xAxis : [{type: 'category',position: 'bottom',axisLine: {show: false,},axisTick: {show: false},axisLabel: {show: false,},data: [],}, {gridIndex: 1,type: 'category',position: 'center',axisLine: {show: true},axisTick: {show: true},zlevel:200,axisLabel: {show: true,align: 'center',textStyle: {color: '#323232',fontSize: 12}},data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},{gridIndex: 2,type: 'category',position: 'top',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false,},data: [],}],yAxis : [{type: 'value',inverse: true, //echarts Y轴翻转属性,position: 'left', //位置属性axisLabel: {show: true,textStyle: {color: '#646464',fontSize: 12, }},splitLine: {show: true,lineStyle: {color: "rgba(0,162,255,0.08)",width: 1,}}}, {gridIndex: 1, //对应的是grid 通过grid设置X Y相对位置show: false,}, {gridIndex: 2,type: 'value',position: 'left', //双Y轴一个翻转一个不翻转axisLabel: {show: true,textStyle: {color: '#646464',fontSize: 12, }},splitLine: {show: true,lineStyle: {color: "rgba(0,162,255,0.08)",width: 1,}}}],series : [{gridIndex:0, //选取调整好的轴,调整图形是向上还是向下name:'直接访问',type:'bar',barWidth: '40%',data:[300, 52, 200, 334, 390, 330, 220],xAxisIndex: 2,yAxisIndex: 2,itemStyle:{color:"#B23AEE"}},{gridIndex:2, 选取调整好的轴,调整图形是向上还是向下name:'间接',type:'bar',barWidth: '40%',data:[100, 300, 50, 150, 210, 110, 48],}]
};
这篇关于echarts设置上下Y轴,多轴设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!