前言

在实际开发过程中大家很有可能会用到echarts图标统计，对于数据量比较多的情况下使用echatrs滚动条也是常有的事，这次我们就用到了，而且还是需要对滚动条进行设置，不是echarts默认的滚动条样式，就把使用到的过程记录一下；

引用

如果要使用echarts需要对它进行引用

<script type="text/javascript"src="/echarts-5.2.1/dist/echarts.js"></script>

HTML

<div id="div1" style="width:100%;height:290px;padding-top:10px;padding-bottom: 10px"></div>

JS

var myChart = echarts.init(document.getElementById('div1'));

var option = {

xAxis: {

type: 'category',

data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

},

yAxis: {

type: 'value'

},

dataZoom: [{

type: 'inside',

start:1,//数据窗口范围的起始百分比,表示1%

end:50//数据窗口范围的结束百分比,表示35%坐标

}, {

type: 'slider',

height:10,

bottom: 0,

brushSelect:false,

showDetail:false,

showDataShadow:false

}],

series: [

{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line',

smooth: true

}

]

};

myChart.setOption(option);

说明

Option中的dataZoom就是图表中使用的滚动条

{

type: 'inside',

start:1,//数据窗口范围的起始百分比,表示1%

end:50//数据窗口范围的结束百分比,表示50%坐标

}

此代码段是设置滚动条的起始位置

Start：设置滚动条的开始位置，为百分比

End：设置滚动条的结束位置，即滚动条的长度，为百分比

brushSelect：是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。

showDetail：是否显示detail，即拖拽时候显示详细数值信息

showDataShadow：是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势

最终效果