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 @@ > + + + + +