feat: 胶囊柱图增加mock数据源

src/api/mock/index.ts

@@ -15,6 +15,7 @@ export const radarUrl = '/mock/radarData'
 export const heatMapUrl = '/mock/heatMapData'
 export const scatterBasicUrl = '/mock/scatterBasic'
 export const mapUrl = '/mock/map'
+export const capsuleUrl = '/mock/capsule'
 export const wordCloudUrl = '/mock/wordCloud'
 export const treemapUrl = '/mock/treemap'
 export const threeEarth01Url = '/mock/threeEarth01Data'
@@ -82,6 +83,11 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.fetchMap
   },
+  {
+    url: capsuleUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchCapsule
+  },
   {
     url: wordCloudUrl,
     method: RequestHttpEnum.GET,

src/api/mock/test.mock.ts

@@ -39,6 +39,22 @@ export default {
       ]
     }
   },
+  // 胶囊图
+  fetchCapsule:{
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: {
+      dimensions: ['name', 'value'],
+      "source": [
+        { "name": "厦门", "value|0-40": 20 },
+        { "name": "南阳", "value|20-60": 40 },
+        { "name": "北京", "value|40-80": 60 },
+        { "name": "上海", "value|60-100": 80 },
+        { "name": "新疆", "value": 100 }
+      ]
+    }
+  },
   // 图表
   fetchMockData: {
     code: 0,

src/packages/components/Charts/Mores/CapsuleChart/config.ts

@@ -8,7 +8,7 @@ import dataJson from './data.json'
 
 
 export const option = {
-  dataSet:dataJson,
+  dataset:dataJson,
   colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
   unit: '',
   itemHeight:10,

src/packages/components/Charts/Mores/CapsuleChart/config.vue

@@ -10,6 +10,7 @@
         </n-space>
       </SettingItem>
       <setting-item name="单位">
+        
         <n-input v-model:value="optionData.unit" size="small"></n-input>
       </setting-item>
       <setting-item name="每块高度(px)">
@@ -39,5 +40,5 @@ const props = defineProps({
   }
 })
 
-console.log(props.optionData)
+console.log("optionData",props.optionData)
 </script>

src/packages/components/Charts/Mores/CapsuleChart/index.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { onMounted, watch, reactive } from 'vue'
+import { onMounted, watch, reactive,PropType } from 'vue'
 import merge from 'lodash/merge'
 import cloneDeep from 'lodash/cloneDeep'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import config from './config'
 
 const props = defineProps({
   chartConfig: {
-    type: Object,
+    type: Object as PropType<config>,
     default: () => ({})
   }
 })
-console.log(props.chartConfig.option)
 type DataProps = {
   name: string | number
   value: string | number
@@ -18,7 +20,7 @@ type DataProps = {
 
 interface StateProps {
   defaultConfig: {
-    dataSet: {
+    dataset: {
       dimensions: Array<string>
       source: Array<DataProps>
     }
@@ -36,7 +38,7 @@ interface StateProps {
 
 const state = reactive<StateProps>({
   defaultConfig: {
-    dataSet: { dimensions: ['name', 'value'], source: [] },
+    dataset: { dimensions: ['name', 'value'], source: [] },
     colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
     unit: '',
     showValue: false,
@@ -52,31 +54,30 @@ const state = reactive<StateProps>({
 watch(
   () => props.chartConfig.option,
   newVal => {
-    console.log(newVal)
+    calcData(newVal)
-    calcData()
   },
   {
     deep: true
   }
 )
 
-function calcData() {
+function calcData(data:any) {
-  mergeConfig()
+  mergeConfig(props.chartConfig.option)
 
   calcCapsuleLengthAndLabelData()
 }
 
-function mergeConfig() {
+function mergeConfig(data:any) {
-  state.mergedConfig = merge(cloneDeep(state.defaultConfig), props.chartConfig.option || {})
+  state.mergedConfig = merge(cloneDeep(state.defaultConfig), data || {})
   console.log('state.mergedConfig', state.mergedConfig)
 }
 
 function calcCapsuleLengthAndLabelData() {
-  const { source } = state.mergedConfig.dataSet
+  const { source } = state.mergedConfig.dataset
   if (!source.length) return
 
   state.capsuleItemHeight = handle(state.mergedConfig.itemHeight)
-  const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataSet.dimensions[1]])
+  const capsuleValue = source.map((item: DataProps) => item[state.mergedConfig.dataset.dimensions[1]])
 
   const maxValue = Math.max(...capsuleValue)
 
@@ -94,7 +95,12 @@ const handle = (val: string | number) => {
   return val + 'px'
 }
 onMounted(() => {
-  calcData()
+  calcData(props.chartConfig.option)
+})
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+    calcData(newData)
 })
 </script>
 <template>
@@ -102,11 +108,11 @@ onMounted(() => {
     <template v-if="state.mergedConfig">
       <div class="label-column">
         <div
-          v-for="item in state.mergedConfig.dataSet.source"
+          v-for="item in state.mergedConfig.dataset.source"
-          :key="item[state.mergedConfig.dataSet.dimensions[0]]"
+          :key="item[state.mergedConfig.dataset.dimensions[0]]"
           :style="{ height: state.capsuleItemHeight, lineHeight: state.capsuleItemHeight }"
         >
-          {{ item[state.mergedConfig.dataSet.dimensions[0]] }}
+          {{ item[state.mergedConfig.dataset.dimensions[0]] }}
         </div>
         <div class="laset">&nbsp;</div>
       </div>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -75,6 +75,7 @@ import {
   heatMapUrl,
   scatterBasicUrl,
   mapUrl,
+  capsuleUrl,
   wordCloudUrl,
   treemapUrl,
   threeEarth01Url
@@ -122,6 +123,9 @@ const apiList = [
   {
     value: `【地图数据】${mapUrl}`
   },
+  {
+    value: `【胶囊柱图】${capsuleUrl}`
+  },
   {
     value: `【词云】${wordCloudUrl}`
   },