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]
                    }
                ]

 

作者：吃鱼_
链接：https://www.jianshu.com/p/f4747768f582
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。