vue3.0中echarts初始化

<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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值