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
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。