152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<template>
|
|
<div ref="myChart" :style="{ width: width, height: height }"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, defineProps, defineEmits, watch, onUnmounted } from 'vue'
|
|
import * as echarts from "echarts";
|
|
import echartTheme from "@/assets/echarts_theme.json";
|
|
|
|
// 定义所有可能的事件类型
|
|
const emit = defineEmits([
|
|
'chart-click',
|
|
'chart-dblclick',
|
|
'chart-mouseover',
|
|
'chart-mouseout',
|
|
'chart-legendselectchanged',
|
|
'chart-datazoom',
|
|
'chart-dataviewchanged',
|
|
'chart-restore',
|
|
'chart-finished'
|
|
])
|
|
|
|
const props = defineProps({
|
|
option: { type: Object, default: () => ({}) },
|
|
theme: { type: String, default: "essos" },
|
|
width: { type: String, default: "100%" },
|
|
height: { type: String, default: "300px" },
|
|
// 支持自定义事件类型
|
|
events: {
|
|
type: Array,
|
|
default: () => ['click']
|
|
},
|
|
// 是否开启自动调整大小
|
|
autoResize: { type: Boolean, default: true }
|
|
})
|
|
|
|
const myChart = ref(null)
|
|
let myChartInstance = null;
|
|
|
|
// 事件映射 - 将 ECharts 事件名映射到 emit 事件名
|
|
const eventMap = {
|
|
'click': 'chart-click',
|
|
'dblclick': 'chart-dblclick',
|
|
'mouseover': 'chart-mouseover',
|
|
'mouseout': 'chart-mouseout',
|
|
'legendselectchanged': 'chart-legendselectchanged',
|
|
'datazoom': 'chart-datazoom',
|
|
'dataviewchanged': 'chart-dataviewchanged',
|
|
'restore': 'chart-restore'
|
|
}
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
if (props.theme in echartTheme) {
|
|
echarts.registerTheme(props.theme, echartTheme[props.theme]);
|
|
} else {
|
|
console.warn("echarts未找到该主题:", props.theme)
|
|
}
|
|
|
|
myChartInstance = echarts.init(myChart.value, props.theme);
|
|
myChartInstance.setOption(props.option);
|
|
|
|
// 注册事件监听
|
|
registerEvents();
|
|
|
|
// 自动调整大小
|
|
if (props.autoResize) {
|
|
window.addEventListener("resize", handleResize);
|
|
}
|
|
}
|
|
|
|
// 注册事件
|
|
const registerEvents = () => {
|
|
props.events.forEach(eventName => {
|
|
if (eventMap[eventName]) {
|
|
myChartInstance.on(eventName, (params) => {
|
|
emit(eventMap[eventName], params);
|
|
});
|
|
} else {
|
|
console.warn(`不支持的事件类型: ${eventName}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 调整大小处理
|
|
const handleResize = () => {
|
|
myChartInstance?.resize();
|
|
}
|
|
|
|
// 清理事件
|
|
const cleanup = () => {
|
|
if (myChartInstance) {
|
|
// 移除所有事件监听
|
|
props.events.forEach(eventName => {
|
|
myChartInstance.off(eventName);
|
|
});
|
|
|
|
if (props.autoResize) {
|
|
window.removeEventListener("resize", handleResize);
|
|
}
|
|
|
|
myChartInstance.dispose();
|
|
myChartInstance = null;
|
|
}
|
|
}
|
|
|
|
onMounted(initChart)
|
|
|
|
// 监听 option 变化
|
|
watch(() => props.option, (newOption) => {
|
|
if (myChartInstance) {
|
|
myChartInstance.setOption(newOption);
|
|
}
|
|
}, { deep: true })
|
|
|
|
// 监听 events 变化，重新注册事件
|
|
watch(() => props.events, (newEvents, oldEvents) => {
|
|
if (myChartInstance) {
|
|
// 移除旧事件
|
|
oldEvents.forEach(eventName => {
|
|
myChartInstance.off(eventName);
|
|
});
|
|
// 注册新事件
|
|
newEvents.forEach(eventName => {
|
|
if (eventMap[eventName]) {
|
|
myChartInstance.on(eventName, (params) => {
|
|
emit(eventMap[eventName], params);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, { deep: true })
|
|
|
|
// 监听 theme 变化
|
|
watch(() => props.theme, (newTheme) => {
|
|
if (myChartInstance) {
|
|
cleanup();
|
|
initChart();
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
cleanup();
|
|
})
|
|
|
|
// 暴露实例给父组件
|
|
defineExpose({
|
|
getInstance: () => myChartInstance,
|
|
resize: handleResize,
|
|
dispose: cleanup
|
|
})
|
|
</script> |