Merge branch 'dev-vchart' into dev

src/packages/chartConfiguration/vcharts/index.ts

@@ -0,0 +1 @@
+export * from './legends'

src/packages/chartConfiguration/vcharts/legends.ts

@@ -0,0 +1,99 @@
+export const legendsConfig = {
+  // 位置
+  orient: [
+    {
+      label: '顶部',
+      value: 'top'
+    },
+    {
+      label: '底部',
+      value: 'bottom'
+    },
+    {
+      label: '左侧',
+      value: 'left'
+    },
+    {
+      label: '右侧',
+      value: 'right'
+    }
+  ],
+  // 对齐方式
+  position: [
+    {
+      label: '起始',
+      value: 'start'
+    },
+    {
+      label: '居中',
+      value: 'middle'
+    },
+    {
+      label: '末尾',
+      value: 'end'
+    }
+  ],
+  // 每一项的图例位置
+  align: [
+    {
+      label: '居左',
+      value: 'left'
+    },
+    {
+      label: '居右',
+      value: 'right'
+    }
+  ]
+}
+
+export const fontStyleConfig = {
+  // 字重
+  fontWeight: [
+    {
+      label: '100',
+      value: 100
+    },
+    {
+      label: '200',
+      value: 200
+    },
+    {
+      label: '300',
+      value: 300
+    },
+    {
+      label: '400',
+      value: 400
+    },
+    {
+      label: '500',
+      value: 500
+    },
+    {
+      label: '600',
+      value: 600
+    },
+    {
+      label: '正常',
+      value: "normal"
+    },
+    {
+      label: '加粗',
+      value: "bold"
+    }
+  ],
+  fontFamily: [
+    {
+      label: '宋体',
+      value: 'SimSun'
+    },
+    {
+      label: '黑体',
+      value: 'SimHei'
+    },
+    {
+      label: '楷体',
+      value: '楷体'
+    }
+  ]
+}

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

@@ -28,7 +28,7 @@ export const option = {
       type: 'shadow'
     }
   },
