From c0e38e64dbab61a37c05a452ea6408183419ddc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 26 Sep 2022 21:18:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E6=A0=91=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mock/index.ts                         |  8 ++-
 src/api/mock/test.mock.ts                     | 10 ++-
 src/api/mock/treemap.json                     | 50 +++++++++++++++
 .../Charts/Mores/Heatmap/config.vue           |  9 +--
 .../components/Charts/Mores/TreeMap/config.ts | 27 ++++++++
 .../Charts/Mores/TreeMap/config.vue           | 11 ++++
 .../components/Charts/Mores/TreeMap/data.json | 50 +++++++++++++++
 .../components/Charts/Mores/TreeMap/index.ts  |  3 +-
 .../components/Charts/Mores/TreeMap/index.vue | 63 ++++++++++++++++---
 .../components/RequestTargetConfig/index.vue  |  6 +-
 10 files changed, 220 insertions(+), 17 deletions(-)
 create mode 100644 src/api/mock/treemap.json
 create mode 100644 src/packages/components/Charts/Mores/TreeMap/config.ts
 create mode 100644 src/packages/components/Charts/Mores/TreeMap/data.json

diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts
index f49791aa..2e56cb1d 100644
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@@ -16,6 +16,7 @@ export const heatMapUrl = '/mock/heatMapData'
 export const scatterBasicUrl = '/mock/scatterBasic'
 export const mapUrl = '/mock/map'
 export const wordCloudUrl = '/mock/wordCloud'
+export const treemapUrl = '/mock/treemap'
 
 const mockObject: MockMethod[] = [
   {
@@ -84,7 +85,12 @@ const mockObject: MockMethod[] = [
     url: wordCloudUrl,
     method: RequestHttpEnum.GET,
     response: () => test.fetchWordCloud
-  }
+  },
+  {
+    url: treemapUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchTreemap
+  },
 ]
 
 export default mockObject
diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts
index d6587f90..d2921f0a 100644
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -1,6 +1,7 @@
 import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
 import mapJson from './map.json'
+import tTreemapJson from './treemap.json'
 
 export default {
   // 单图表
@@ -245,5 +246,12 @@ export default {
       { name: '@name', value: '@integer(10, 8000)' },
       { name: '@name', value: '@integer(10, 8000)' }
     ]
-  }
+  },
+  // 树图
+  fetchTreemap: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: tTreemapJson
+  },
 }
diff --git a/src/api/mock/treemap.json b/src/api/mock/treemap.json
new file mode 100644
index 00000000..1f5d7e32
--- /dev/null
+++ b/src/api/mock/treemap.json
@@ -0,0 +1,50 @@
+[
+  {
+    "name": "@name",
+    "value": "@integer(0, 1000)",
+    "children": [
+      {
+        "name": "@name",
+        "value": "@integer(0, 500)"
+      },
+      {
+        "name": "@name",
+        "value": "@integer(0, 500)"
+      }
+    ]
+  },
+  {
+    "name": "@name",
+    "value": "@integer(0, 1000)",
+    "children": [
+      {
+        "name": "@name",
+        "value": "@integer(0, 00)"
+      },
+      {
+        "name": "@name",
+        "value": "@integer(0, 500)"
+      }
+    ]
+  },
+  {
+    "name": "@name",
+    "value": "@integer(0, 1000)",
+    "children": [
+      {
+        "name": "@name",
+        "value": "@integer(0, 1000)"
+      }
+    ]
+  },
+  {
+    "name": "@name",
+    "value": "@integer(0, 1000)",
+    "children": [
+      {
+        "name": "@name",
+        "value": "@integer(0, 1000)"
+      }
+    ]
+  }
+]
diff --git a/src/packages/components/Charts/Mores/Heatmap/config.vue b/src/packages/components/Charts/Mores/Heatmap/config.vue
index 8f51f12e..88118c5e 100644
--- a/src/packages/components/Charts/Mores/Heatmap/config.vue
+++ b/src/packages/components/Charts/Mores/Heatmap/config.vue
@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <global-setting :optionData="optionData"></global-setting>
-  </div>
+  <global-setting :optionData="optionData"></global-setting>
 </template>
 
 <script setup lang="ts">
-  import { PropType, computed } from 'vue'
+import { PropType, computed } from 'vue'
 import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
