echart 滚动条 echarts缩放滚动条 _生活百科

文章插图
前言
在实际开发过程中大家很有可能会用到echarts图表统计，对于数据量比较多的情况下使用echatrs滚动条也是常有的事，这次我们就用到了，而且还是需要对滚动条进行设置，不是echarts默认的滚动条样式，就把使用到的过程记录一下；
引用
如果要使用echarts需要对它进行引用
<script type="text/javascript"src="https://www.08ts.cn/echarts-5.2.1/dist/echarts.js"></script>
HTML
<div id="div1"></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 区域你可以按住鼠标左键后框选出选中部分。