echarts图表动态监听dataZoom滑动，控制柱条的宽度以及数值的显示隐藏

当数值过多时，显示所有柱条看着会很凌乱且文字会挤在一起，于是就需要监听datazoom的滑动，拿到对应的阈值后做出相应的配置。
“dataZoom” 事件通常用于响应用户对图表进行数据缩放的操作。
这里是datazoom官网api地址：点击跳转至官网文档的datazoom介绍
初始时状态如下图：
在这里插入图片描述
滑动x轴至设定范围内时：

监听datazoom

myChart为图表元素，在 “dataZoom” 事件上绑定了一个回调函数，当用户在图表上使用数据缩放时，这个回调函数会被触发。

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);myChart.on("dataZoom", function (params) {
})

params值

这里可以获取到当前datazoom的开始位置(start)和结束位置(end)
在这里插入图片描述

获取图表的option

myChart.getOption() 和 myChart.setOption(newoption) 是 Echarts 中常用的两个方法，它们分别用于获取当前图表的配置选项和设置新的配置选项。

myChart.getOption():
作用：该方法用于获取当前图表的配置选项对象。可以在需要获取当前配置选项时调用该方法，例如在事件回调中根据当前配置进行进一步处理或修改。
返回值：返回一个包含当前图表配置的 JavaScript 对象，可以包含图表类型、数据系列、样式设置等信息。

以下为myChart.getOption()返回的值，若有其他需要控制的，都可以举一反三，根据这些值的位置对其进行设置，不局限于本文的控制柱条的宽度以及数值的显示隐藏。
在这里插入图片描述

myChart.setOption(newoption):
作用：该方法用于设置新的配置选项对象，即更新图表的显示内容和样式。通过设置新的配置选项，可以动态改变图表的展示效果，包括数据、样式、主题等。
参数：接受一个新的配置选项对象作为参数，用于更新图表的配置。返回值：并不返回特定的数值，但会触发图表的重新渲染以反映新的配置选项。

控制柱条宽度及数值的显示与隐藏

这里通过循环图表的option配置中的series数组，设置其数值文本是否显示，以及柱条宽度
series.label.show 和 series.barWidth

// 在用户使用数据缩放时触发该事件
myChart.on('dataZoom', function (params) {// 输出参数信息到控制台console.log('params', params);// 获取当前图表的配置选项var newoption = myChart.getOption();// 获取数据缩放的起始位置和结束位置var dataZoomStart = params.start;var dataZoomEnd = params.end;// 根据数据缩放的范围对图表进行调整if (dataZoomEnd - dataZoomStart > 80) {// 如果数据缩放范围大于80，设置柱状图的标签不显示并设置柱状宽度为5newoption.series.forEach(function (series) {series.label.show = false;//隐藏顶部数值series.barWidth = 5;//柱条宽度为5});} else {// 如果数据缩放范围小于等于80，设置柱状图的标签显示并设置柱状宽度为'auto'newoption.series.forEach(function (series) {series.label.show = true;//显示顶部数值series.barWidth = 'auto';//柱条宽度自适应});}// 根据调整后的配置选项更新图表myChart.setOption(newoption);
});// 设置图表的初始配置选项
option && myChart.setOption(option);

全部代码(echarts示例可直接粘贴使用)

let colors = [{color: {botom: "rgba(253, 234, 60,0)",top: "rgba(253, 234, 60,1)",},},{color: {botom: "rgba(252, 140, 27,0)",top: "rgba(252, 140, 27,1)",},},{color: {botom: "rgba(100, 218, 217,0)",top: "rgba(100, 218, 217,1)",},},
];
var shadowColors = [];
colors.forEach((item) => {var colorobj = {type: "linear",x: 0,y: 1,x2: 0,y2: 0,colorStops: [{offset: 0,color: item.color.botom, // 0% 处的颜色},{offset: 1,color: item.color.top, // 100% 处的颜色},],};shadowColors.push(colorobj);
});
console.log('shadowColors',shadowColors);
option = {color: shadowColors,dataZoom: [{type: "slider", // 设置为滑动条show: true, // 显示滑动条start: 0, // 滑动条起始位置end: 40, // 滑动条结束位置bottom: 10, // 滑动条距离底部的距离textStyle: {color: "#fff",},backgroundColor: "#acb7c3", // 设置背景颜色handleStyle: {color: "#2a82e4", // 设置左右两边的可滑动收缩竖线颜色},},],tooltip: {trigger: "axis",axisPointer: {type: "shadow", // 显示阴影指示器},formatter: function (indexs) {var data = [];indexs.forEach((item) => {data.push({seriesName: item.seriesName,value: item.value,});});var content = "";data.forEach((item) => {content += item.seriesName + ": " + item.value + "<br>";});return content;},},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],type: 'bar',name:'name1',barWidth: 10,barGap: 1, //柱子之间间距label: {show: true,position: "top",color: "white",rotate: 60,textStyle: {color: colors[0].color.top},},},{data: [110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160],type: 'bar',name:'name2',barWidth: 10,barGap: 1, //柱子之间间距label: {show: true,position: "top",color: "white",rotate: 60,textStyle: {color: colors[1].color.top},},},{data: [20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30],type: 'bar',name:'name3',barWidth: 10,barGap: 1, //柱子之间间距label: {show: true,position: "top",color: "white",rotate: 60,textStyle: {color: colors[2].color.top},},},]
};
myChart.on("dataZoom", function (params) {var newoption = myChart.getOption();var dataZoomStart = params.start;var dataZoomEnd = params.end;if (dataZoomEnd - dataZoomStart > 70) {newoption.series.forEach(function (series) {series.label.show = false;});}else {newoption.series.forEach(function (series) {series.label.show = true;});}myChart.setOption(newoption);
})