feat: 新增折线图，修改legend位置

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -14,7 +14,6 @@ import {
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 } from 'echarts/components'
 
 const props = defineProps({
@@ -38,7 +37,6 @@ use([
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 ])
 
 const option = computed(() => {

src/packages/components/Charts/Lines/LineGradientSingle/config.ts

@@ -0,0 +1,35 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { LineGradientSingleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
+export const includes = ['legend', 'xAxis', 'yAxis']
+
+const options = echartOptionProfixHandle({
+  legend: {
+    show: true,
+  },
+  xAxis: {
+    show: true,
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  series: [
+    {
+      name: 'data1',
+      type: 'line',
+      data: [120, 200, 150, 80, 70, 110, 130]
+    }
+  ]
+}, includes)
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = LineGradientSingleConfig.key
+  public chartConfig = omit(LineGradientSingleConfig, ['node'])
+  // 图表配置项
+  public option = options
+}

src/packages/components/Charts/Lines/LineGradientSingle/config.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,13 +1,45 @@
 <template>
-  <div>
-    line组件渲染
-  </div>
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+const option = computed(() => {
+  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/packages/components/Charts/Lines/LineGradients/config.ts

@@ -0,0 +1,40 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { LineGradientsConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import omit from 'lodash/omit'
+
+export const includes = ['legend', 'xAxis', 'yAxis']
+
+const options = echartOptionProfixHandle({
+  legend: {
+    show: true,
+  },
+  xAxis: {
+    show: true,
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  series: [
+    {
+      name: 'data1',
+      type: 'line',
+      data: [120, 200, 150, 80, 70, 110, 130]
+    },
+    {
+      name: 'data2',
+      type: 'line',
+      data: [130, 130, 312, 268, 155, 117, 160]
+    }
+  ]
+}, includes)
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = LineGradientsConfig.key
+  public chartConfig = omit(LineGradientsConfig, ['node'])
+  // 图表配置项
+  public option = options
+}

src/packages/components/Charts/Lines/LineGradients/config.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>配置项目</div>
+</template>
+
+<script setup lang="ts">
+
+</script>

src/packages/components/Charts/Lines/LineGradients/index.ts

@@ -4,7 +4,7 @@ import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const LineGradientsConfig: ConfigType = {
-  key: 'VLineGradientSingle',
+  key: 'VLineGradients',
   title: '折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,13 +1,45 @@
 <template>
-  <div>
-    line组件渲染
-  </div>
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
+import { computed, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
 
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+const option = computed(() => {
+  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+})
 </script>
-
-<style lang="scss" scoped>
-
-</style>

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -12,14 +12,13 @@ const option = echartOptionProfixHandle({
   },
   legend: {
     show: true,
-    top: '5%',
-    left: 'center'
   },
   series: [
     {
       name: 'Access From',
       type: 'pie',
       radius: ['40%', '70%'],
+      center: ['50%', '60%'],
       avoidLabelOverlap: false,
       itemStyle: {
         show: true,

src/packages/index.ts

@@ -32,6 +32,7 @@ const packagesInstall = (app: App): void => {
  * @param dropData
  */
 const createComponent = async (dropData: ConfigType) => {
+  console.log(dropData)
   const { category } = dropData
   const key = dropData.key.substring(1)
   const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`)

src/settings/chartThemes/global.theme.json

@@ -62,6 +62,7 @@
     }
   },
   "legend": {
+    "top": "5%",
     "textStyle": {
       "color": "#B9B8CE"
     }