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