feat: 新增折线图颜色控制

src/packages/chartConfiguration/echarts/index.ts

@@ -1 +1,2 @@
-export * from './axis'
+export * from './axis'
+export * from './line'

src/packages/chartConfiguration/echarts/line.ts

@@ -0,0 +1,18 @@
+export const lineConf = {
+  lineStyle: {
+    type: [
+      {
+        label: 'solid',
+        value: 'solid'
+      },
+      {
+        label: 'dashed',
+        value: 'dashed'
+      },
+      {
+        label: 'dotted',
+        value: 'dotted'
+      }
+    ]
+  }
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />

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

@@ -1,5 +1,5 @@
 <template>
-  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-数据-${index+1}`" :expanded="true">
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color" />

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

@@ -5,7 +5,7 @@ import omit from 'lodash/omit'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
-const option = {
+export const option = {
   tooltip: {
     show: true,
     trigger: 'axis',
@@ -30,34 +30,25 @@ const option = {
       name: 'data1',
       type: 'line',
       lineStyle: {
-        normal: {
+        type: 'solid',
-          width: 3,
+        width: 3,
-          color: {
+        color: {
-            type: 'linear',
+          type: 'linear',
-
+          colorStops: [
-            colorStops: [
+            {
-              {
+              offset: 0,
-                offset: 0,
+              color: '#42a5f5' // 0% 处的颜色
-                color: '#42a5f5' // 0% 处的颜色
+            },
-              },
+            {
-              {
+              offset: 1,
-                offset: 1,
+              color: '#48D8BF' // 100% 处的颜色
-                color: '#48D8BF' // 100% 处的颜色
+            }
-              }
+          ],
-            ],
+          globalCoord: false // 缺省为 false
-            globalCoord: false // 缺省为 false
+        },
-          },
+        shadowColor: 'rgba(68, 181, 226, 0.3)',
-          shadowColor: 'rgba(68, 181, 226, 0.3)',
+        shadowBlur: 5,
-          shadowBlur: 5,
+        shadowOffsetY: 20
-          shadowOffsetY: 20
-        }
-      },
-      itemStyle: {
-        normal: {
-          color: '#fff',
-          borderWidth: 10,
-          borderColor: '#42a5f5'
-        }
       },
       data: [120, 200, 150, 80, 70, 110, 130]
     }

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

@@ -1,6 +1,87 @@
 <template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`折线图-${index + 1}`"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[0].color"
+        />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[1].color"
+        />
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        />
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        />
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.shadowColor"
+        />
+      </SettingItem>
+      <SettingItem name="控制">
+        <n-button
+          size="small"
+          @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
+        >
+          去除阴影
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -10,11 +10,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import {
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -36,10 +32,10 @@ use([
   LineChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent,
+  LegendComponent
 ])
 
 const option = computed(() => {
-  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>