echarts x軸 增加滾動條
阿新 • • 發佈:2019-02-02
最近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); }
這是效果