vue3 封装echarts

劉豐

2022-04-24 / 0 评论 / 0 点赞 / 1,803 阅读 / 632 字 / 正在检测是否收录...

04/24

温馨提示：

本文最后更新于 2022-04-25，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

<template>
  <div class="Chart" ref="container"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  options: {
    type: Object,
    default: () => {},
    required: true
  }
});

const container = ref(null);
let chart;
onMounted(() => {
  // 初始化图表
  chart = echarts.init(container.value);
  chart.setOption(props.options);
});
// 监听props.options 更新图表
watch(
  () => props.options,
  newOptions => {
    chart.setOption(newOptions);
  },
  { deep: true }
);

onBeforeUnmount(() => {
  //销毁图表
  if (!chart) {
    return;
  }
  chart.dispose();
  chart = null;
});
</script>