echarts x軸 增加捲軸__web

          最近blog裡面大家都問 x軸類目顯示不全問題 如何增加捲軸  下面把我項目中用到的跟大家分享出來  其中

dataZoom 

的代碼就是增加捲軸用到的

                                function (ec) {              var myChart = ec.init(document.getElementById('line'));                                     var option = {                      title : {                       text: '商品排名分析',                      subtext:'橫向：商品名稱， 縱向：金額'               },                      tooltip: {                          show: true,                          trigger: 'axis'                      },                      legend: {                          data:['銷售重量','訂單金額']                      },                      toolbox: {                  show : true,                  feature : {                      mark : {show: true},                      dataView : {show: true, readOnly: false},                      magicType : {show: true, type: ['bar','line']},                      restore : {show: true},                      saveAsImage : {show: true}                  }              },            grid:{                                          y2:150                      },                      xAxis : [                          {                              type : 'category',                              boundaryGap : true,                              data : proNameArr,                              axisLabel:{                                            interval:0 ,                                          formatter:function(val){                                              return val.split("").join("\n");                                            }                                        }                            }                      ],                      yAxis : [                          {                              type : 'value'                          }                      ],<span style="color:#ff0000;">   <span style="color:#FF0000;">                   dataZoom : {                          show : true,                          realtime : true,                          start : 0,                          end : 100                      }</span>,</span>                      series : [                          {                              "name":"銷售重量",                              "type":"line",                              "data":normWeightArr                           },                          {                              "name":"訂單金額",                              "type":"line",                              "data":orderMoneyArr                           }                       ]                                          };                  // 為echarts對象載入資料                   myChart.setOption(option);              }

這是效果