From 6085d019141bca3ce596b2e5942e24a37013db47 Mon Sep 17 00:00:00 2001
From: huanghao1412 <huanghao1412@163.com>
Date: Wed, 21 Feb 2024 17:49:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9F=B1=E7=8A=B6=E5=9B=BE=20=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E5=A2=9E=E5=8A=A0=E5=8F=8Cy=E8=BD=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/ChartItemSetting/GlobalSetting.vue  | 186 +++++++++---------
 src/hooks/useChartCommonData.hook.ts          |  22 +--
 .../Charts/Bars/BarCommon/config.ts           |   5 +-
 .../Charts/Bars/BarCommon/config.vue          |  40 +++-
 .../Charts/Bars/BarCrossrange/config.ts       |  17 +-
 .../Charts/Bars/BarCrossrange/config.vue      |  40 +++-
 .../Charts/Lines/LineCommon/config.ts         |   3 +-
 .../Charts/Lines/LineCommon/config.vue        |  40 +++-
 .../Charts/Lines/LineGradientSingle/config.ts |   3 +-
 .../Lines/LineGradientSingle/config.vue       |  61 +++++-
 .../Charts/Lines/LineGradientSingle/index.vue |  61 ++++--
 .../Charts/Lines/LineLinearSingle/config.ts   |   3 +-
 .../Charts/Lines/LineLinearSingle/config.vue  |  40 +++-
 .../Charts/Lines/LineLinearSingle/index.vue   |  18 ++
 .../Tables/Tables/TableScrollBoard/index.vue  |   2 +-
 src/settings/chartThemes/global.theme.json    | 101 +++++++---
 16 files changed, 470 insertions(+), 172 deletions(-)

diff --git a/src/components/Pages/ChartItemSetting/GlobalSetting.vue b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
index 68e3fb00..9e33369d 100644
--- a/src/components/Pages/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/Pages/ChartItemSetting/GlobalSetting.vue
@@ -160,97 +160,99 @@
     </setting-item-box>
   </collapse-item>
 