@@ -13,12 +11,11 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option & GlobalThemeJsonType>,
-      required: true
+    required: true
   }
 })
 
 const heatMapConfig = computed<typeof option>(() => {
   return props.optionData
 })
-
 </script>
diff --git a/src/packages/components/Charts/Mores/TreeMap/config.ts b/src/packages/components/Charts/Mores/TreeMap/config.ts
new file mode 100644
index 00000000..8bf6a713
--- /dev/null
+++ b/src/packages/components/Charts/Mores/TreeMap/config.ts
@@ -0,0 +1,27 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { TreeMapConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+export const option = {
+  dataset: dataJson,
+  series: [
+    {
+      name: 'treemap',
+      type: 'treemap',
+      leafDepth: 1,
+      roam: false,
+      data: dataJson
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TreeMapConfig.key
+  public chartConfig = cloneDeep(TreeMapConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/Mores/TreeMap/config.vue b/src/packages/components/Charts/Mores/TreeMap/config.vue
index 44a7bc22..c0fa2768 100644
--- a/src/packages/components/Charts/Mores/TreeMap/config.vue
+++ b/src/packages/components/Charts/Mores/TreeMap/config.vue
@@ -1,6 +1,17 @@
 <template>
+  <global-setting :optionData="optionData"></global-setting>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
 </script>
diff --git a/src/packages/components/Charts/Mores/TreeMap/data.json b/src/packages/components/Charts/Mores/TreeMap/data.json
new file mode 100644
index 00000000..8c41663c
--- /dev/null
+++ b/src/packages/components/Charts/Mores/TreeMap/data.json
@@ -0,0 +1,50 @@
+[
+  {
+    "name": "nodeA",
+    "value": 10,
+    "children": [
+      {
+        "name": "nodeAa",
+        "value": 4
+      },
+      {
+        "name": "nodeAb",
+        "value": 6
+      }
+    ]
+  },
+  {
+    "name": "nodeA",
+    "value": 10,
+    "children": [
+      {
+        "name": "nodeAa",
+        "value": 4
+      },
+      {
+        "name": "nodeAb",
+        "value": 6
+      }
+    ]
+  },
+  {
+    "name": "nodeB",
+    "value": 20,
+    "children": [
+      {
+        "name": "nodeba",
+        "value": 20
+      }
+    ]
+  },
+  {
+    "name": "nodeC",
+    "value": 20,
+    "children": [
+      {
+        "name": "nodeca",
+        "value": 20
+      }
+    ]
+  }
+]
diff --git a/src/packages/components/Charts/Mores/TreeMap/index.ts b/src/packages/components/Charts/Mores/TreeMap/index.ts
index 693e6145..5ccc28c5 100644
--- a/src/packages/components/Charts/Mores/TreeMap/index.ts
+++ b/src/packages/components/Charts/Mores/TreeMap/index.ts
@@ -1,5 +1,5 @@
 import image from '@/assets/images/chart/charts/tree_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 TreeMapConfig: ConfigType = {
@@ -10,5 +10,6 @@ export const TreeMapConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }
diff --git a/src/packages/components/Charts/Mores/TreeMap/index.vue b/src/packages/components/Charts/Mores/TreeMap/index.vue
index 31fe77be..de2516ea 100644
--- a/src/packages/components/Charts/Mores/TreeMap/index.vue
+++ b/src/packages/components/Charts/Mores/TreeMap/index.vue
@@ -1,13 +1,62 @@
 <template>
-  <div>
-    水波
-  </div>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { TreemapChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+use([CanvasRenderer, TreemapChart])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset) {
+    props.chartConfig.option.series[0].data = dataset
+    vChartRef.value?.setOption(props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
index 5ff6c6ff..4b454a3a 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
@@ -75,7 +75,8 @@ import {
   heatMapUrl,
   scatterBasicUrl,
   mapUrl,
-  wordCloudUrl
+  wordCloudUrl,
+  treemapUrl
 } from '@/api/mock'
 
 const { HelpOutlineIcon } = icon.ionicons5
@@ -123,6 +124,9 @@ const apiList = [
   {
     value: `【词云】${wordCloudUrl}`
   },
+  {
+    value: `【树图】${treemapUrl}`
+  },
 ]
 </script>