本文详细介绍了Echarts中dataZoom组件的使用，包括slider和inside两种类型，用于X轴和Y轴的数据窗口缩放，以及相关的配置参数如start、end等，以实现数据可视化的交互功能。通过示例代码展示了如何在柱状图中应用dataZoom，以动态调整显示数据的范围。
看实例：
data zoom:
有inslide和slide两种dataZoom，也分X,Y轴
dataZoom:[
{
type:"slider",//slider表示有滑动块的，
show:true,
xAxisIndex:[0],//表示x轴折叠
start:1,//数据窗口范围的起始百分比,表示1%
end:20//数据窗口范围的结束百分比,表示20%坐标
},
{
type:"inside",//
yAxisIndex:[0],//表示y轴折叠
start:1,
end:35
},
]
实例：
// 数据请求
getPlace() {
this.$http.get("/api/stayInfo/PersonNum/ForSevenDays").then((res) => {
if (res.data.status === 200) {
//console.log(res.data.data);
let placeData = res.data.data;
for (let x = 0; x < placeData.length; x++) {
this.placeLocationName.push(placeData[x].locationName);
this.placeLocationNum.push(placeData[x].num);
}
this.getPlaceCharts();
}
});
},
// 柱状图
getPlaceCharts() {
let myChart = this.$echarts.init(stayPlaceChar);
myChart.setOption({
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "3%",
right: "4%",
bottom: "15%",
top: "10%",
containLabel: true,
},
// 数据量较多时 可采用X Y轴进行缩放
dataZoom: [
{
type: "slider", //slider表示有滑动块的，
roam: false,
show: true,
xAxisIndex: [0], //表示x轴折叠
start: 1, //数据窗口范围的起始百分比,表示1%
end: 20, //数据窗口范围的结束百分比,表示20%坐标
},
],
xAxis: [
{
type: "category",
data: this.placeLocationName,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: "#ccc",
},
},
axisLabel: {
textStyle: {
color: "#697085", //坐标值得具体的颜色
},
},
},
],
yAxis: [
{
type: "value",
name: "单位：次",
nameTextStyle: {
color: "#697085",
fontSize: 12,
},
minInterval: 1,
axisLine: {
lineStyle: {
color: "#ccc",
},
},
axisLabel: {
textStyle: {
color: "#697085", //坐标值得具体的颜色
},
},
},
],
series: [
{
name: "直接访问",
type: "bar",
barWidth: "20%",
label: {
normal: {
show: true,
// position: "right",
},
},
data: this.placeLocationNum,
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = [
"#9F77EA",
"#37D5D7",
"#E47434",
"#F74D68",
"#E9CA41",
"#30D38A",
];
return colorList[params.dataIndex];
},
},
},
},
],
});
},
相关属性设置：
dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
];
扫一扫
2031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
