feat: 修改柱状图 & 折线图文件位置和名称，格式化内容

src/packages/components/Charts/Bars/BarLine/config.ts

@@ -0,0 +1,75 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+  type: 'bar',
+  barWidth: 15,
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  itemStyle: {
+    color: null,
+    borderRadius: 2
+  }
+}
+
+export const lineSeriesItem = {
+  type: 'line',
+  symbol: 'circle',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: '#FFE47A',
+    borderWidth: 1
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      show: true,
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: null
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = BarLineConfig.key
+  public chartConfig = cloneDeep(BarLineConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Bars/BarLine/config.vue

@@ -1,43 +1,48 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`${item.type=='bar' ? '柱状图' : '折线图'}`" :expanded="true">
-    <SettingItemBox name="图形" v-if="item.type=='bar'">
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`${item.type == 'bar' ? '柱状图' : '折线图'}`"
+    :expanded="true"
+  >
+    <SettingItemBox name="图形" v-if="item.type == 'bar'">
       <SettingItem name="宽度">
         <n-input-number
-            v-model:value="item.barWidth"
-            :min="1"
-            :max="100"
-            size="small"
-            placeholder="自动计算"
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
         ></n-input-number>
       </SettingItem>
       <SettingItem name="圆角">
         <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="线条" v-if="item.type=='line'">
+    <SettingItemBox name="线条" v-if="item.type == 'line'">
       <SettingItem name="宽度">
         <n-input-number
-            v-model:value="item.lineStyle.width"
-            :min="1"
-            :max="100"
-            size="small"
-            placeholder="自动计算"
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
         ></n-input-number>
       </SettingItem>
       <SettingItem name="类型">
         <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="实心点" v-if="item.type=='line'">
+    <SettingItemBox name="实心点" v-if="item.type == 'line'">
       <SettingItem name="大小">
         <n-input-number
-            v-model:value="item.symbolSize"
-            :min="1"
-            :max="100"
-            size="small"
-            placeholder="自动计算"
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
@@ -56,8 +61,8 @@
       </setting-item>
       <setting-item name="位置">
         <n-select
-            v-model:value="item.label.position"
-            :options="[
+          v-model:value="item.label.position"
+          :options="[
             { label: 'top', value: 'top' },
             { label: 'left', value: 'left' },
             { label: 'right', value: 'right' },
@@ -83,7 +88,6 @@ const props = defineProps({
 })
 
 const seriesList = computed(() => {
-  console.log(props.optionData);
   return props.optionData.series
 })
 </script>

src/packages/components/Charts/Bars/BarLine/index.ts

@@ -0,0 +1,16 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+  key: 'BarLine',
+  chartKey: 'VBarLine',
+  conKey: 'VCBarLine',
+  title: '柱状图 & 折线图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_line.png'
+}

src/packages/components/Charts/Bars/BarLine/index.vue

@@ -1,10 +1,16 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
-           autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch, PropType, nextTick} from 'vue'
+import { ref, computed, watch, PropType, nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use } from 'echarts/core'
@@ -44,25 +50,24 @@ const option = computed(() => {
 })
 
 watch(
-    () => props.chartConfig.option.dataset,
-    (newData, oldData) => {
-      if (newData.dimensions.length !== oldData.dimensions.length) {
-        const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(barSeriesItem, lineSeriesItem)
-        }
-        replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
-        nextTick(() => {
-          replaceMergeArr.value = []
-        })
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(barSeriesItem, lineSeriesItem)
       }
-    },
-    {
-      deep: false
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
     }
+  },
+  {
+    deep: false
+  }
 )
 
-
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -1,5 +1,6 @@
 import { BarCommonConfig } from './BarCommon/index'
 import { BarCrossrangeConfig } from './BarCrossrange/index'
 import { CapsuleChartConfig } from './CapsuleChart/index'
+import { BarLineConfig } from './BarLine/index'
 
-export default [BarCommonConfig, BarCrossrangeConfig, CapsuleChartConfig]
+export default [BarCommonConfig, BarCrossrangeConfig, BarLineConfig, CapsuleChartConfig]

src/packages/components/Charts/COMBINATIONS/BarLine/config.ts

@@ -1,76 +0,0 @@
-import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { BarLineConfig } from './index'
-import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-
-export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
-// 柱状折线组合图 分别定义series
-// 写死name可以定义legend显示的名称
-export const barSeriesItem = {
-    type: 'bar',
-    barWidth: 15,
-    label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-    },
-    itemStyle: {
-        color: null,
-        borderRadius: 2
-    }
-}
-
-export const lineSeriesItem = {
-    type: 'line',
-    symbol: "circle",
-    label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-    },
-    symbolSize: 5, //设定实心点的大小
-    itemStyle: {
-        color: '#FFE47A',
-        borderWidth: 1
-    },
-    lineStyle: {
-        type: 'solid',
-        width: 3,
-        color: null
-    }
-}
-
-export const option = {
-    tooltip: {
-        show: true,
-        trigger: 'axis',
-        axisPointer: {
-            show: true,
-            type: 'shadow'
-        }
-    },
-    legend: {
-        data:null
-    },
-    xAxis: {
-        show: true,
-        type: 'category'
-    },
-    yAxis: {
-        show: true,
-        type: 'value'
-    },
-    dataset: { ...dataJson },
-    series: [barSeriesItem, lineSeriesItem]
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-    public key = BarLineConfig.key
-    public chartConfig = cloneDeep(BarLineConfig)
-    // 图表配置项
-    public option = echartOptionProfixHandle(option, includes)
-}

src/packages/components/Charts/COMBINATIONS/BarLine/index.ts

@@ -1,16 +0,0 @@
-// 公共类型声明
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-// 当前[信息模块]分类声明
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-
-export const BarLineConfig: ConfigType = {
-    key: 'BarLine',
-    chartKey: 'VBarLine',
-    conKey: 'VCBarLine',
-    title: '柱状加折线图',
-    category: ChatCategoryEnum.COMBINATIONS,
-    categoryName: ChatCategoryEnumName.COMBINATION,
-    package: PackagesCategoryEnum.CHARTS,
-    chartFrame: ChartFrameEnum.ECHARTS,
-    image: 'bar_x.png'
-}

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

@@ -1,3 +0,0 @@
-import { BarLineConfig } from './BarLine/index'
-
-export default [BarLineConfig]

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

@@ -5,7 +5,6 @@ export enum ChatCategoryEnum {
   LINE = 'Lines',
   SCATTER = 'Scatters',
   MAP = 'Maps',
-  COMBINATIONS = 'COMBINATIONS',
   MORE = 'Mores'
 }
 

src/packages/components/Charts/index.ts

@@ -3,7 +3,6 @@ import Pies from './Pies'
 import Lines from './Lines'
 import Scatters from './Scatters'
 import Mores from './Mores'
-import COMBINATIONS from "./COMBINATIONS";
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps,...COMBINATIONS, ...Mores]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]