-xAxis: {
+  xAxis: {
     show: true,
     type: 'category'
   },

src/packages/components/VChart/Bars/VChartBarCommon/config.ts

@@ -1,15 +1,47 @@
 import { PublicConfigClass } from '@/packages/public'
 import { VChartBarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
 import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
 
-export const option = {
-  
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  stack: true,
+  xField: ['year', 'type'],
+  yField: ['value'],
+  seriesField: 'type',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarCommonConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = VChartBarCommonConfig.key
   public chartConfig = cloneDeep(VChartBarCommonConfig)
   // 图表配置项
-  public option = cloneDeep(option)
+  public option = vChartOptionPrefixHandle(option, includes)
 }

src/packages/components/VChart/Bars/VChartBarCommon/config.vue

@@ -1,3 +1,19 @@
-<template></template>
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarCommon/data.json

@@ -0,0 +1,25 @@
+{
+  "values": [
+    { "type": "Autocracies", "year": "1930", "value": 129 },
+    { "type": "Autocracies", "year": "1940", "value": 133 },
+    { "type": "Autocracies", "year": "1950", "value": 130 },
+    { "type": "Autocracies", "year": "1960", "value": 126 },
+    { "type": "Autocracies", "year": "1970", "value": 117 },
+    { "type": "Autocracies", "year": "1980", "value": 114 },
+    { "type": "Autocracies", "year": "1990", "value": 111 },
+    { "type": "Autocracies", "year": "2000", "value": 89 },
+    { "type": "Autocracies", "year": "2010", "value": 80 },
+    { "type": "Autocracies", "year": "2018", "value": 80 },
+
+    { "type": "Democracies", "year": "1930", "value": 22 },
+    { "type": "Democracies", "year": "1940", "value": 13 },
+    { "type": "Democracies", "year": "1950", "value": 25 },
+    { "type": "Democracies", "year": "1960", "value": 29 },
+    { "type": "Democracies", "year": "1970", "value": 38 },
+    { "type": "Democracies", "year": "1980", "value": 41 },
+    { "type": "Democracies", "year": "1990", "value": 57 },
+    { "type": "Democracies", "year": "2000", "value": 87 },
+    { "type": "Democracies", "year": "2010", "value": 98 },
+    { "type": "Democracies", "year": "2018", "value": 99 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarCommon/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

src/packages/components/VChart/Bars/VChartBarStack/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarStackConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  xField: ['type'],
+  yField: ['value'],
+  seriesField: 'year',
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarStackConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarStackConfig.key
+  public chartConfig = cloneDeep(VChartBarStackConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Bars/VChartBarStack/config.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarStack/data.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "year": "Africa", "value": 590 },
+    { "type": "Nail polish", "year": "EU", "value": 450 },
+    { "type": "Nail polish", "year": "China", "value": 474 },
+    { "type": "Nail polish", "year": "USA", "value": 459 },
+    { "type": "Eyebrow pencil", "year": "Africa", "value": 746 },
+    { "type": "Eyebrow pencil", "year": "EU", "value": 176 },
+    { "type": "Eyebrow pencil", "year": "China", "value": 210 },
+    { "type": "Eyebrow pencil", "year": "USA", "value": 775 },
+    { "type": "Rouge", "year": "Africa", "value": 896 },
+    { "type": "Rouge", "year": "EU", "value": 784 },
+    { "type": "Rouge", "year": "China", "value": 866 },
+    { "type": "Rouge", "year": "USA", "value": 899 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarStack/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarStackConfig: ConfigType = {
+  key: 'VChartBarStack',
+  chartKey: 'VVChartBarStack',
+  conKey: 'VCVChartBarStack',
+  title: 'VChart柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_x_stack.png'
+}

src/packages/components/VChart/Bars/VChartBarStack/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>

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

@@ -1,3 +1,4 @@
 import { VChartBarCommonConfig } from './VChartBarCommon/index'
+import { VChartBarStackConfig } from './VChartBarStack/index'
 
-export default [VChartBarCommonConfig]
+export default [VChartBarCommonConfig, VChartBarStackConfig]

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

@@ -1,3 +1,7 @@
+import { IBarChartSpec } from '@visactor/vchart'
+import { ICartesianAxisCommonSpec } from '@visactor/vchart/esm/component/axis'
+
+
 export enum ChatCategoryEnum {
   BAR = 'Bars',
 }
@@ -5,3 +9,18 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BAR = '柱状图',
 }
+
+export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
+  category: ChatCategoryEnum.BAR
+  type: 'bar'
+  xAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+  yAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+}
+
+// todo
+// export type IOption = IBarOption | ILineOption ....
+export type IOption = IBarOption 

src/packages/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import type { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/VChart/index.d'
 
 export enum ChartFrameEnum {
   // 支持 dataset 的 echarts 框架
@@ -26,11 +27,11 @@ export type ConfigType = {
   // 标题
   title: string
   // 分类
-  category: string
+  category: ChatCategoryEnum
   // 分类名称
-  categoryName: string
+  categoryName: ChatCategoryEnumName
   // 所属包
-  package: string
+  package: PackagesCategoryEnum
   // 归类
   chartFrame?: ChartFrameEnum
   // 预览图

src/packages/public/chart.ts

@@ -20,7 +20,7 @@ export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[])
  * @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)
 }

src/packages/public/vChart.ts

@@ -0,0 +1,24 @@
+import merge from 'lodash/merge'
+import pick from 'lodash/pick'
+import { vChartGlobalThemeJson } from '@/settings/vchartThemes/index'
+
+/**
+ * * 合并 color 和全局配置项
+ * @param option 配置
+ * @param themeSetting 设置
+ * @param excludes 排除元素
+ * @returns object
+ */
+export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {
+  return (option = merge({}, pick(themeSetting, includes), option))
+}
+
+/**
+ * * vCharts option 统一前置处理
+ * @param option
+ * @return option
+ */
+export const vChartOptionPrefixHandle = (option: any, includes: string[] = []) => {
+  option['background'] = 'rgba(0,0,0,0)'
+  return mergeTheme(option, vChartGlobalThemeJson, includes)
+}