-  <collapse-item v-if="yAxis" name="Y轴">
-    <template #header>
-      <n-switch v-model:value="yAxis.show" size="small"></n-switch>
-    </template>
-    <setting-item-box name="单位">
-      <setting-item name="名称">
-        <n-input v-model:value="yAxis.name" size="small"></n-input>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker>
-      </setting-item>
-      <setting-item name="大小">
-        <n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number>
-      </setting-item>
-      <setting-item name="偏移量">
-        <n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="标签">
-      <setting-item name="展示">
-        <n-space>
-          <n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker>
-      </setting-item>
-      <setting-item name="大小">
-        <n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
-      </setting-item>
-      <setting-item name="偏移量">
-        <n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="轴线">
-      <setting-item name="展示">
-        <n-space>
-          <n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker v-model:value="yAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
-      </setting-item>
-      <setting-item name="粗细">
-        <n-input-number v-model:value="yAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
-      </setting-item>
-      <setting-item name="位置">
-        <n-select v-model:value="yAxis.position" size="small" :options="axisConfig.yposition"></n-select>
-      </setting-item>
-      <setting-item name="对齐零">
-        <n-space>
-          <n-switch v-model:value="yAxis.axisLine.onZero" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-      <setting-item name="反向">
-        <n-space>
-          <n-switch v-model:value="yAxis.inverse" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="刻度">
-      <setting-item name="展示">
-        <n-space>
-          <n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-      <setting-item name="长度">
-        <n-input-number v-model:value="yAxis.axisTick.length" :min="1" size="small"></n-input-number>
-      </setting-item>
-    </setting-item-box>
-    <setting-item-box name="分割线">
-      <setting-item name="展示">
-        <n-space>
-          <n-switch v-model:value="yAxis.splitLine.show" size="small"></n-switch>
-        </n-space>
-      </setting-item>
-      <setting-item name="颜色">
-        <n-color-picker v-model:value="yAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
-      </setting-item>
-      <setting-item name="粗细">
-        <n-input-number v-model:value="yAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
-      </setting-item>
-      <setting-item name="类型">
-        <n-select
-          v-model:value="yAxis.splitLine.lineStyle.type"
-          size="small"
-          :options="axisConfig.splitLint.lineStyle.type"
-        ></n-select>
-      </setting-item>
-    </setting-item-box>
-  </collapse-item>
+  <template v-for="(yAxis, i) in yAxisArr" :key="i">
+    <collapse-item v-if="yAxis" :name="`Y轴-${i + 1}`">
+      <template #header>
+        <n-switch v-model:value="yAxis.show" size="small"></n-switch>
+      </template>
+      <setting-item-box name="单位">
+        <setting-item name="名称">
+          <n-input v-model:value="yAxis.name" size="small"></n-input>
+        </setting-item>
+        <setting-item name="颜色">
+          <n-color-picker size="small" v-model:value="yAxis.nameTextStyle.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="大小">
+          <n-input-number v-model:value="yAxis.nameTextStyle.fontSize" :min="8" size="small"></n-input-number>
+        </setting-item>
+        <setting-item name="偏移量">
+          <n-input-number v-model:value="yAxis.nameGap" :min="5" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="标签">
+        <setting-item name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLabel.show" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+        <setting-item name="颜色">
+          <n-color-picker size="small" v-model:value="yAxis.axisLabel.color"></n-color-picker>
+        </setting-item>
+        <setting-item name="大小">
+          <n-input-number v-model:value="yAxis.axisLabel.fontSize" :min="8" size="small"></n-input-number>
+        </setting-item>
+        <setting-item name="偏移量">
+          <n-input-number v-model:value="yAxis.axisLabel.rotate" :min="-90" :max="90" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="轴线">
+        <setting-item name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLine.show" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+        <setting-item name="颜色">
+          <n-color-picker v-model:value="yAxis.axisLine.lineStyle.color" size="small"></n-color-picker>
+        </setting-item>
+        <setting-item name="粗细">
+          <n-input-number v-model:value="yAxis.axisLine.lineStyle.width" :min="1" size="small"></n-input-number>
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="yAxis.position" size="small" :options="axisConfig.yposition"></n-select>
+        </setting-item>
+        <setting-item name="对齐零">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLine.onZero" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+        <setting-item name="反向">
+          <n-space>
+            <n-switch v-model:value="yAxis.inverse" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="刻度">
+        <setting-item name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisTick.show" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+        <setting-item name="长度">
+          <n-input-number v-model:value="yAxis.axisTick.length" :min="1" size="small"></n-input-number>
+        </setting-item>
+      </setting-item-box>
+      <setting-item-box name="分割线">
+        <setting-item name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.splitLine.show" size="small"></n-switch>
+          </n-space>
+        </setting-item>
+        <setting-item name="颜色">
+          <n-color-picker v-model:value="yAxis.splitLine.lineStyle.color" size="small"></n-color-picker>
+        </setting-item>
+        <setting-item name="粗细">
+          <n-input-number v-model:value="yAxis.splitLine.lineStyle.width" :min="1" size="small"></n-input-number>
+        </setting-item>
+        <setting-item name="类型">
+          <n-select
+            v-model:value="yAxis.splitLine.lineStyle.type"
+            size="small"
+            :options="axisConfig.splitLint.lineStyle.type"
+          ></n-select>
+        </setting-item>
+      </setting-item-box>
+    </collapse-item>
+  </template>
 
   <collapse-item v-if="legend" name="图例">
     <template #header>
@@ -372,7 +374,7 @@ const xAxis = computed(() => {
   return props.optionData.xAxis
 })
 
