feat: supply more chart types into vchart libs

src/packages/components/VChart/Lines/VChartLine/config.ts

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartLineConfig } 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 { ILineOption } from '../../index.d'
+
+export const includes = ['legends', 'tooltip']
+export const option: ILineOption & { dataset?: any } = {
+  // 图表配置
+  type: 'line',
+  dataset: data,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country',
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartLineConfig.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 = VChartLineConfig.key
+  public chartConfig = cloneDeep(VChartLineConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

src/packages/components/VChart/Lines/VChartLine/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/Lines/VChartLine/data.json

@@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "country": "China", "value": 3054 },
+    { "type": "Nail polish", "country": "USA", "value": 12814 },
+    { "type": "Eyebrow pencil", "country": "China", "value": 5067 },
+    { "type": "Eyebrow pencil", "country": "USA", "value": 13012 },
+    { "type": "Rouge", "country": "China", "value": 7004 },
+    { "type": "Rouge", "country": "USA", "value": 11624 },
+    { "type": "Lipstick", "country": "China", "value": 9054 },
+    { "type": "Lipstick", "country": "USA", "value": 8814 },
+    { "type": "Eyeshadows", "country": "China", "value": 12043 },
+    { "type": "Eyeshadows", "country": "USA", "value": 12998 },
+    { "type": "Eyeliner", "country": "China", "value": 15067 },
+    { "type": "Eyeliner", "country": "USA", "value": 12321 }
+  ]
+}

src/packages/components/VChart/Lines/VChartLine/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartLineConfig: ConfigType = {
+  key: 'VChartLine',
+  chartKey: 'VVChartLine',
+  conKey: 'VCVChartLine',
+  title: 'VChart折线图',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_line.png'
+}

src/packages/components/VChart/Lines/VChartLine/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>