Vue3 + TypeScript + ECharts 移动端封装实践

<template>
  <div id="chart" ref="root" :style="{ height: height, width: width }"></div>
</template>

<script lang="ts">
import {
  defineComponent,
  PropType,
  ref,
  toRefs,
  nextTick,
  onMounted,
  onUnmounted,
  watch,
  shallowRef,
  watchEffect,
} from "vue";

import * as echarts from "echarts/core";
import { EChartsType, EChartsCoreOption } from "echarts/core";
// 引入 SVG 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer } from "echarts/renderers";
import { LabelLayout } from "echarts/features";
// 引入柱图表，图表后缀都为 Chart，我这里选择在组件中引入所有的组件，这样就不需要在每个引用的文件里面再次 import
import { PieChart, BarChart, LineChart } from "echarts/charts"; // 系列类型的定义后缀都为 SeriesOption
// 引入直角坐标系，标题，图例，提示框等组件，组件后缀都为 Component
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  DataZoomComponent,
} from "echarts/components";

// 注册必须的组件 经过测试，一个地方注册，全局都能使用
echarts.use([
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  SVGRenderer,
  GridComponent,
  TitleComponent,
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  DataZoomComponent,
]);

export default defineComponent({
  name: "echarts",
  props: {
    width: {
      type: String,
      default: "100%",
      required: false,
    },
    height: {
      type: String,
      default: "250px",
      required: false,
    },
    option: {
      type: Object as PropType<EChartsCoreOption>,
      required: true,
    },
    autoResize: {
      type: Boolean,
      default: true,
      required: false,
    },
    loading: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  setup(props) {
    const root = ref<any>(null);
    // https://github.com/apache/echarts/issues/14339
    // 否则在动态改变 bar 高度时会报错
    const chart = shallowRef<EChartsType>();

    const { autoResize, loading } = toRefs(props);

    const init = () => {
      if (!root.value) return;
      chart.value = echarts.init(root.value, {}, { renderer: "svg" });

      function commit() {
        if (props.option && chart.value) {
          chart.value.setOption(props.option || {});
        }
      }
      // 兼容 option 默认就有的场景，一般项目场景是异步获取，此时 setOption 通过 watch 执行
      nextTick(() => {
        resize();
        commit();
      });
    };

    // 更新/设置配置
    const setOption = () => {
      nextTick(() => {
        if (!chart.value) {
          init();
          if (!chart.value) return;
        }
        chart.value.clear();
        chart.value.setOption(props.option || {});
      });
    };

    const showLoading = () => {
      chart.value && chart.value.showLoading();
    };

    const hideLoading = () => {
      chart.value && chart.value.hideLoading();
    };

    watchEffect(() => {
      if (loading.value) {
        showLoading();
      } else {
        hideLoading();
      }
    });

    const resize = () => {
      if (chart.value && !chart.value.isDisposed()) {
        // 有时候需要动态更改 chart 高度，这时候需要手动 resize 一下
        if (props.height.endsWith("px")) {
          let height = props.height.slice(0, props.height.length - 2);
          chart.value.resize({
            height: Number(height),
          });
        } else {
          chart.value.resize();
        }
      }
    };

    const cleanup = () => {
      if (chart.value) {
        chart.value.dispose();
        chart.value = undefined;
      }
    };

    watch(
      () => props.height,
      () => {
        nextTick(() => {
          resize();
          setOption();
        });
      }
    );

    watch(
      () => props.option,
      () => {
        if (!chart.value) {
          init();
        } else {
          setOption();
        }
      },
      { deep: true }
    );

    onMounted(() => {
      init();
      if (autoResize.value) {
        window.addEventListener("resize", resize);
      }
    });

    onUnmounted(() => {
      if (autoResize.value) {
        window.removeEventListener("resize", resize);
      }
      cleanup();
    });

    return {
      root,
      chart,
    };
  },
});
</script>