echarts x軸 增加滾動條

charts x軸 增加滾動條

• 在option 配置項中添加 【 dataZoom 中配置 】 設置x軸滾動條
• 效果圖： 動態拖動
• 以下參考代碼

dataZoom配置   

官網寫法

option = {
   xAxis: {
       type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, dataZoom: [{ type: 'slider', show: true, xAxisIndex: [0], left: '9%', bottom: -5, start: 10, end: 90 //初始化滾動條 }], yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', barWidth:30,//設置柱狀圖寬度 }] };

效果圖

 

 

 

jsp:寫法

var option = {

1. dataZoom : {
2.  
   show : true,
3.  
   realtime : true,
4.  
   start : 0,
5.  
   end : 100
6.  
   }

title : {
text: '商品排名分析',
subtext:'橫向：商品名稱， 縱向：金額'
},