Merge branch 'dev' of https://gitee.com/dodu/go-view into dev

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

@@ -0,0 +1,67 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { MapChinaConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
+
+export const includes = []
+
+export const option = {
+  dataset: dataJson,
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  geo: {
+    show: false,
+    type: 'map',
+    roam: false,
+    map: 'china'
+  },
+  series: [
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 6,
+      zlevel: 1,
+      label: {
+        show: false
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        color: '#00ECC8'
+      },
+      data: []
+    },
+    {
+      name: '地图',
+      type: 'map',
+      map: 'china',
+      zoom: 1, //缩放
+      itemStyle: {
+        // 背景色
+        areaColor: 'rgba(117, 236, 170, 0.3)',
+        emphasis: {
+          areaColor: 'rgba(117, 236, 170, .8)',
+          borderWidth: 1,
+          shadowBlur: 10,
+          shadowColor: '#75ecaa'
+        },
+        color: '#ffffff',
+        borderColor: '#75ecaa',
+        borderWidth: 1
+      },
+      label: {
+        show: true,
+        color: '#ffffff'
+      },
+      data: []
+    }
+  ]
+}
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = MapChinaConfig.key
+  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
+  public chartConfig = MapChinaConfig
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,77 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="地图" :expanded="true">
+      <SettingItemBox name="省份" :alone="true">
+        <SettingItem name="背景颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦颜色（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦阴影（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
+          ></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="边框">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.borderColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number
+            v-model:value="seriesList[1].itemStyle.borderWidth"
+            :min="1"
+            size="small"
+            placeholder="请输入边框大小"
+          ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+    <CollapseItem name="标记" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="大小">
+          <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.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/MapChina/data.json

@@ -0,0 +1,146 @@
+{
+  "point": [
+    {
+      "name": "北京",
+      "value": [116.2, 39.56, 1000]
+    }
+  ],
+  "map": [
+    {
+      "name": "北京市",
+      "value": 100
+    },
+    {
+      "name": "天津市",
+      "value": 99
+    },
+    {
+      "name": "河北省",
+      "value": 98
+    },
+    {
+      "name": "山西省",
+      "value": 97
+    },
+    {
+      "name": "内蒙古自治区",
+      "value": 96
+    },
+    {
+      "name": "辽宁省",
+      "value": 95
+    },
+    {
+      "name": "吉林省",
+      "value": 94
+    },
+    {
+      "name": "黑龙江省",
+      "value": 93
+    },
+    {
+      "name": "上海市",
+      "value": 92
+    },
+    {
+      "name": "江苏省",
+      "value": 91
+    },
+    {
+      "name": "浙江省",
+      "value": 90
+    },
+    {
+      "name": "安徽省",
+      "value": 89
+    },
+    {
+      "name": "福建省",
+      "value": 88
+    },
+    {
+      "name": "江西省",
+      "value": 87
+    },
+    {
+      "name": "山东省",
+      "value": 86
+    },
+    {
+      "name": "河南省",
+      "value": 85
+    },
+    {
+      "name": "湖北省",
+      "value": 84
+    },
+    {
+      "name": "湖南省",
+      "value": 83
+    },
+    {
+      "name": "广东省",
+      "value": 82
+    },
+    {
+      "name": "广西壮族自治区",
+      "value": 81
+    },
+    {
+      "name": "海南省",
+      "value": 80
+    },
+    {
+      "name": "重庆市",
+      "value": 79
+    },
+    {
+      "name": "四川省",
+      "value": 78
+    },
+    {
+      "name": "贵州省",
+      "value": 77
+    },
+    {
+      "name": "云南省",
+      "value": 76
+    },
+    {
+      "name": "西藏自治区",
+      "value": 75
+    },
+    {
+      "name": "陕西省",
+      "value": 74
+    },
+    {
+      "name": "甘肃省",
+      "value": 73
+    },
+    {
+      "name": "青海省",
+      "value": 72
+    },
+    {
+      "name": "宁夏回族自治区",
+      "value": 71
+    },
+    {
+      "name": "新疆维吾尔自治区",
+      "value": 70
+    },
+    {
+      "name": "台湾省",
+      "value": 69
+    },
+    {
+      "name": "香港特别行政区",
+      "value": 68
+    },
+    {
+      "name": "澳门特别行政区",
+      "value": 67
+    }
+  ]
+}

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

@@ -1,14 +1,15 @@
 import image from '@/assets/images/chart/charts/map.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const MapChineConfig: ConfigType = {
-  key: 'MapChine',
-  chartKey: 'VMapChine',
-  conKey: 'VCMapChine',
-  title: '北京地图',
+export const MapChinaConfig: ConfigType = {
+  key: 'MapChina',
+  chartKey: 'VMapChina',
+  conKey: 'VCMapChina',
+  title: '地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

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

@@ -0,0 +1,75 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import config, { includes } from './config'
+import VChart from 'vue-echarts'
+import { use, registerMap } from 'echarts/core'
+import { EffectScatterChart, MapChart } 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 { isPreview } from '@/utils'
+import dataJson from './data.json'
+import mapJson from './map.json'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  MapChart,
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  EffectScatterChart
+])
+
+registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: any) => {
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
+    else if (item.type === 'map' && dataset.point) item.data = dataset.map
+    option.value = props.chartConfig.option
+  })
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>

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

@@ -1,6 +0,0 @@
-<template>
-</template>
-
-<script setup lang="ts">
-
-</script>

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

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    line组件渲染
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -1,3 +1,3 @@
-import { MapChineConfig } from './MapChine/index'
+import { MapChinaConfig } from './MapChina/index'
 
-export default [MapChineConfig]
+export default [MapChinaConfig]

src/packages/index.d.ts

@@ -2,7 +2,7 @@ import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export enum ChartFrameEnum {
-  // echarts 框架
+  // 支持 dataset 的 echarts 框架
   ECHARTS = 'echarts',
   // UI 组件框架
   NAIVE_UI = 'naiveUI',

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -80,7 +80,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChartFrameEnum } from '@/packages/index.d'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
@@ -119,9 +119,9 @@ const filterShow = computed(() => {
   return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
 })
 
-// 是图表类型
+// 是支持 dataset 的图表类型
 const isCharts = computed(() => {
-  return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS
+  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
 })
 
 // 处理映射列表状态结果