echarts图表x,y轴的设置
xAxis属性代表echarts图表的x轴设置代码如下:
xAxis : [ { type : 'category', // type:坐标轴类型。 // [ default: 'category' ] /*可选:1.'value' 数值轴,适用于连续数据;
2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据;
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;
4.'log' 对数轴。适用于对数数据。*/ data : ['上海','北京'], //x轴下面的数据 axisTick: { show: false, //是否显示网状线 默认为true alignWithLabel: true }, //用于设置x下面的字体 axisLabel:{ show:true, //这里的show用于设置是否显示x轴下的字体 默认为true
interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
textStyle:{ //textStyle里面写x轴下的字体的样式
color:'#333', fontSize:13 } }, axisLine:{ show:true, //这里的show用于设置是否显示x轴那一条线 默认为true lineStyle:{ //lineStyle里面写x轴那一条线的样式 color:'#6FC6F3', width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏 } } }, ]
yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异:
yAxis:[{ min:0, //y轴的最小值 max:100, //y轴最大值 interval:20, //值之间的间隔 //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值 type:'value', /* type坐标轴类型:[ default: 'value' ]
可选:1.'value' 数值轴,适用于连续数据。
2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
4.'log' 对数轴。适用于对数数据。*/ splitLine:{show:false}, //去除网状线 默认为true //用于设置y轴的字体 axisLabel:{ show:true, //这里的show用于设置是否显示y轴下的字体 默认为true textStyle:{ //textStyle里面写y轴下的字体的样式 color:'#333', fontSize:13 } }, //用于设置y轴的那一条线 axisLine:{ show:true, //这里的show用于设置是否显示y轴那一条线 默认为true lineStyle:{ //lineStyle里面写y轴那一条线的样式 color:'#6FC6F3', width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏 } } }]
实操时,遇到的问题:
"dataDefinition": { "axisColumn": "AXIS", "abbrevAXIS": "abbrevAXIS", "tooltipRoll": false, "series": [ { "name": "疑点数", "valueColumn": "VALUE1", "unit": "个", "color": "blue", "type": 1 //type为0,表示柱状图;type为1,表示折线图 } ] }, "newOption": { "yAxis": [ { //柱状图的y轴属性设置 "show": false, "name": "个", "splitLine": { "show": true } }, { //折线图的y轴属性设置 "name": "个", "show": true, "splitLine": { "show": true }, "position": "left" //默认:折线图的y坐标轴默认为right,柱状图的y坐标轴默认为left。 //此时,需求为折线图,问题:左边的坐标轴数据不显示。解决方案:将position值设置为left } ], "xAxis": [ { "axisLabel": { "interval": 0, "margin": 6, "color": "#939AA6" } } ], "legend": { "show": true, "top": "bottom", "left": "center", "textStyle": { "color": "#fff" }, "data": [ { "name": "疑点数", "icon": "line" } ] } }
如下图:

浙公网安备 33010602011771号