170 lines
3.5 KiB
Vue
170 lines
3.5 KiB
Vue
<template>
|
|
<div ref="echartBox" class="echarts"></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import china from '@/assets/china.json';
|
|
import cq from '@/assets/cq.json';
|
|
import { ref, onMounted, watchEffect, onBeforeUnmount } from 'vue';
|
|
import * as echarts from 'echarts/core';
|
|
import {
|
|
BarChart, // 柱状图
|
|
// 系列类型的定义后缀都为 SeriesOption
|
|
BarSeriesOption,
|
|
LineChart, // 折线图
|
|
LineSeriesOption,
|
|
PieChart, // 饼图
|
|
PieSeriesOption,
|
|
PictorialBarChart,
|
|
MapChart,
|
|
ScatterChart,
|
|
EffectScatterChart,
|
|
LinesChart
|
|
} from 'echarts/charts';
|
|
import {
|
|
// 组件类型的定义后缀都为 ComponentOption
|
|
// 标题
|
|
TitleComponent,
|
|
TitleComponentOption,
|
|
// 提示框
|
|
TooltipComponent,
|
|
TooltipComponentOption,
|
|
// 直角坐标系
|
|
GridComponent,
|
|
GridComponentOption,
|
|
// 图例
|
|
LegendComponent,
|
|
LegendComponentOption,
|
|
// 数据集组件
|
|
DatasetComponent,
|
|
DatasetComponentOption,
|
|
// 内置数据转换器组件 (filter, sort)
|
|
TransformComponent,
|
|
DataZoomComponent,
|
|
DataZoomComponentOption,
|
|
// 极坐标
|
|
PolarComponent,
|
|
PolarComponentOption,
|
|
MarkLineComponentOption,
|
|
MarkLineComponent,
|
|
// MarkPoint
|
|
MarkPointComponent,
|
|
MarkPointComponentOption,
|
|
// VisualMap
|
|
VisualMapComponent,
|
|
VisualMapComponentOption,
|
|
// GeoComponent
|
|
GeoComponent,
|
|
GeoComponentOption
|
|
} from 'echarts/components';
|
|
import { LabelLayout, UniversalTransition } from 'echarts/features';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
import 'echarts-gl';
|
|
|
|
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
|
|
type ECOption = echarts.ComposeOption<
|
|
| BarSeriesOption
|
|
| LineSeriesOption
|
|
| PieSeriesOption
|
|
| TitleComponentOption
|
|
| TooltipComponentOption
|
|
| GridComponentOption
|
|
| DatasetComponentOption
|
|
| LegendComponentOption
|
|
| DataZoomComponentOption
|
|
| PolarComponentOption
|
|
| MarkLineComponentOption
|
|
| MarkPointComponentOption
|
|
| VisualMapComponentOption
|
|
| GeoComponentOption
|
|
>;
|
|
|
|
// 注册必须的组件
|
|
echarts.use([
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
DatasetComponent,
|
|
TransformComponent,
|
|
LegendComponent,
|
|
DataZoomComponent,
|
|
PolarComponent,
|
|
MarkLineComponent,
|
|
MarkPointComponent,
|
|
LabelLayout,
|
|
UniversalTransition,
|
|
CanvasRenderer,
|
|
BarChart,
|
|
LineChart,
|
|
PieChart,
|
|
VisualMapComponent,
|
|
PictorialBarChart,
|
|
GeoComponent,
|
|
MapChart,
|
|
ScatterChart,
|
|
EffectScatterChart,
|
|
LinesChart
|
|
]);
|
|
const props = defineProps({
|
|
option: {
|
|
type: Object,
|
|
default: () => {
|
|
return null;
|
|
}
|
|
}
|
|
});
|
|
const emit = defineEmits(['echartsEvent']);
|
|
const echartBox = ref(null);
|
|
let chart!: echarts.ECharts;
|
|
|
|
const setChart = (option: ECOption): void => {
|
|
if (!props.option || !echartBox.value) {
|
|
return;
|
|
}
|
|
chart.resize();
|
|
chart.setOption(option);
|
|
};
|
|
|
|
const resetChart = (): void => {
|
|
const option = chart.getOption();
|
|
if (!option || !echartBox.value) {
|
|
return;
|
|
}
|
|
chart.resize();
|
|
};
|
|
|
|
onMounted(() => {
|
|
(echarts as any).registerMap('china', { geoJSON: china });
|
|
(echarts as any).registerMap('cq', { geoJSON: cq });
|
|
chart = echarts.init(echartBox.value as any);
|
|
|
|
emit('echartsEvent', chart);
|
|
setChart(props.option);
|
|
// 界面拉伸后重设
|
|
window.addEventListener('resize', () => {
|
|
resetChart();
|
|
});
|
|
});
|
|
|
|
watchEffect(() => {
|
|
if (chart) {
|
|
chart.clear();
|
|
}
|
|
setChart(props.option);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (chart) {
|
|
chart.dispose();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.echarts {
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: all;
|
|
}
|
|
</style>
|