echarts 图表自己动（Echarts滚动条去掉趋势样式）

echarts 图表自己动（Echarts滚动条去掉趋势样式）data: ['周一' '周二' '周三' '周四' '周五' '周六' '周日']type: 'category'var myChart = echarts.init(document.getElementById('div1'));var option = {xAxis: {

前言

在实际开发过程中大家很有可能会用到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 组件中显示数据阴影。数据阴影可以简单地反应数据走势

最终效果