echarts name 坐标轴_Echarts用多 x 轴坐标画图

在移动端,用户习惯向下滑动屏幕,所以在画柱状图的时候,可以把分类category放到横坐标上,用纵坐标表示值value.

"xAxis": [

{

"name":"xxxxA",

"max":"400",

"type": "value"},

{

"name":"xxxxB",

"type": "value"

}

],

此处 xAxis 是一个数组,当横坐标数量小于等于2的时候,默认显示下上两个坐标轴,如果大于2,则可以指定位置,并使用 offset 参数修正位置,不重叠

"xAxis": [

{

"name":"xxxxA",

"max":"400",

"type": "value"},

{

"name":"xxxxB",

"type": "value"

},

{

"name":"xxxxC",

"type": "value",

"position":"top"

"offset":30,

}

],

最后在series中设置xAxisIndex为xaxis 的index 就可以了

"series": [

{

"name":"学程数",

"type":"line",

"xAxisIndex": 1,

"data":[1,2,4,5, 8, 9.0, 8,6,5,9]

},

{

"name":"总题数",

"type":"bar",

"data":[20,10,20, 49, 70, 180,70,88,93,72]

},

{

"name":"错题数",

"type":"bar",

"data":[5, 9, 9,8,24,9,11,32,13,21]

}

]