echarts x,y軸數據不一一對應時 折線圖和柱狀圖的寫法。

echarts x,y軸數據不一一對應時 折線圖和柱狀圖的寫法。

1.  根據官網和社區給出的demo來看，柱狀圖折線圖等等，很多都是X,Y軸一一對應畫出來的，比如

   option = {
       xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [820, 932, 901, 934, 1290, 1330, 1320],
           type: 'line'
       }]
   };
   

   效果如下

   這個時候可以看到X,Y軸數據是一一對應的，如果將X,或者Y軸去掉一個值，那麼折線圖就會少畫出一點。這是因爲X軸是類目軸，Y軸是數值軸。

2. 如果X,Y軸不是一一對應的，X軸只有最大值最小值，X,Y軸都是數值軸 怎麼辦？數據需要重新組合，data裏面的值要變爲二維數組。

   option = {
       xAxis: {
           type: 'value',
           min:0,
           max:100
       },
       yAxis: {
           type: 'value',
           min:0,
           max:100
       },
       series: [{
           data: datas,
           type: 'line'
       }]
   };
   datas=[
       [10,10],
       [20,10],
       [30,20],
       [40,10],
       [60,60],
       [75,30],
       ]