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:'横向：商品名称， 纵向：金额'
},