From 324edc27e1067372f28d5368b17f14a44cef11b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <1141845963@qq.com> Date: Sun, 9 Oct 2022 13:58:29 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=BB=B4=E5=BA=A6=E4=B8=8D=E5=90=8C=EF=BC=8C=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E6=95=B4=E5=90=88=E7=BB=B4=E5=BA=A6bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/hooks/useSync.hook.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index bfa7400d..f4fcdedc 100644 --- a/src/views/chart/hooks/useSync.hook.ts +++ b/src/views/chart/hooks/useSync.hook.ts @@ -55,6 +55,7 @@ export const useSync = () => { ) => { // 补充 class 上的方法 let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig) + newComponent.option = _componentInstance?.option if (callBack) { if (changeId) { callBack(merge(newComponent, { ..._componentInstance, id: getUUID() })) From 5326405a38c4a90cf1e15b0953a4e1bdb3358c9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <1141845963@qq.com> Date: Sun, 9 Oct 2022 15:50:46 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chart/hooks/useSync.hook.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index 2b5f3781..9bf70564 100644 --- a/src/views/chart/hooks/useSync.hook.ts +++ b/src/views/chart/hooks/useSync.hook.ts @@ -78,7 +78,6 @@ export const useSync = () => { ) => { // 补充 class 上的方法 let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig) - newComponent.option = _componentInstance?.option if (callBack) { if (changeId) { callBack(componentMerge(newComponent, { ..._componentInstance, id: getUUID() })) From 318a90f709503b30c3a17dd20b78b425a00a2da9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=92=8B=E6=89=BF?= <1141845963@qq.com> Date: Sun, 9 Oct 2022 16:04:29 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E5=92=8C=E6=9F=B1=E7=8A=B6=E5=9B=BE=E9=85=8D=E7=BD=AElabel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Bars/BarCommon/config.ts | 12 ++- .../Charts/Bars/BarCommon/config.vue | 57 +++++++++--- .../Charts/Bars/BarCrossrange/config.ts | 10 ++- .../Charts/Bars/BarCrossrange/config.vue | 33 +++++++ .../Charts/Lines/LineCommon/config.ts | 17 ++-- .../Charts/Lines/LineCommon/config.vue | 61 +++++++++---- .../Charts/Lines/LineGradientSingle/config.ts | 12 ++- .../Lines/LineGradientSingle/config.vue | 62 +++++++++++-- .../Charts/Lines/LineGradientSingle/index.vue | 73 +++++++-------- .../Charts/Lines/LineGradients/config.ts | 13 +++ .../Charts/Lines/LineGradients/config.vue | 44 +++++++++ .../Charts/Lines/LineGradients/index.vue | 89 +++++++++++-------- .../Charts/Lines/LineLinearSingle/config.ts | 1 + .../Charts/Lines/LineLinearSingle/config.vue | 11 +++ 14 files changed, 370 insertions(+), 125 deletions(-) diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts index a09ed2e5..b9cd9513 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.ts +++ b/src/packages/components/Charts/Bars/BarCommon/config.ts @@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis'] - export const seriesItem = { type: 'bar', - barWidth: null, + barWidth: 15, + label:{ + show: true, + position: 'top', + color: "#fff", + fontSize: 12, + }, itemStyle: { color: null, - borderRadius: 0 + borderRadius: 2 } } - export const option = { tooltip: { show: true, diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue index 078130c3..64f42591 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.vue +++ b/src/packages/components/Charts/Bars/BarCommon/config.vue @@ -1,5 +1,5 @@ diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts index 390a0172..f2a7214c 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts +++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts @@ -5,16 +5,20 @@ import cloneDeep from 'lodash/cloneDeep' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis'] - export const seriesItem = { type: 'bar', barWidth: null, + label: { + show: true, + position: 'right', + color: '#fff', + fontSize: 12 + }, itemStyle: { color: null, borderRadius: 0 } } - export const option = { tooltip: { show: true, @@ -29,7 +33,7 @@ export const option = { }, xAxis: { show: true, - type: 'value', + type: 'value' }, yAxis: { show: true, diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.vue b/src/packages/components/Charts/Bars/BarCrossrange/config.vue index fe516ce1..e22678d7 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/config.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/config.vue @@ -26,6 +26,39 @@ > + + + + + 展示标签 + + + + + + + + + + + + diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts index 549828e7..22a22ed4 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.ts +++ b/src/packages/components/Charts/Lines/LineCommon/config.ts @@ -5,16 +5,23 @@ import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index' import dataJson from './data.json' export const includes = ['legend', 'xAxis', 'yAxis'] - export const seriesItem = { type: 'line', + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, + symbolSize: 5, //设定实心点的大小 + itemStyle: { + color: null, + borderRadius: 0 + }, lineStyle: { type: 'solid', width: 3, - itemStyle: { - color: null, - borderRadius: 0 - } + color: null, } } diff --git a/src/packages/components/Charts/Lines/LineCommon/config.vue b/src/packages/components/Charts/Lines/LineCommon/config.vue index 7ab8a325..be79a016 100644 --- a/src/packages/components/Charts/Lines/LineCommon/config.vue +++ b/src/packages/components/Charts/Lines/LineCommon/config.vue @@ -1,13 +1,11 @@ @@ -32,12 +62,7 @@ import { PropType, computed } 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 { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' const props = defineProps({ optionData: { diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts index 3f5376e2..021cdd00 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts @@ -20,7 +20,7 @@ const options = { }, xAxis: { show: true, - type: 'category' + type: 'category', }, yAxis: { show: true, @@ -31,6 +31,13 @@ const options = { { type: 'line', smooth: false, + symbolSize: 5, //设定实心点的大小 + label:{ + show: true, + position: 'top', + color: "#fff", + fontSize: 12, + }, lineStyle: { type: 'solid', width: 3 @@ -52,7 +59,8 @@ const options = { ] } -export default class Config extends PublicConfigClass implements CreateComponentType { +export default class Config extends PublicConfigClass + implements CreateComponentType { public key: string = LineGradientSingleConfig.key public chartConfig = LineGradientSingleConfig // 图表配置项 diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue index 17869558..95d08627 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue @@ -25,28 +25,72 @@ > + + + + + + + + + + 展示标签 + + + + + + + + + + + + diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue index a2e3dd9a..877e4407 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue @@ -1,5 +1,10 @@ @@ -32,7 +37,14 @@ const props = defineProps({ } }) -use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent]) +use([ + DatasetComponent, + CanvasRenderer, + LineChart, + GridComponent, + TooltipComponent, + LegendComponent, +]) const chartEditStore = useChartEditStore() const option = reactive({ @@ -40,41 +52,32 @@ const option = reactive({ }) // 渐变色处理 -watch( - () => chartEditStore.getEditCanvasConfig.chartThemeColor, - (newColor: keyof typeof chartColorsSearch) => { - if (!isPreview()) { - const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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] - }, - { - offset: 1, - color: 'rgba(0,0,0, 0)' - } - ]) - }) - } - option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes) - props.chartConfig.option = option.value - }, - { - immediate: true +watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => { + if (!isPreview()) { + const themeColor = chartColorsSearch[newColor] || chartColorsSearch[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] + }, + { + offset: 1, + color: 'rgba(0,0,0, 0)' + } + ]) + }) } -) + option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes) + props.chartConfig.option = option.value +}, { + immediate: true +}) -watch( - () => props.chartConfig.option.dataset, - () => { - option.value = props.chartConfig.option - }, - { - deep: false - } -) + +watch(() => props.chartConfig.option.dataset, () => { + option.value = props.chartConfig.option +}) const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts index 1650bc83..838b841f 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.ts +++ b/src/packages/components/Charts/Lines/LineGradients/config.ts @@ -31,6 +31,13 @@ const option = { { type: 'line', smooth: false, + symbolSize: 5, //设定实心点的大小 + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, lineStyle: { width: 3, type: 'solid' @@ -52,6 +59,12 @@ const option = { { type: 'line', smooth: false, + label: { + show: true, + position: 'top', + color: '#fff', + fontSize: 12 + }, lineStyle: { width: 3, type: 'solid' diff --git a/src/packages/components/Charts/Lines/LineGradients/config.vue b/src/packages/components/Charts/Lines/LineGradients/config.vue index 17869558..5b83091a 100644 --- a/src/packages/components/Charts/Lines/LineGradients/config.vue +++ b/src/packages/components/Charts/Lines/LineGradients/config.vue @@ -25,6 +25,50 @@ > + + + + + + + + + + 展示标签 + + + + + + + + + + + + diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue index bc134641..f2162003 100644 --- a/src/packages/components/Charts/Lines/LineGradients/index.vue +++ b/src/packages/components/Charts/Lines/LineGradients/index.vue @@ -1,76 +1,93 @@ diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts index 23d7e2aa..4a5be6c4 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/config.ts +++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.ts @@ -29,6 +29,7 @@ export const option = { series: [ { type: 'line', + symbolSize: 5, //设定实心点的大小 lineStyle: { type: 'solid', width: 3, diff --git a/src/packages/components/Charts/Lines/LineLinearSingle/config.vue b/src/packages/components/Charts/Lines/LineLinearSingle/config.vue index 07641815..b1b841a7 100644 --- a/src/packages/components/Charts/Lines/LineLinearSingle/config.vue +++ b/src/packages/components/Charts/Lines/LineLinearSingle/config.vue @@ -39,6 +39,17 @@ > + + + + + Date: Wed, 12 Oct 2022 11:30:54 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E6=A0=BC=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Charts/Bars/BarCommon/config.vue | 54 +++++-------------- .../Charts/Bars/BarCommon/index.vue | 2 +- .../Charts/Bars/BarCrossrange/index.vue | 2 +- .../Charts/Lines/LineCommon/index.vue | 2 +- .../Lines/LineGradientSingle/config.vue | 50 +++++------------ .../Charts/Scatters/ScatterCommon/index.vue | 2 +- .../chart/ContentEdit/hooks/useDrag.hook.ts | 11 +--- .../components/LayersGroupListItem/index.vue | 12 +---- src/views/chart/ContentLayers/index.vue | 7 +-- src/views/chart/hooks/useKeyboard.hook.ts | 13 ++--- types/global.d.ts | 4 +- 11 files changed, 46 insertions(+), 113 deletions(-) diff --git a/src/packages/components/Charts/Bars/BarCommon/config.vue b/src/packages/components/Charts/Bars/BarCommon/config.vue index 64f42591..a8b3a525 100644 --- a/src/packages/components/Charts/Bars/BarCommon/config.vue +++ b/src/packages/components/Charts/Bars/BarCommon/config.vue @@ -1,19 +1,10 @@ diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue index 54aaa27b..2c3b8d3c 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.vue +++ b/src/packages/components/Charts/Bars/BarCommon/index.vue @@ -54,7 +54,7 @@ watch( () => props.chartConfig.option.dataset, (newData: { dimensions: any }, oldData) => { if (!isObject(newData) || !('dimensions' in newData)) return - if (newData?.dimensions.length !== oldData?.dimensions.length) { + if (Array.isArray(newData?.dimensions)) { const seriesArr = [] for (let i = 0; i < newData.dimensions.length - 1; i++) { seriesArr.push(seriesItem) diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue index d42ce328..cef123cf 100644 --- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue +++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue @@ -53,7 +53,7 @@ watch( () => props.chartConfig.option.dataset, (newData: { dimensions: any }, oldData) => { if (!isObject(newData) || !('dimensions' in newData)) return - if (newData?.dimensions.length !== oldData?.dimensions.length) { + if (Array.isArray(newData?.dimensions)) { const seriesArr = [] for (let i = 0; i < newData.dimensions.length - 1; i++) { seriesArr.push(seriesItem) diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue index 8a5c4f44..70955874 100644 --- a/src/packages/components/Charts/Lines/LineCommon/index.vue +++ b/src/packages/components/Charts/Lines/LineCommon/index.vue @@ -54,7 +54,7 @@ watch( () => props.chartConfig.option.dataset, (newData: { dimensions: any }, oldData) => { if (!isObject(newData) || !('dimensions' in newData)) return - if (newData?.dimensions.length !== oldData?.dimensions.length) { + if (Array.isArray(newData?.dimensions)) { const seriesArr = [] for (let i = 0; i < newData.dimensions.length - 1; i++) { seriesArr.push(seriesItem) diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue index 95d08627..60250083 100644 --- a/src/packages/components/Charts/Lines/LineGradientSingle/config.vue +++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.vue @@ -1,12 +1,7 @@ diff --git a/src/packages/components/Charts/Scatters/ScatterCommon/index.vue b/src/packages/components/Charts/Scatters/ScatterCommon/index.vue index 945df53d..91eba114 100644 --- a/src/packages/components/Charts/Scatters/ScatterCommon/index.vue +++ b/src/packages/components/Charts/Scatters/ScatterCommon/index.vue @@ -70,7 +70,7 @@ watch( () => props.chartConfig.option.dataset, (newData, oldData) => { if (!isArray(newData)) return - if (newData?.length !== oldData?.length) { + if (Array.isArray(newData)) { replaceMergeArr.value = ['series'] // eslint-disable-next-line vue/no-mutating-props props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({ diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 74e006b9..39a67327 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -172,10 +172,7 @@ export const useMouseHandle = () => { e.stopPropagation() if (item.status.lock) return // 若此时按下了 CTRL, 表示多选 - if ( - window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || - window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY) - ) { + if (window.$KeyboardActive?.ctrl) { // 若已选中，则去除 if (chartEditStore.targetChart.selectId.includes(item.id)) { const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id) @@ -193,11 +190,7 @@ export const useMouseHandle = () => { if (item.status.lock) return onClickOutSide() // 按下左键 + CTRL - if ( - e.buttons === MouseEventButton.LEFT && - (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || - window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)) - ) + if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return // 按下右键 + 选中多个 + 目标元素是多选子元素 diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue index 587eb85b..ac9892ec 100644 --- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue @@ -142,11 +142,7 @@ const optionsHandle = ( // 点击 const clickHandle = (e: MouseEvent) => { // 按下左键 + CTRL - if ( - window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || - window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY) - ) - return + if (window.$KeyboardActive?.ctrl) return // 判断左右键 expend.value = !expend.value mousedownHandle(e, props.componentGroupData) @@ -157,11 +153,7 @@ const groupMousedownHandle = (e: MouseEvent) => { onClickOutSide() // 若此时按下了 CTRL, 表示多选 const id = props.componentGroupData.id - if ( - e.buttons === MouseEventButton.LEFT && - (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || - window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)) - ) { + if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) { // 若已选中，则去除 if (chartEditStore.targetChart.selectId.includes(id)) { const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index ec1c4820..0576ab24 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -166,11 +166,7 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => { onClickOutSide() // 若此时按下了 CTRL, 表示多选 const id = item.id - if ( - e.buttons === MouseEventButton.LEFT && - (window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) || - window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)) - ) { + if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) { // 若已选中，则去除 if (chartEditStore.targetChart.selectId.includes(id)) { const exList = chartEditStore.targetChart.selectId.filter(e => e !== id) @@ -198,7 +194,6 @@ const changeLayerType = (value: LayerModeEnum) => { layerMode.value = value chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value) } -