import * as echarts from "echarts/core";
// 引入用到的圖表
import { LineChart, type LineSeriesOption} from "echarts/charts";
// 引入提示框、數(shù)據(jù)集等組件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  type TooltipComponentOption,
  type TitleComponentOption,
  type GridComponentOption,
  type LegendComponentOption
} from "echarts/components";
// 引入標(biāo)簽自動(dòng)布局、全局過(guò)渡動(dòng)畫(huà)等特性
import { LabelLayout } from "echarts/features";
// 引入 Canvas 渲染器，必須
import { CanvasRenderer } from "echarts/renderers";

import type { ComposeOption } from "echarts/core";

// 通過(guò) ComposeOption 來(lái)組合出一個(gè)只有必須組件和圖表的 Option 類型
export type ECOption = ComposeOption<
  | LineSeriesOption
  | GridComponentOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
>;

// 注冊(cè)必須的組件
echarts.use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  CanvasRenderer,
  LabelLayout,
  LegendComponent
]);

export default echarts;

<script setup lang="ts">
import { Ref, onMounted, onBeforeUnmount } from "vue";
import { type EChartsType } from "echarts/core";

interface Props {
  option: ECOption;
  theme?: Object | string; // 主題
}

const props = withDefaults(defineProps<Props>(), {
  theme: null
});

const chartRef = ref<Ref<HTMLDivElement>>(null);
const chartInstance = ref<EChartsType>();

// 繪制
const draw = () => {
  if (chartInstance.value) {
    chartInstance.value.setOption(props.option, { notMerge: true });
  }
};

// 初始化
const init = () => {
  if (!chartRef.value) return;

  // 校驗(yàn) Dom 節(jié)點(diǎn)上是否已經(jīng)掛載了 ECharts 實(shí)例，只有未掛載時(shí)才初始化
  chartInstance.value = echarts.getInstanceByDom(chartRef.value);
  if (!chartInstance.value) {
    chartInstance.value = echarts.init(
        chartRef.value,
        props.theme,
        { renderer: "canvas" }
    )；

    draw();
  }
};

watch(props, () => {
  draw();
});

onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  // 容器被銷毀之后，銷毀實(shí)例，避免內(nèi)存泄漏
  chartInstance.value?.dispose();
});
</script>

<template>
  <div id="echart" ref="chartRef" :style="{ width: '100px', height: '120px' }" />
</template>

chartRef：當(dāng)前的 DOM 節(jié)點(diǎn)，即 ECharts 的容器;

chartInstance：當(dāng)前 DOM 節(jié)點(diǎn)掛載的 ECharts 實(shí)例，可用于調(diào)用實(shí)例上的方法，注冊(cè)事件，自適應(yīng)等；

draw：用于繪制 ECharts 圖表，本質(zhì)是調(diào)用實(shí)例的 setOption 方法；

init：初始化，在此獲取 DOM 節(jié)點(diǎn)，掛載實(shí)例，注冊(cè)事件，并調(diào)用 draw 繪制圖表。

Cannot read properties of undefined (reading 'type')

請(qǐng)注意，上述代碼目前還不能正常運(yùn)行，這里會(huì)遇到第一個(gè)坑 —— 圖表無(wú)法顯示，這是 React 中沒(méi)有碰到的：

?出現(xiàn)這種問(wèn)題是因?yàn)椋覀兪褂?ref?接收了?echarts.init?的實(shí)例。這會(huì)導(dǎo)致?chartInstance?被代理成為響應(yīng)式對(duì)象，影響了 ECharts 對(duì)內(nèi)部屬性的訪問(wèn)。Echarts 官方 FAQ?也闡述了該問(wèn)題：

?

chartInstance.value = markRaw(
  echarts.init(
      chartRef.value,
      props.theme,
      { renderer: "canvas" }
  )
);

import { useDebounceFn } from "@vueuse/core";

// 窗口自適應(yīng)并開(kāi)啟過(guò)渡動(dòng)畫(huà)
const resize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize({ animation: { duration: 300 } });
  }
};

// 自適應(yīng)防抖優(yōu)化
const debouncedResize = useDebounceFn(resize, 500, { maxWait: 800 });

onMounted(() => {
  window.addEventListener("resize", debouncedResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", debouncedResize);
});

interface Props {
  option: ECOption;
  theme?: Object | string;
  width: string;
  height: string;
}

<template>
  <div
    id="echart"
    ref="chartRef"
    :style="{ width: props.width, height: props.height }"
  />
</template>

.chart-item {
    flex: 1;
    min-width: 30vh;
    height: 300px;
}

interface Props {
  // 略...
  loading?: boolean; // 受控
}

const props = withDefaults(defineProps<Props>(), {
  theme: null,
  loading: false
});

watch(
  () => props.loading,
  loading => {
    loading
      ? chartInstance.value.showLoading()
      : chartInstance.value.hideLoading();
  }
);

defineExpose({
  getInstance: () => chartInstance.value,
  resize,
  draw
});