!34 地图控件

Merge pull request !34 from jiangcheng/dev-jc

src/packages/components/Charts/Maps/MapChine/config.ts

@@ -0,0 +1,137 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { MapChineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './points.json'
+export const includes = ['geo']
+
+export const option = {
+  dataset: dataJson,
+  geo: {
+    show: true,
+    type: 'map',
+    aspectScale: 1, // 横向拉伸
+    roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
+    map: 'china',
+    label: {
+      show: true,
+      normal: {
+        show: true, // 默认地图文字字号和字体颜色
+        fontSize: 12,
+        color: '#ffffff'
+      },
+      emphasis: {
+        show: true,
+        fontSize: 10, // 选中地图文字字号和字体颜色
+        color: '#CFCFCF'
+      }
+    },
+    itemStyle: {
+      normal: {
+        areaColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0.5,
+          y2: 0.3,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        }, //地图本身的颜色
+        borderColor: 'rgba(147, 235, 248, 1)', //省份边框颜色
+        borderWidth: 1 // 省份边框宽度
+      },
+      emphasis: {
+        areaColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        }, //地图本身的颜色
+        borderColor: 'rgba(147, 235, 248, 0.8)', //省份边框颜色
+        borderWidth: 1 // 省份边框宽度
+      }
+    },
+    textFixed: {
+      Alaska: [20, -20]
+    }
+  },
+  series: [
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 12,
+      // data: [
+      //   {
+      //     // 数据映射
+      //     name: '苏尼特左旗', // 对应地图中的name
+      //     value: [113.653412, 43.854108, 4500] // value值,前面两个是X轴,Y轴坐标, 后面的数据自定义,可以设置多个
+      //   },
+      //   {
+      //     name: '二连浩特市',
+      //     value: [111.97981, 43.652895, 3560]
+      //   },
+      //   {
+      //     name: '阿巴嘎旗',
+      //     value: [114.970618, 44.022728, 3300]
+      //   },
+      //   {
+      //     name: '苏尼特右旗',
+      //     value: [112.65539, 42.746662, 2800]
+      //   },
+      //   {
+      //     name: '正镶白旗',
+      //     value: [115.031423, 42.286807, 2100]
+      //   },
+      //   {
+      //     name: '太仆寺旗',
+      //     value: [115.28728, 41.895199, 1900]
+      //   }
+      // ],
+      label: {
+        normal: {
+          show: false
+        },
+        emphasis: {
+          show: false
+        }
+      },
+      itemStyle: {
+        normal: {
+          shadowBlur: 10,
+          color: '#00ECC8'
+        },
+        emphasis: {
+          borderColor: '#fff',
+          borderWidth: 1
+        }
+      }
+    }
+  ]
+}
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = MapChineConfig.key
+  public chartConfig = MapChineConfig
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Maps/MapChine/config.vue

@@ -1,6 +1,51 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem
+      name="标记样式"
+      :expanded="false"
+      v-for="(item, index) in seriesList"
+      :key="index"
+    >
+      <SettingItemBox name="标记">
+        <SettingItem name="标记大小">
+          <n-input-number
+            v-model:value="item.symbolSize"
+            size="small"
+            :min="1"
+          ></n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="item.itemStyle.normal.color"
+          ></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from "vue";
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
+import { lineConf } from "@/packages/chartConfiguration/echarts/index";
+import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
+import { GlobalSetting } from "@/components/Pages/ChartItemSetting";
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true,
+  },
+});
+const seriesList = computed(() => {
+  return props.optionData.series;
+});
 </script>

src/packages/components/Charts/Maps/MapChine/index.ts

@@ -6,7 +6,7 @@ export const MapChineConfig: ConfigType = {
   key: 'MapChine',
   chartKey: 'VMapChine',
   conKey: 'VCMapChine',
-  title: '北京地图',
+  title: '地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,

src/packages/components/Charts/Maps/MapChine/index.vue

@@ -1,13 +1,75 @@
 <template>
-  <div>
-    line组件渲染
-  </div>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+  >
+  </v-chart>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed, reactive, watch } from "vue";
+import config, { includes } from "./config";
+import VChart from "vue-echarts";
+import { use, registerMap } from "echarts/core";
+import { EffectScatterChart } from "echarts/charts";
+import { CanvasRenderer } from "echarts/renderers";
+import { useChartDataFetch } from "@/hooks";
+import { mergeTheme } from "@/packages/public/chart";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import dataJson from "./data.json";
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+} from "echarts/components";
+import { isPreview } from "@/utils";
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true,
+  },
+  themeColor: {
+    type: Object,
+    required: true,
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true,
+  },
+});
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  EffectScatterChart,
+]);
 
+registerMap("china", { geoJSON: (dataJson as unknown) as any, specialAreas: {} });
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes),
+});
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData) => {
+    props.chartConfig.option.series[0].data = newData.data;
+    option.value = props.chartConfig.option;
+  },
+  {
+    immediate: true,
+  }
+);
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/packages/components/Charts/Maps/MapChine/points.json

@@ -0,0 +1,26 @@
+{
+    "data": [{
+            "name": "苏尼特左旗",
+            "value": [113.653412, 43.854108, 4500]
+        }, {
+            "name": "二连浩特市",
+            "value": [111.97981, 43.652895, 3560]
+        },
+        {
+            "name": "阿巴嘎旗",
+            "value": [114.970618, 44.022728, 3300]
+        },
+        {
+            "name": "苏尼特右旗",
+            "value": [112.65539, 42.746662, 2800]
+        },
+        {
+            "name": "正镶白旗",
+            "value": [115.031423, 42.286807, 2100]
+        },
+        {
+            "name": "太仆寺旗",
+            "value": [115.28728, 41.895199, 1900]
+        }
+    ]
+}