-const yAxis = computed(() => {
+const yAxisArr = computed(() => {
   return props.optionData.yAxis
 })
 
diff --git a/src/hooks/useChartCommonData.hook.ts b/src/hooks/useChartCommonData.hook.ts
index 20b02342..5b9d8c05 100644
--- a/src/hooks/useChartCommonData.hook.ts
+++ b/src/hooks/useChartCommonData.hook.ts
@@ -52,21 +52,21 @@ export const useChartCommonData = (
                 // 多个值的处理方式
                 if(SingleDataArr.every(_ => _ !== currentSource)) {
                     let seriesItem = cloneDeep(targetComponent.option.series[0])
-                    let series = []
-                    if(dataset.dimensions.length - 1) {
-                        for(let i = 0; i < dataset.dimensions.length - 1; i++) {
-                            series.push(cloneDeep(seriesItem))
-                        }
-                    }
-                    else {
-                        series = [seriesItem]
-                    }
+                    // let series = []
+                    // if(dataset.dimensions.length - 1) {
+                    //     for(let i = 0; i < dataset.dimensions.length - 1; i++) {
+                    //         series.push(cloneDeep(seriesItem))
+                    //     }
+                    // }
+                    // else {
+                    //     series = [seriesItem]
+                    // }
                     if (vChartRef.value) {
                         Object.assign(targetComponent.option, {
-                            series,
+                            // series,
                             dataset,
                         })
-                        setOption(vChartRef.value, { series, dataset })
+                        setOption(vChartRef.value, { dataset })
                     }
                 }
                 else if(SingleDataArr.some(_ => _ === currentSource)) { // 单个值的处理
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index fe20cb39..ca0a7a10 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -17,7 +17,8 @@ export const seriesItem = {
   itemStyle: {
     color: null,
     borderRadius: 2
-  }
+  },
+  yAxisIndex: 0
 }
 export const option = {
   tooltip: {
@@ -28,7 +29,7 @@ export const option = {
       type: 'shadow'
     }
   },
-xAxis: {
+  xAxis: {
     show: true,
     type: 'category'
   },
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue
index 7b03ce5c..e7e97c74 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/config.vue
@@ -5,6 +5,11 @@
     <SettingItemBox name="" :alone="true">
       <n-text>修改此配置将覆盖全部系列配置</n-text>
     </SettingItemBox>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="allSeriesConfig.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
         <n-input-number
@@ -46,6 +51,25 @@
     </setting-item-box>
   </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="index === seriesList.length - 1" @click="handleAdd" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+    </template>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="item.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
         <n-input-number
@@ -95,6 +119,8 @@ import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/comp
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { seriesItem } from "./config";
 import { cloneDeep } from "lodash";
+import { icon } from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -113,13 +139,25 @@ const allSeriesConfig = computed(() => {
   return props.optionData.allSeriesConfig
 })
 
+const yAxisIndexOptions = [
+  { label: 'Y轴-1', value: 0 },
+  { label: 'Y轴-2', value: 1 },
+]
+
+const handleAdd = () => {
+  props.optionData.series.push(cloneDeep(seriesItem))
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+
 watch(() => allSeriesConfig.value, (v) => {
   seriesList.value.forEach((item: typeof seriesItem) => {
     Object.assign(item, cloneDeep(v))
   })
 }, {
   deep: true,
-  immediate: true
+  // immediate: true
 })
 
 watch(() => seriesList.value, (v) => {
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index abdd2687..49e479b8 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -17,7 +17,8 @@ export const seriesItem = {
   itemStyle: {
     color: null,
     borderRadius: 0
-  }
+  },
+  yAxisIndex: 0
 }
 export const option = {
   tooltip: {
@@ -32,10 +33,16 @@ export const option = {
     show: true,
     type: 'value'
   },
-  yAxis: {
-    show: true,
-    type: 'category'
-  },
+  yAxis: [
+    {
+      show: true,
+      type: 'category'
+    },
+    {
+      show: false,
+      type: 'category'
+    }
+  ],
   dataset: { ...dataJson },
   series: [seriesItem, seriesItem],
   allSeriesConfig: seriesItem
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
index 69d1e74d..ddc422fa 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue
@@ -5,6 +5,11 @@
     <SettingItemBox name="" :alone="true">
       <n-text>修改此配置将覆盖全部系列配置</n-text>
     </SettingItemBox>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="allSeriesConfig.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
         <n-input-number
@@ -58,6 +63,25 @@
     </setting-item-box>
   </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="index === seriesList.length - 1" @click="handleAdd" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+    </template>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="item.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
           <n-input-number
@@ -120,6 +144,8 @@ import { option } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { seriesItem } from "./config"
 import { cloneDeep } from "lodash"
+import { icon } from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -138,13 +164,25 @@ const allSeriesConfig = computed(() => {
   return props.optionData.allSeriesConfig
 })
 
+const yAxisIndexOptions = [
+  { label: 'Y轴-1', value: 0 },
+  { label: 'Y轴-2', value: 1 },
+]
+
+const handleAdd = () => {
+  props.optionData.series.push(cloneDeep(seriesItem))
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+
 watch(() => allSeriesConfig.value, (v) => {
   seriesList.value.forEach((item: typeof seriesItem) => {
     Object.assign(item, cloneDeep(v))
   })
 }, {
   deep: true,
-  immediate: true
+  // immediate: true
 })
 
 watch(() => seriesList.value, (v) => {
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index ac9ce632..6f43edf8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -23,7 +23,8 @@ export const seriesItem = {
     type: 'solid',
     width: 3,
     color: null
-  }
+  },
+  yAxisIndex: 0
 }
 
 export const option = {
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue
index 58f23e45..127e8b32 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/config.vue
@@ -5,6 +5,11 @@
     <SettingItemBox name="" :alone="true">
       <n-text>修改此配置将覆盖全部折线配置</n-text>
     </SettingItemBox>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="allSeriesConfig.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -63,6 +68,25 @@
     </setting-item-box>
   </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="index === seriesList.length - 1" @click="handleAdd" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+    </template>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="item.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -130,6 +154,8 @@ import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { seriesItem } from './config'
 import { cloneDeep } from 'lodash'
+import { icon } from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -148,13 +174,25 @@ const allSeriesConfig = computed(() => {
   return props.optionData.allSeriesConfig
 })
 
+const yAxisIndexOptions = [
+  { label: 'Y轴-1', value: 0 },
+  { label: 'Y轴-2', value: 1 },
+]
+
+const handleAdd = () => {
+  props.optionData.series.push(cloneDeep(seriesItem))
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+
 watch(() => allSeriesConfig.value, (v) => {
   seriesList.value.forEach((item: typeof seriesItem) => {
     Object.assign(item, cloneDeep(v))
   })
 }, {
   deep: true,
-  immediate: true
+  // immediate: true
 })
 
 watch(() => seriesList.value, (v) => {
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
index ddaef6a4..37774815 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@@ -34,7 +34,8 @@ export const seriesItem = {
         color: 'rgba(0,0,0,0)'
       }
     ])
-  }
+  },
+  yAxisIndex: 0
 }
 
 const options = {
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
index 5f5c16c8..3148ea14 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue
@@ -5,6 +5,11 @@
     <SettingItemBox name="" :alone="true">
       <n-text>修改此配置将覆盖全部折线配置</n-text>
     </SettingItemBox>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="allSeriesConfig.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -63,6 +68,25 @@
     </setting-item-box>
   </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线面积图-${index + 1}`" :expanded="true">
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="index === seriesList.length - 1" @click="handleAdd(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+    </template>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="item.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -126,11 +150,14 @@
 import { PropType, computed, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
-import { chartColorsSearch, defaultTheme, GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {chartColors, chartColorsSearch, defaultTheme, GlobalThemeJsonType} from '@/settings/chartThemes/index'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { seriesItem } from "./config";
 import { cloneDeep } from "lodash";
 import { graphic } from "echarts/core";
+import { icon } from "@/plugins";
+import {alpha} from "@/utils";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -149,13 +176,39 @@ const allSeriesConfig = computed(() => {
   return props.optionData.allSeriesConfig
 })
 
+const yAxisIndexOptions = [
+  { label: 'Y轴-1', value: 0 },
+  { label: 'Y轴-2', value: 1 },
+]
+
+const handleAdd = (i: number) => {
+  let item = cloneDeep(seriesItem)
+  // const themeColor = chartColorsSearch[defaultTheme]
+  const themeColor = chartColors[defaultTheme].color
+  item.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color: alpha(themeColor[(i + 1) % themeColor.length], 0.5)
+    },
+    {
+      offset: 1,
+      color: 'rgba(0,0,0, 0)'
+    }
+  ])
+  props.optionData.series.push(item)
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+
 watch(() => allSeriesConfig.value, (v) => {
   seriesList.value.forEach((item: typeof seriesItem, index: number) => {
-    const themeColor = chartColorsSearch[defaultTheme]
+    // const themeColor = chartColorsSearch[defaultTheme]
+    const themeColor = chartColors[defaultTheme].color
     item.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
       {
         offset: 0,
-        color: themeColor[(3 + index) % themeColor.length]
+        color: alpha(themeColor[index % themeColor.length], 0.5)
       },
       {
         offset: 1,
@@ -170,7 +223,7 @@ watch(() => allSeriesConfig.value, (v) => {
   })
 }, {
   deep: true,
-  immediate: true
+  // immediate: true
 })
 
 watch(() => seriesList.value, (v) => {
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index 2e74b19f..b38d380a 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -13,10 +13,10 @@ import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import {chartColors, chartColorsSearch, defaultTheme} from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
-import {isPreview, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
+import {isPreview, colorGradientCustomMerge, setTooltipPosition, alpha} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -50,14 +50,16 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     try {
       if (!isPreview()) {
-        const themeColor =
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
-          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        // const themeColor =
+        //   colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+        //   colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+
+        const themeColor = chartColors[newColor].color || chartColors[defaultTheme].color
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-              color: themeColor[3]
+              color: alpha(themeColor[index % themeColor.length], 0.5)
             },
             {
               offset: 1,
@@ -80,20 +82,41 @@ watch(
 watch(
   () => props.chartConfig.option.dataset,
   () => {
-    const themeColor = colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any, index: number) => {
-      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: themeColor[(3 + index) % themeColor.length]
-        },
-        {
-          offset: 1,
-          color: 'rgba(0,0,0, 0)'
-        }
-      ])
-    })
+    // const themeColor = colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+    // const themeColor = chartColors[defaultTheme].color
+
+    // props.chartConfig.option.series.forEach((value: any, index: number) => {
+    //   value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+    //     {
+    //       offset: 0,
+    //       color: alpha(themeColor[index % themeColor.length], 0.5)
+    //     },
+    //     {
+    //       offset: 1,
+    //       color: 'rgba(0,0,0, 0)'
+    //     }
+    //   ])
+    // })
     option.value = props.chartConfig.option
+    if (vChartRef.value) {
+      vChartRef.value.setOption(option.value, !isPreview())
+    }
+  }
+)
+
+watch(
+  () => props.chartConfig.option.series,
+  () => {
+    // option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    option.value = props.chartConfig.option
+    if (vChartRef.value) {
+      vChartRef.value.setOption(option.value, {
+        replaceMerge: ['series']
+      })
+    }
+  },
+  {
+    deep: true
   }
 )
 
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
index 8160b522..01f1455b 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts
@@ -35,7 +35,8 @@ export const seriesItem = {
     shadowColor: chartColorsSearch[defaultTheme][2],
     shadowBlur: 10,
     shadowOffsetY: 20
-  }
+  },
+  yAxisIndex: 0
 }
 
 export const option = {
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.vue b/src/packages/components/Charts/Lines/LineLinearSingle/config.vue
index bd78340e..b1386140 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/config.vue
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.vue
@@ -5,6 +5,11 @@
     <SettingItemBox name="" :alone="true">
       <n-text>修改此配置将覆盖全部折线配置</n-text>
     </SettingItemBox>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="allSeriesConfig.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -81,6 +86,25 @@
     :name="`折线图-${index + 1}`"
     :expanded="true"
   >
+    <template #header>
+      <n-space align="center" :wrap="false">
+        <n-button v-if="index !== 0" @click="handleDelete(index)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="index === seriesList.length - 1" @click="handleAdd" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+      </n-space>
+    </template>
+    <SettingItemBox name="Y轴索引">
+      <setting-item>
+        <n-select v-model:value="item.yAxisIndex" :options="yAxisIndexOptions" size="small" />
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="线条">
       <setting-item>
         <n-space>
@@ -166,6 +190,8 @@ import {
 } from '@/components/Pages/ChartItemSetting'
 import { seriesItem } from "./config";
 import { cloneDeep } from "lodash";
+import { icon } from "@/plugins";
+const { CloseIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -184,13 +210,25 @@ const allSeriesConfig = computed(() => {
   return props.optionData.allSeriesConfig
 })
 
+const yAxisIndexOptions = [
+  { label: 'Y轴-1', value: 0 },
+  { label: 'Y轴-2', value: 1 },
+]
+
+const handleAdd = () => {
+  props.optionData.series.push(cloneDeep(seriesItem))
+}
+const handleDelete = (i: number) => {
+  props.optionData.series.splice(i, 1)
+}
+
 watch(() => allSeriesConfig.value, (v) => {
   seriesList.value.forEach((item: typeof seriesItem) => {
     Object.assign(item, cloneDeep(v))
   })
 }, {
   deep: true,
-  immediate: true
+  // immediate: true
 })
 
 watch(() => seriesList.value, (v) => {
diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue
index 21ac87a3..9998635d 100644
--- a/src/packages/components/Charts/Lines/LineLinearSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineLinearSingle/index.vue
@@ -75,12 +75,30 @@ watch(
   () => props.chartConfig.option.dataset,
   () => {
     option.value = props.chartConfig.option
+    if (vChartRef.value) {
+      vChartRef.value.setOption(option.value, !isPreview())
+    }
   },
   {
     deep: false
   }
 )
 
+watch(
+  () => props.chartConfig.option.series,
+  () => {
+    option.value = props.chartConfig.option
+    if (vChartRef.value) {
+      vChartRef.value.setOption(option.value, {
+        replaceMerge: ['series']
+      })
+    }
+  },
+  {
+    deep: true
+  }
+)
+
 // const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 const { vChartRef } = useChartCommonData(props.chartConfig, useChartEditStore)
 
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
index 761aa4f7..a8dd8ad9 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@@ -282,7 +282,7 @@ const calcAligns = () => {
   //
   // status.aligns = merge(aligns, align)
 
-  status.aligns = headerConfig.map((_: any) => _.align)
+  status.aligns = headerConfig.filter((_: ItemType) => _.show).map((_: any) => _.align)
 }
 
 const animation = async (start = false) => {
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index 0fd24712..e461217e 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -47,43 +47,82 @@
       }
     }
   },
-  "yAxis": {
-    "show": true,
-    "name": "",
-    "nameGap": 15,
-    "nameTextStyle": {
-      "color": "#B9B8CE",
-      "fontSize": 12
-    },
-    "inverse": false,
-    "axisLabel": {
+  "yAxis": [
+    {
       "show": true,
-      "fontSize": 12,
-      "color": "#B9B8CE",
-      "rotate": 0
-    },
-    "position": "left",
-    "axisLine": {
-      "show": true,
-      "lineStyle": {
+      "name": "",
+      "nameGap": 15,
+      "nameTextStyle": {
         "color": "#B9B8CE",
-        "width": 1
+        "fontSize": 12
       },
-      "onZero": true
+      "inverse": false,
+      "axisLabel": {
+        "show": true,
+        "fontSize": 12,
+        "color": "#B9B8CE",
+        "rotate": 0
+      },
+      "position": "left",
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#B9B8CE",
+          "width": 1
+        },
+        "onZero": true
+      },
+      "axisTick": {
+        "show": true,
+        "length": 5
+      },
+      "splitLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#484753",
+          "width": 1,
+          "type": "solid"
+        }
+      }
     },
-    "axisTick": {
-      "show": true,
-      "length": 5
-    },
-    "splitLine": {
-      "show": true,
-      "lineStyle": {
-        "color": "#484753",
-        "width": 1,
-        "type": "solid"
+    {
+      "show": false,
+      "name": "",
+      "nameGap": 15,
+      "nameTextStyle": {
+        "color": "#B9B8CE",
+        "fontSize": 12
+      },
+      "inverse": false,
+      "axisLabel": {
+        "show": true,
+        "fontSize": 12,
+        "color": "#B9B8CE",
+        "rotate": 0
+      },
+      "position": "right",
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#B9B8CE",
+          "width": 1
+        },
+        "onZero": true
+      },
+      "axisTick": {
+        "show": true,
+        "length": 5
+      },
+      "splitLine": {
+        "show": false,
+        "lineStyle": {
+          "color": "#484753",
+          "width": 1,
+          "type": "solid"
+        }
       }
     }
-  },
+  ],
   "legend": {
     "show": true,
     "type": "scroll",