feat: echarts add china geo

packages/effects/plugins/src/echarts/echarts.ts

@@ -3,13 +3,16 @@ import type {
   BarSeriesOption,
   GaugeSeriesOption,
   LineSeriesOption,
+  MapSeriesOption,
 } from 'echarts/charts';
 import type {
   DatasetComponentOption,
+  GeoComponentOption,
   GridComponentOption,
   // 组件类型的定义后缀都为 ComponentOption
   TitleComponentOption,
   TooltipComponentOption,
+  VisualMapComponentOption,
 } from 'echarts/components';
 import type { ComposeOption } from 'echarts/core';
 
@@ -17,12 +20,14 @@ import {
   BarChart,
   GaugeChart,
   LineChart,
+  MapChart,
   PieChart,
   RadarChart,
 } from 'echarts/charts';
 import {
   // 数据集组件
   DatasetComponent,
+  GeoComponent,
   GridComponent,
   LegendComponent,
   TitleComponent,
@@ -30,6 +35,7 @@ import {
   TooltipComponent,
   // 内置数据转换器组件 (filter, sort)
   TransformComponent,
+  VisualMapComponent,
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -40,10 +46,13 @@ export type ECOption = ComposeOption<
   | BarSeriesOption
   | DatasetComponentOption
   | GaugeSeriesOption
+  | GeoComponentOption
   | GridComponentOption
   | LineSeriesOption
+  | MapSeriesOption
   | TitleComponentOption
   | TooltipComponentOption
+  | VisualMapComponentOption
 >;
 
 // 注册必须的组件
@@ -63,6 +72,9 @@ echarts.use([
   CanvasRenderer,
   LegendComponent,
   ToolboxComponent,
+  VisualMapComponent,
+  MapChart,
+  GeoComponent,
 ]);
 
 export default echarts;

packages/effects/plugins/src/echarts/use-echarts.ts

@@ -19,6 +19,7 @@ import {
 } from '@vueuse/core';
 
 import echarts from './echarts';
+import chinaMap from './map/china.json';
 
 type EchartsUIType = typeof EchartsUI | undefined;
 
@@ -32,6 +33,18 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
   const { height, width } = useWindowSize();
   const resizeHandler: () => void = useDebounceFn(resize, 200);
 
+  echarts.registerMap('china', {
+    geoJSON: chinaMap as any,
+    specialAreas: {
+      china: {
+        left: 500,
+        top: 500,
+        width: 1000,
+        height: 1000,
+      },
+    },
+  });
+
   const getOptions = computed((): EChartsOption => {
     if (!isDark.value) {
       return {};