fix: 柱状图 折线图 饼图等通用组件增加总配置 配置所有系列 修复tooltip超出页面

src/components/Pages/ChartItemSetting/SettingItemBox.vue

@@ -38,7 +38,7 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-$leftWidth: 90px;
+$leftWidth: 60px;
 @include go('config-item-box') {
   position: relative;
   display: flex;

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

@@ -1,6 +1,50 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="总配置" :expanded="true">
+    <SettingItemBox name="" :alone="true">
+      <n-text>修改此配置将覆盖全部系列配置</n-text>
+    </SettingItemBox>
+    <SettingItemBox name="图形">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="allSeriesConfig.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="allSeriesConfig.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="allSeriesConfig.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
@@ -45,9 +89,12 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { seriesItem } from "./config";
+import { cloneDeep } from "lodash";
 
 const props = defineProps({
   optionData: {
@@ -59,4 +106,32 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
+
+watch(() => allSeriesConfig.value, (v) => {
+  seriesList.value.forEach((item: typeof seriesItem) => {
+    Object.assign(item, cloneDeep(v))
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => seriesList.value, (v) => {
+  const isSame = v.every((_: typeof seriesItem) => {
+    let flag = true
+    let k: keyof typeof seriesItem
+    for(k in _) {
+      if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
+    }
+    return flag
+  })
+  if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
+    Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 </script>

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

@@ -17,7 +17,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import { useChartDataFetch, useChartCommonData } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
@@ -37,6 +37,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])

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

@@ -1,6 +1,62 @@
 <template>
   <!-- Echarts 全局设置 --> 
   <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="总配置" :expanded="true">
+    <SettingItemBox name="" :alone="true">
+      <n-text>修改此配置将覆盖全部系列配置</n-text>
+    </SettingItemBox>
+    <SettingItemBox name="图形">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="allSeriesConfig.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number
+          v-model:value="allSeriesConfig.itemStyle.borderRadius"
+          :min="0"
+          size="small"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="allSeriesConfig.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="allSeriesConfig.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="allSeriesConfig.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
       <SettingItem name="宽度">
@@ -57,10 +113,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { seriesItem } from "./config"
+import { cloneDeep } from "lodash"
 
 const props = defineProps({
   optionData: {
@@ -72,4 +131,32 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
+
+watch(() => allSeriesConfig.value, (v) => {
+  seriesList.value.forEach((item: typeof seriesItem) => {
+    Object.assign(item, cloneDeep(v))
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => seriesList.value, (v) => {
+  const isSame = v.every((_: typeof seriesItem) => {
+    let flag = true
+    let k: keyof typeof seriesItem
+    for(k in _) {
+      if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
+    }
+    return flag
+  })
+  if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
+    Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 </script>

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

@@ -23,7 +23,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes, seriesItem } from './config'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import cloneDeep from 'lodash/cloneDeep'
@@ -43,6 +43,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])

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

@@ -13,7 +13,8 @@ export const seriesItem = {
     color: '#fff',
     fontSize: 12
   },
-  symbolSize: 5, //设定实心点的大小
+  symbolSize: 0, //设定实心点的大小
+  smooth: true,
   itemStyle: {
     color: null,
     borderRadius: 0

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

@@ -1,8 +1,75 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="总配置" :expanded="true">
+    <SettingItemBox name="" :alone="true">
+      <n-text>修改此配置将覆盖全部折线配置</n-text>
+    </SettingItemBox>
+    <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="allSeriesConfig.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="allSeriesConfig.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="allSeriesConfig.symbolSize"
+          :min="0"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="allSeriesConfig.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
     <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.lineStyle.width"
@@ -20,7 +87,7 @@
       <SettingItem name="大小">
         <n-input-number
           v-model:value="item.symbolSize"
-          :min="1"
+          :min="0"
           :max="100"
           size="small"
           placeholder="自动计算"
@@ -56,10 +123,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { seriesItem } from './config'
+import { cloneDeep } from 'lodash'
 
 const props = defineProps({
   optionData: {
@@ -71,4 +141,32 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
+
+watch(() => allSeriesConfig.value, (v) => {
+  seriesList.value.forEach((item: typeof seriesItem) => {
+    Object.assign(item, cloneDeep(v))
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => seriesList.value, (v) => {
+  const isSame = v.every((_: typeof seriesItem) => {
+    let flag = true
+    let k: keyof typeof seriesItem
+    for(k in _) {
+      if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
+    }
+    return flag
+  })
+  if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
+    Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 </script>

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

@@ -24,7 +24,7 @@ import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
-import { isPreview } from '@/utils'
+import { isPreview, setTooltipPosition } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 
@@ -43,6 +43,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

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

@@ -8,6 +8,35 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 
+export const seriesItem = {
+  type: 'line',
+  smooth: true,
+  symbolSize: 0, //设定实心点的大小
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3
+  },
+  areaStyle: {
+    opacity: 0.8,
+    color: new graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: chartColorsSearch[defaultTheme][3]
+      },
+      {
+        offset: 1,
+        color: 'rgba(0,0,0,0)'
+      }
+    ])
+  }
+}
+
 const options = {
   tooltip: {
     show: true,
@@ -25,36 +54,7 @@ const options = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
+  series: [seriesItem]
-    {
-      type: 'line',
-      smooth: false,
-      symbolSize: 5, //设定实心点的大小
-      label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-      },
-      lineStyle: {
-        type: 'solid',
-        width: 3
-      },
-      areaStyle: {
-        opacity: 0.8,
-        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColorsSearch[defaultTheme][3]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0,0)'
-          }
-        ])
-      }
-    }
-  ]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -1,8 +1,75 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="总配置" :expanded="true">
+    <SettingItemBox name="" :alone="true">
+      <n-text>修改此配置将覆盖全部折线配置</n-text>
+    </SettingItemBox>
+    <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="allSeriesConfig.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="allSeriesConfig.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="allSeriesConfig.symbolSize"
+          :min="0"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="allSeriesConfig.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="allSeriesConfig.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="allSeriesConfig.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线面积图-${index + 1}`" :expanded="true">
     <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.lineStyle.width"
@@ -20,7 +87,7 @@
       <SettingItem name="大小">
         <n-input-number
           v-model:value="item.symbolSize"
-          :min="1"
+          :min="0"
           :max="100"
           size="small"
           placeholder="自动计算"
@@ -56,10 +123,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { seriesItem } from "./config";
+import { cloneDeep } from "lodash";
 
 const props = defineProps({
   optionData: {
@@ -71,4 +141,32 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
+
+watch(() => allSeriesConfig.value, (v) => {
+  seriesList.value.forEach((item: typeof seriesItem) => {
+    Object.assign(item, cloneDeep(v))
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => seriesList.value, (v) => {
+  const isSame = v.every((_: typeof seriesItem) => {
+    let flag = true
+    let k: keyof typeof seriesItem
+    for(k in _) {
+      if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
+    }
+    return flag
+  })
+  if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
+    Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 </script>

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

@@ -16,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
-import { isPreview, colorGradientCustomMerge} from '@/utils'
+import {isPreview, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -33,6 +33,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

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

@@ -7,6 +7,37 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 
+export const seriesItem = {
+  type: 'line',
+  symbolSize: 0, //设定实心点的大小
+  smooth: true,
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
+        },
+        {
+          offset: 1,
+          color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
+        }
+      ],
+      globalCoord: false // 缺省为 false
+    },
+    shadowColor: chartColorsSearch[defaultTheme][2],
+    shadowBlur: 10,
+    shadowOffsetY: 20
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
@@ -24,37 +55,7 @@ export const option = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
+  series: [seriesItem]
-    {
-      type: 'line',
-      symbolSize: 5, //设定实心点的大小
-      lineStyle: {
-        type: 'solid',
-        width: 3,
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
-            }
-          ],
-          globalCoord: false // 缺省为 false
-        },
-        shadowColor: chartColorsSearch[defaultTheme][2],
-        shadowBlur: 10,
-        shadowOffsetY: 20
-      }
-    }
-  ]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -1,6 +1,80 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="总配置" :expanded="true">
+    <SettingItemBox name="" :alone="true">
+      <n-text>修改此配置将覆盖全部折线配置</n-text>
+    </SettingItemBox>
+    <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="allSeriesConfig.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="allSeriesConfig.lineStyle.color.colorStops[0].color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="allSeriesConfig.lineStyle.color.colorStops[1].color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="allSeriesConfig.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="allSeriesConfig.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="allSeriesConfig.symbolSize"
+          :min="0"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="allSeriesConfig.lineStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+
+    </SettingItemBox>
+    <SettingItemBox name="设置">
+      <SettingItem name="阴影">
+        <n-button
+          size="small"
+          @click="allSeriesConfig.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
+        >
+          去除阴影
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem
     v-for="(item, index) in seriesList"
     :key="index"
@@ -8,6 +82,12 @@
     :expanded="true"
   >
     <SettingItemBox name="线条">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.smooth" size="small" />
+          <n-text>平滑曲线</n-text>
+        </n-space>
+      </setting-item>
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -43,7 +123,7 @@
       <SettingItem name="大小">
         <n-input-number
           v-model:value="item.symbolSize"
-          :min="1"
+          :min="0"
           :max="100"
           size="small"
           placeholder="自动计算"
@@ -74,7 +154,8 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType, computed, ref, watch } from 'vue'
+import type { Ref } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import {
@@ -83,6 +164,8 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
+import { seriesItem } from "./config";
+import { cloneDeep } from "lodash";
 
 const props = defineProps({
   optionData: {
@@ -94,4 +177,32 @@ const props = defineProps({
 const seriesList = computed(() => {
   return props.optionData.series
 })
+
+const allSeriesConfig: Ref<typeof seriesItem> = ref(cloneDeep(seriesItem))
+
+watch(() => allSeriesConfig.value, (v) => {
+  seriesList.value.forEach((item: typeof seriesItem) => {
+    Object.assign(item, cloneDeep(v))
+  })
+}, {
+  deep: true,
+  immediate: true
+})
+
+watch(() => seriesList.value, (v) => {
+  const isSame = v.every((_: typeof seriesItem) => {
+    let flag = true
+    let k: keyof typeof seriesItem
+    for(k in _) {
+      if(JSON.stringify(_[k]) !== JSON.stringify(v[0][k])) flag = false
+    }
+    return flag
+  })
+  if(isSame && JSON.stringify(v[0]) !== JSON.stringify(allSeriesConfig.value)) {
+    Object.assign(allSeriesConfig.value, cloneDeep(v[0]))
+  }
+}, {
+  deep: true,
+  immediate: true
+})
 </script>

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

@@ -16,7 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
-import { isPreview, colorGradientCustomMerge } from '@/utils'
+import {isPreview, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
 
 const props = defineProps({
   themeSetting: {
@@ -33,6 +33,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -11,7 +11,7 @@ import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
 import config from './config'
-import { isPreview, isString, isNumber, colorGradientCustomMerge } from '@/utils'
+import {isPreview, isString, isNumber, colorGradientCustomMerge, setTooltipPosition} from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartCommonData } from '@/hooks'

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -15,6 +15,7 @@ import { useChartCommonData, useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import {setTooltipPosition} from "@/utils";
 
 
 const props = defineProps({
@@ -32,6 +33,8 @@ const props = defineProps({
   }
 })
 
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import dataJson from './data.json'
 
@@ -40,6 +40,9 @@ const props = defineProps({
     required: true
   }
 })
+
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 let seriesDataNum = -1
 let seriesDataMaxLength = 0

src/packages/components/Charts/Pies/PieCommon1/index.vue

@@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import dataJson from './data.json'
 
@@ -40,6 +40,9 @@ const props = defineProps({
     required: true
   }
 })
+
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 let seriesDataNum = -1
 let seriesDataMaxLength = 0

src/packages/components/Charts/Pies/PieCommon2/index.vue

@@ -22,7 +22,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import dataJson from './data.json'
 
@@ -40,6 +40,9 @@ const props = defineProps({
     required: true
   }
 })
+
+props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
+
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 let seriesDataNum = -1
 let seriesDataMaxLength = 0

src/packages/components/CustomComponents/CustomComponents/RealTimeTraffic/index.vue

@@ -21,7 +21,7 @@ import { CreateComponentType } from '@/packages/index.d'
 import { publicInterface } from '@/api/path/business.api'
 import BorderBox from '../components/BorderBox.vue'
 import VChart from 'vue-echarts'
-import {isPreview} from '@/utils'
+import {isPreview, setTooltipPosition} from '@/utils'
 import {graphic} from "echarts";
 import moment from "moment"
 import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
@@ -40,7 +40,7 @@ const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
 const getStyle = (radius: number) => {
   return {
     borderRadius: `${radius}px`,
-    overflow: 'hidden'
+    overflow: 'visible'
   }
 }
 
@@ -136,7 +136,8 @@ const option = reactive({
   },
   tooltip: {
     trigger: 'axis',
-    formatter: null as null | string
+    formatter: null as null | string,
+    position: setTooltipPosition(props.chartConfig.attr)
   },
   dataZoom: [
     {

src/packages/components/CustomComponents/CustomComponents/components/BorderBox.vue

@@ -46,7 +46,7 @@ const { title } = toRefs(props)
   .content{
     white-space: nowrap;
     text-overflow: ellipsis;
-    overflow: hidden;
+    overflow: visible;
     height: calc(100% - 40px);
     box-sizing: border-box;
     display: flex;

src/utils/echarts.ts

@@ -0,0 +1,11 @@
+// 设置position 判断超出页面时进行补偿
+// x,y 组件的相对画布的偏移量 也就是attr.x attr.y
+export const setTooltipPosition = (attr: { x: number, y: number }) => {
+  const { x, y } = attr
+  return (point: number[], params:unknown, dom:unknown, rect:unknown, size: { contentSize: number[] }) => {
+    return [
+      x + point[0] - size.contentSize[0] > 0 ? point[0] - size.contentSize[0] : point[0],
+      y + point[1] - size.contentSize[1] > 0 ? point[1] - size.contentSize[1] : point[1]
+    ]
+  }
+}

src/utils/index.ts

@@ -9,3 +9,4 @@ export * from '@/utils/type'
 export * from '@/utils/file'
 export * from '@/utils/http'
 export * from '@/utils/aboutHtml2Canvas'
+export * from '@/utils/echarts'