1 适用场景
页面空间有限,数据无法完全展示,或者展示内容又被隐藏,或者间隔展示时,可以通过添加dataZoom配置 来优化页面体验
2 解决方案
2.1. 页面直接显示滚动条, 让用户可以拖动展示-柱状图为例
// html部分
<div style="width: 500px; height:500px;" id="echartCon" ref="echartCon"></div>
// js部分
initChart() {
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
dataZoom:[
{
type: "slider", // 在底部
show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
end: 3, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
bottom: 25, // 控制滚动条距离底部的位置;
/**
不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
*/
xAxisIndex: [0]
}
],
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
let myChart = this.$echarts.init(this.$refs.echartCon);
myChart.setOption(option)
},
显示滚动条.png
2.2 页面不展示滚动条, 直接操作鼠标即可拖动数据展示(个人倾向第二种)
// 两种方式只有dataZoom配置项有区别
dataZoom:[
{
type: "inside", // 内嵌入图标中
startValue: 0, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
endValue: 3, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
filterMode: 'filter',
/**
不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
*/
xAxisIndex: [0]
}
],
内嵌滚动条.png
