From 98100be99da8c13814a3fde2e22dcf657bad35d9 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Wed, 9 Mar 2022 20:27:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=E9=A2=9C=E8=89=B2=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chartConfiguration/echarts/index.ts       |  3 +-
 .../chartConfiguration/echarts/line.ts        | 18 +++++
 .../Charts/Bars/BarCommon/config.vue          |  2 +-
 .../Charts/Bars/BarCrossrange/config.vue      |  2 +-
 .../Charts/Lines/LineCommon/config.ts         | 49 +++++------
 .../Charts/Lines/LineCommon/config.vue        | 81 +++++++++++++++++++
 .../Charts/Lines/LineCommon/index.vue         | 10 +--
 7 files changed, 126 insertions(+), 39 deletions(-)
 create mode 100644 src/packages/chartConfiguration/echarts/line.ts

diff --git a/src/packages/chartConfiguration/echarts/index.ts b/src/packages/chartConfiguration/echarts/index.ts
index d6144207..9b084cf5 100644
--- a/src/packages/chartConfiguration/echarts/index.ts
+++ b/src/packages/chartConfiguration/echarts/index.ts
@@ -1 +1,2 @@
-export * from './axis'
\ No newline at end of file
+export * from './axis'
+export * from './line'
\ No newline at end of file
diff --git a/src/packages/chartConfiguration/echarts/line.ts b/src/packages/chartConfiguration/echarts/line.ts
new file mode 100644
index 00000000..6716ecba
--- /dev/null
+++ b/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'
+      }
+    ]
+  }
+}
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue
index 130caf10..a4b866a4 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/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" />
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
index 130caf10..a4b866a4 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue
+++ b/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" />
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index dc173278..95f44f03 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/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: {
-          width: 3,
-          color: {
-            type: 'linear',
-
-            colorStops: [
-              {
-                offset: 0,
-                color: '#42a5f5' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: '#48D8BF' // 100% 处的颜色
-              }
-            ],
-            globalCoord: false // 缺省为 false
-          },
-          shadowColor: 'rgba(68, 181, 226, 0.3)',
-          shadowBlur: 5,
-          shadowOffsetY: 20
-        }
-      },
-      itemStyle: {
-        normal: {
-          color: '#fff',
-          borderWidth: 10,
-          borderColor: '#42a5f5'
-        }
+        type: 'solid',
+        width: 3,
+        color: {
+          type: 'linear',
+          colorStops: [
+            {
+              offset: 0,
+              color: '#42a5f5' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#48D8BF' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        },
+        shadowColor: 'rgba(68, 181, 226, 0.3)',
+        shadowBlur: 5,
+        shadowOffsetY: 20
       },
       data: [120, 200, 150, 80, 70, 110, 130]
     }
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
index 44a7bc22..25b2aae8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/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>
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 636a00dd..d45e8dd8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/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 {
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
+import { 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>