feat：新增全局接口配置，单个图表映射表，抽离柱状图数据格式，

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

@@ -3,7 +3,7 @@ import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'dataset']
 
 export const option = {
   tooltip: {
@@ -15,12 +15,11 @@ export const option = {
     }
   },
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -28,24 +27,20 @@ export const option = {
   },
   series: [
     {
-      name: 'data1',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [120, 200, 150, 80, 70, 110, 130]
+      }
     },
     {
-      name: 'data2',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [130, 130, 312, 268, 155, 117, 160]
+      }
     }
   ]
 }

src/packages/components/Charts/Bars/BarCommon/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

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

@@ -9,8 +9,10 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setData } from '@/packages/public/chart'
+import dataJson from './data.json'
 import {
+  DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent
@@ -32,6 +34,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   BarChart,
   GridComponent,
@@ -40,6 +43,6 @@ use([
 ])
 
 const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  return setData(mergeTheme(props.chartConfig.option, props.themeSetting, includes), dataJson)
 })
 </script>

src/packages/index.d.ts

@@ -18,6 +18,11 @@ interface requestConfig {
   data: RequestConfigType
 }
 
+// Echarts 数据类型
+interface EchartsDataType {
+  dimensions: string[],
+  source: any[]
+}
 // 组件实例类
 export interface PublicConfigType extends requestConfig {
   id: string

src/packages/public/chart.ts

@@ -1,5 +1,6 @@
 import merge from 'lodash/merge'
 import pick from 'lodash/pick'
+import { EchartsDataType } from '../index.d'
 import { globalThemeJson } from '@/settings/chartThemes/index'
 
 /**
@@ -9,7 +10,7 @@ import { globalThemeJson } from '@/settings/chartThemes/index'
  * @param excludes 排除元素
  * @returns object
  */
-export const mergeTheme = <T, U> (
+export const mergeTheme = <T, U>(
   option: T,
   themeSetting: U,
   includes: string[]
@@ -20,8 +21,19 @@ export const mergeTheme = <T, U> (
 /**
  * * ECharts option 统一前置处理
  * @param option
+ * @return option
  */
- export const echartOptionProfixHandle = (option: any, includes: string[]) => {
+export const echartOptionProfixHandle = (option: any, includes: string[]) => {
   option['backgroundColor'] = 'rgba(0,0,0,0)'
   return mergeTheme(option, globalThemeJson, includes)
-}
+}
+
+/**
+ * * 设置数据
+ * @param option
+ * @return option
+ */
+export const setData = (option: any, data: EchartsDataType) => {
+  option.dataset = data
+  return option
+}

src/packages/public/publicConfig.ts

@@ -17,6 +17,7 @@ export class publicConfig implements PublicConfigType {
     opacity: 1,
     animations: []
   }
+  // 数据
   public data = {
     requestDataType: RequestDataTypeEnum.STATIC
   }