feat: base 添加xtChart
This commit is contained in:
parent
6a83c2faa2
commit
c0a15fb752
|
|
@ -0,0 +1,397 @@
|
||||||
|
{
|
||||||
|
"essos": {
|
||||||
|
"color": [
|
||||||
|
"#893448",
|
||||||
|
"#d95850",
|
||||||
|
"#eb8146",
|
||||||
|
"#ffb248",
|
||||||
|
"#f2d643",
|
||||||
|
"#ebdba4"
|
||||||
|
],
|
||||||
|
"backgroundColor": "rgba(242,234,191,0.15)",
|
||||||
|
"textStyle": { },
|
||||||
|
"title": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"subtextStyle": {
|
||||||
|
"color": "#d95850"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": "2"
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"radar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": "2"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": "2"
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true
|
||||||
|
},
|
||||||
|
"bar": {
|
||||||
|
"itemStyle": {
|
||||||
|
"barBorderWidth": 0,
|
||||||
|
"barBorderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pie": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scatter": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"boxplot": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"parallel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sankey": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"funnel": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"gauge": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"candlestick": {
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#eb8146",
|
||||||
|
"color0": "transparent",
|
||||||
|
"borderColor": "#d95850",
|
||||||
|
"borderColor0": "#58c470",
|
||||||
|
"borderWidth": "2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"graph": {
|
||||||
|
"itemStyle": {
|
||||||
|
"borderWidth": 0,
|
||||||
|
"borderColor": "#ccc"
|
||||||
|
},
|
||||||
|
"lineStyle": {
|
||||||
|
"width": 1,
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
},
|
||||||
|
"symbolSize": "6",
|
||||||
|
"symbol": "emptyCircle",
|
||||||
|
"smooth": true,
|
||||||
|
"color": [
|
||||||
|
"#893448",
|
||||||
|
"#d95850",
|
||||||
|
"#eb8146",
|
||||||
|
"#ffb248",
|
||||||
|
"#f2d643",
|
||||||
|
"#ebdba4"
|
||||||
|
],
|
||||||
|
"label": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"map": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#999999",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#ffb248",
|
||||||
|
"borderColor": "#eb8146",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#f3f3f3",
|
||||||
|
"borderColor": "#999999",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"areaColor": "#ffb248",
|
||||||
|
"borderColor": "#eb8146",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"categoryAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#999999"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#e6e6e6"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"valueAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#999999"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#e6e6e6"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"logAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#999999"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#e6e6e6"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeAxis": {
|
||||||
|
"axisLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#aaaaaa"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisTick": {
|
||||||
|
"show": false,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"axisLabel": {
|
||||||
|
"show": true,
|
||||||
|
"color": "#999999"
|
||||||
|
},
|
||||||
|
"splitLine": {
|
||||||
|
"show": true,
|
||||||
|
"lineStyle": {
|
||||||
|
"color": [
|
||||||
|
"#e6e6e6"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"splitArea": {
|
||||||
|
"show": false,
|
||||||
|
"areaStyle": {
|
||||||
|
"color": [
|
||||||
|
"rgba(250,250,250,0.05)",
|
||||||
|
"rgba(200,200,200,0.02)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"toolbox": {
|
||||||
|
"iconStyle": {
|
||||||
|
"borderColor": "#999999"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"iconStyle": {
|
||||||
|
"borderColor": "#666666"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"legend": {
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#999999"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tooltip": {
|
||||||
|
"axisPointer": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"crossStyle": {
|
||||||
|
"color": "#cccccc",
|
||||||
|
"width": 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"timeline": {
|
||||||
|
"lineStyle": {
|
||||||
|
"color": "#893448",
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#893448",
|
||||||
|
"borderWidth": 1
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"color": "#893448",
|
||||||
|
"borderColor": "#893448",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"checkpointStyle": {
|
||||||
|
"color": "#eb8146",
|
||||||
|
"borderColor": "#ffb248"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"itemStyle": {
|
||||||
|
"color": "#ffb248"
|
||||||
|
},
|
||||||
|
"controlStyle": {
|
||||||
|
"color": "#893448",
|
||||||
|
"borderColor": "#893448",
|
||||||
|
"borderWidth": 0.5
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"color": "#893448"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"visualMap": {
|
||||||
|
"color": [
|
||||||
|
"#893448",
|
||||||
|
"#d95850",
|
||||||
|
"#eb8146",
|
||||||
|
"#ffb248",
|
||||||
|
"#f2d643",
|
||||||
|
"rgb(247,238,173)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dataZoom": {
|
||||||
|
"backgroundColor": "rgba(255,255,255,0)",
|
||||||
|
"dataBackgroundColor": "rgba(255,178,72,0.5)",
|
||||||
|
"fillerColor": "rgba(255,178,72,0.15)",
|
||||||
|
"handleColor": "#ffb248",
|
||||||
|
"handleSize": "100%",
|
||||||
|
"textStyle": {
|
||||||
|
"color": "#333"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"markPoint": {
|
||||||
|
"label": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
},
|
||||||
|
"emphasis": {
|
||||||
|
"label": {
|
||||||
|
"color": "#ffffff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,152 @@
|
||||||
|
<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>
|
||||||
Loading…
Reference in New Issue