监听ECharts图表dataZoom动态显示图表内容

需求 从接口获取到84条数据，要求一开始全显示的时候不显示inside的label，不管怎么滑动dataZoom的x轴，只要图表上的数据小于20条，就需要显示inside的label，否则不显示

1、第一时间肯定要监听dataZoom的事件，查阅文档之后发现能拿到滑动的start和end值
先拿到end和start的差值，差值根据echarts文档显示是百分比

const zoom_cha = ref(0);
onMounted(() => {const myChart = echarts.init(document.getElementById("mydatazoom"));myChart.on("dataZoom", function (event) {const startValue = event.start;const endValue = event.end;zoom_cha.value = endValue - startValue;});
});

再根据差值大小判断数据条数，具体值是多少需要根据图表的宽度配置自行测试调整
监听差值实时判断是否显示inside的label值(在这里还可以动态的修改别的配置，数据源，tooltip等)
 

const is_show_inside_label = ref(false);
watch(() => zoom_cha.value,() => {//暂定23%大概显示20条数据if (zoom_cha.value < 23) {is_show_inside_label.value = true;} else {is_show_inside_label.value = false;}}
);

最后找到对应要修改的配置项

{name: "最低室温",type: "bar",data: minTempList,itemStyle: {color: "#0098FA",},barGap: "-100%",label: {// 控制显示不显示show: is_show_inside_label.value,position: "inside", textStyle: {fontSize: chartItemSizeStore().labelFontSize,color: "#fff",},},},

大功告成，效果如下