使用 shallowRef 接收 Echarts 对象
const chart = shallowRef(null);
chart.value = Echarts.init(document.getElementById(domId), theme, initOption);需要在组件销毁时同步销毁图表对象
onUnmounted(() => {
chart.value.dispose();
});useChart.js
import { onUnmounted, shallowRef } from 'vue';
import Echarts from '@/utils/echarts';
import * as _throttle from 'lodash/throttle';
export default function ({ domId, theme = 'antv', initOption, chartSchema, resizeWaitTime = 100 }) {
let throttledChartResize = null;
const chart = shallowRef(null);
let isChartFirstLoaded = false;
const initChart = () => {
if (!isChartFirstLoaded) {
chart.value = Echarts.init(document.getElementById(domId), theme, initOption);
chartSchema && chart.value.setOption(chartSchema);
throttledChartResize = _throttle(chart.value.resize, resizeWaitTime);
window.addEventListener('resize', throttledChartResize);
}
};
onUnmounted(() => {
if (throttledChartResize) window.removeEventListener('resize', throttledChartResize);
chart.value.dispose();
});
return { chart, initChart };
}使用：
const { chart, initChart } = useChart({
domId: 'chart_container',
chartSchema: {
legend: {},
tooltip: {
trigger: 'item',
},
series: [
{
name: '来源',
type: 'pie',
radius: ['20%', '60%'],
roseType: 'area',
},
],
},
});
onMounted(() => {
initChart();
});