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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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 @@
修改此配置将覆盖全部系列配置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
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 @@
修改此配置将覆盖全部系列配置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
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 @@
修改此配置将覆盖全部折线配置
+
+
+
+
+
@@ -63,6 +68,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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 @@
修改此配置将覆盖全部折线配置
+
+
+
+
+
@@ -63,6 +68,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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 @@
修改此配置将覆盖全部折线配置
+
+
+
+
+
@@ -81,6 +86,25 @@
:name="`折线图-${index + 1}`"
:expanded="true"
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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",