vue3.0中echarts初始化

最新推荐文章于 2025-05-03 15:15:14 发布

盲人提灯

最新推荐文章于 2025-05-03 15:15:14 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/A_lamp/article/details/124369018

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中创建一个基于ECharts的响应式图表组件。通过使用`@vueuse/core`库的`useDebounceFn`函数处理窗口 resize 事件，确保图表在尺寸变化时能够正确调整大小。同时，组件还支持动态更新图表配置项，以根据外部`loading`状态决定何时重新渲染图表。此外，还提供了获取图表实例的方法，以便于父组件进行交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div
    ref="chartDom"
    :class="className"
    :style="{height:height, width:width}"
  ></div>
</template>
<script>
import { useDebounceFn } from "@vueuse/core";
import echarts from "echarts";
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
export default {
  // echarts dom class名称
  name: "VEcharts",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    loading: {
      type: [Boolean, Number],
      default: false,
    },
    // charts配置项
    option: {
      type: Object,
      required: true,
    },
    // 主题
    model: {
      type: String,
      default: "chalk",
    },
  },
  setup(props, content) {
    const chartDom = ref(null);
    let chart = null;
    const resizeHandler = useDebounceFn(() => {
      if (chart) {
        setTimeout(() => {
          chart.resize();
        }, 100);
      }
    }, 100);
    onMounted(() => {
      setTimeout(() => {
        nextTick(() => {
          window.dispatchEvent(new Event("resize"));
        });
      }, 3000);
      chart = echarts.init(chartDom.value);
      chart.setOption(props.option);
      content.emit("update:echartref", chart);
      window.addEventListener("resize", resizeHandler);
    });
    // 通过 loading 状态判断 刷新渲染时机
    watch(
      () => props.loading,
      (loading) => {
        if (loading === true) return;
        if (typeof loading === "number" && loading <= 0) return;
        setOptionDebounce();
      }
    );
    const setOptionDebounce = useDebounceFn(() => {
      chart.resize();
      chart.setOption(props.option);
    }, 500);
    onUnmounted(() => {
      if (!chart) return;
      window.removeEventListener("resize", resizeHandler);
      chart.dispose();
      chart = null;
    });

    return {
      chartDom,
    };
  },
};
// 父组件引用:
// <VEcharts width='100px' height='100' loading='loading' option='option'></VEcharts>
</script>