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

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

1、第一时间肯定要监听dataZoom的事件,查阅文档之后发现能拿到滑动的start和end值

先拿到end和start的差值,差值根据echarts文档显示是百分比

javascript 复制代码
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等)

javascript 复制代码
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;
    }
  }
);

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

javascript 复制代码
{
        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",
          },
        },
      },

大功告成,效果如下

相关推荐
伍哥的传说27 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783828 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊40 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为