echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
echarts实现横向和纵向滚动条、dataZoom
前言
使用
echarts会遇到这种情况，以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，echarts其实已经为提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。
1、横向滚动条
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
]
2、纵向滚动条
dataZoom: [
{
// 设置滚动条的隐藏或显示
show: true,
// 设置类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// 控制哪个轴，如果是number表示控制一个轴，
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 滚动条高度
width: 8,
// 滚动条显示位置
height: "80%",
// 距离右边
right: 3,
// 控制手柄的尺寸
handleSize: 0,
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 组件离容器上侧的距离
// 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
top: "middle",
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 控制哪个轴，如果是number表示控制一个轴，
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标移动能否触发平移
moveOnMouseMove: true,
// 鼠标滚轮能否触发平移
moveOnMouseWheel: true,
},
]
echart 滚动条设置
前言：echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
dataZoom配置官网链接：https://echarts.apache.org/zh/option.html#dataZoom
// 定义数据dataZoom相关
data() {
return {
MyEcharts: '', //echarts实例
objdata: {},
titleFontSize: 12,
txtFontSize: 10,
dataZoomEnd:0,//计算可视宽度（dataZoom)
dataZoomNum:4//定义可视项目个数（dataZoom)
}
},
methods: {
drawBar() {
let _this = this
//重点1：计算可视视图所占比例，这里this.dataZoomNum设置了显示4个在X轴上，
//比如X轴数据一共有8个（只显示前面4个）100/8*4=50（100/X轴数据总个数*自定义显示个数）
this.dataZoomEnd=Math.floor(100/_this.bardatas.seriesData.length)*_this.dataZoomNum
window.addEventListener('resize', function() {
let cavansWid = document.getElementById(_this.id).clientWidth
let windowWid = document.documentElement.getBoundingClientRect().width
// 判断全屏放大时候需要显示所有，所以设置this.dataZoomEnd = 100
if (cavansWid == windowWid) {
_this.dataZoomEnd = 100
_this.refreshFn()
} else {//判断缩回小屏幕
_this.dataZoomEnd = Math.floor(100/_this.bardatas.seriesData.length)*_this.dataZoomNum
_this.refreshFn()
}
}) //当窗口变化时随浏览器大小而改变
_this.refreshFn()
},
refreshFn() {
let _this = this
_this.MyEcharts = _this.$echarts.init(document.getElementById(_this.id))
_this.MyEcharts.clear() //适用于大数据量的切换时图表绘制错误,先清空在重绘
_this.MyEcharts.resize()
_this.objdata = {
backgroundColor: 'rgba(7,24,105,.8)',
title: {
text: _this.title,
textStyle: {
align: 'left',
color: '#fff',
fontSize: _this.titleFontSize,
fontWeight: 600
},
top: '3%',
bottom: '10%',
left: '2%'
},
......
}
//重点2 设置滚动条的样式
let dataZoom = {
start: 0, //默认为0
end: _this.dataZoomEnd, // 默认为100（重点）
type: 'slider',
show: true,
borderColor: 'transparent',
borderCap: 'round',
xAxisIndex: [0],
height: 6, //组件高度
left: 20, //左边的距离
right: 20, //右边的距离
bottom: 4, //右边的距离
fillerColor: 'rgba(27,90,169,1)',
handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',// 画一个圆形
handleSize: '100%',
handleStyle: {
color: 'rgba(27,90,169,1)',
borderWidth: 0
},
backgroundColor: 'rgba(37, 46, 100, 0.8)', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: 'filter'
}
// 重点3：X轴数据量超过4个则显示滚动条，否则不显示
if(_this.bardatas.seriesData.length>4){
_this.objdata.dataZoom = dataZoom
}
_this.MyEcharts.setOption(_this.objdata, true)
}
},
效果图，有滚动条和无滚动条
作者：jinya2437
链接：https://www.jianshu.com/p/3efaebebb0c9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
转载于：https://blog.csdn.net/weixin_51157081/article/details/130095628