diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue index 8d98c984d5..4c4bc85890 100644 --- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue +++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue @@ -17,6 +17,8 @@ import { useEmitt } from '@/hooks/web/useEmitt' import { merge } from 'lodash-es' import CanvasBackground from '@/components/visualization/component-background/CanvasBackground.vue' import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue' +import ValueFormatterSetting from '@/components/dashboard/subject-setting/dashboard-style/ValueFormatterSetting.vue' +import { formatterViewInfo } from '@/views/chart/components/js/formatter' const dvMainStore = dvMainStoreWithOut() const snapshotStore = snapshotStoreWithOut() const { canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainStore) @@ -51,12 +53,18 @@ const onColorChange = val => { const onTextChange = val => { themeAttrChange('customStyle', 'text', val) } + +const onFormatterItemChange = val => { + themeAttrChange('formatterCfg', 'formatterCfg', val) +} const themeAttrChange = (custom, property, value) => { if (canvasAttrInit) { Object.keys(canvasViewInfo.value).forEach(function (viewId) { const viewInfo = canvasViewInfo.value[viewId] try { - if (custom === 'customAttr') { + if (custom === 'formatterCfg') { + formatterViewInfo(viewInfo, value) + } else if (custom === 'customAttr') { merge(viewInfo['customAttr'], value) } else { Object.keys(value).forEach(function (key) { @@ -154,6 +162,12 @@ const saveSelfSubject = () => { > + + + - - {{ t('visualization.view') }} - + {{ t('visualization.view') }} 22 {{ resourceType }} diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ValueFormatterSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ValueFormatterSetting.vue new file mode 100644 index 0000000000..a020d092ee --- /dev/null +++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ValueFormatterSetting.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue index 7829445254..13660149df 100644 --- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue +++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue @@ -15,6 +15,8 @@ import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard import Icon from '../icon-custom/src/Icon.vue' import CanvasBaseSetting from '@/components/visualization/CanvasBaseSetting.vue' import { useI18n } from '@/hooks/web/useI18n' +import ValueFormatterSetting from '@/components/dashboard/subject-setting/dashboard-style/ValueFormatterSetting.vue' +import { formatterViewInfo } from '@/views/chart/components/js/formatter' const dvMainStore = dvMainStoreWithOut() const snapshotStore = snapshotStoreWithOut() const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore) @@ -35,6 +37,10 @@ const init = () => { }) } +const onFormatterItemChange = val => { + themeAttrChange('formatterCfg', 'formatterCfg', val) +} + const onColorChange = val => { themeAttrChange('customAttr', 'color', val) } @@ -53,7 +59,9 @@ const themeAttrChange = (custom, property, value) => { Object.keys(canvasViewInfo.value).forEach(function (viewId) { try { const viewInfo = canvasViewInfo.value[viewId] - if (custom === 'customAttr') { + if (custom === 'formatterCfg') { + formatterViewInfo(viewInfo, value) + } else if (custom === 'customAttr') { if (viewInfo.type === 'flow-map') { const { customAttr } = viewInfo const tmpValue = cloneDeep(value) @@ -172,6 +180,17 @@ onMounted(() => { > + + + { historyItemAdaptor(componentItem, reportFilterInfo, attachInfo, canvasVersion, canvasInfo) }) diff --git a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts index 7463ad933c..5b7b518fe2 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts @@ -1,3 +1,5 @@ +import { formatterItem } from '@/views/chart/components/js/formatter' + export const VIEW_DETAILS_BASH_STYLE = '{"id":"view-dialog-details-001","title":"图表明细","sceneId":0,"tableId":"1692381412250939392","type":"table-info","render":"antv","resultCount":1000,"resultMode":"all","refreshViewEnable":false,"refreshTime":5,"refreshUnit":"minute","xAxis":[{"id":"1692330126490","datasourceId":"1691734038709071872","datasetTableId":"7098147058204282880","datasetGroupId":"1692381412250939392","chartId":null,"originName":"月","name":"月","dbFieldName":null,"description":null,"dataeaseName":"f_dd62e53a9192cdf4","groupType":"d","type":"ANY","precision":null,"scale":null,"deType":0,"deExtractType":0,"extField":0,"checked":true,"columnIndex":null,"lastSyncTime":null,"dateFormat":null,"dateFormatType":null,"fieldShortName":"f_dd62e53a9192cdf4","summary":null,"sort":"none","dateStyle":"y_M_d","datePattern":"date_sub","chartType":null,"compareCalc":null,"logic":null,"filterType":null,"index":null,"formatterCfg":null,"chartShowName":null,"filter":[],"customSort":null,"busiType":null},{"id":"1692330126489","datasourceId":"1691734038709071872","datasetTableId":"7098147058204282880","datasetGroupId":"1692381412250939392","chartId":null,"originName":"年份","name":"年份","dbFieldName":null,"description":null,"dataeaseName":"f_190480c43bdda8df","groupType":"q","type":"BIGINT","precision":null,"scale":null,"deType":2,"deExtractType":2,"extField":0,"checked":true,"columnIndex":null,"lastSyncTime":null,"dateFormat":null,"dateFormatType":null,"fieldShortName":"f_190480c43bdda8df","summary":"sum","sort":"none","dateStyle":"y_M_d","datePattern":"date_sub","chartType":"bar","compareCalc":{"type":"none","resultData":"percent","field":null,"custom":null},"logic":null,"filterType":null,"index":null,"formatterCfg":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true},"chartShowName":null,"filter":[],"customSort":null,"busiType":null}],"xAxisExt":[],"yAxis":[],"yAxisExt":[],"extStack":[],"drillFields":[],"viewFields":[],"extBubble":[],"extLabel":[],"extTooltip":[],"customFilter":{},"customAttr":{"basicStyle":{"alpha":100,"tableBorderColor":"#E6E7E4","tableScrollBarColor":"#00000024","tableColumnMode":"adapt","tableColumnWidth":100,"tablePageMode":"pull","tablePageSize":20,"gaugeStyle":"default","colorScheme":"default","colors":["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"mapVendor":"amap","gradient":false,"lineWidth":2,"lineSymbol":"circle","lineSymbolSize":4,"lineSmooth":true,"barDefault":true,"barWidth":40,"barGap":0.4,"lineType":"solid","scatterSymbol":"circle","scatterSymbolSize":8,"radarShape":"polygon","mapStyle":"normal","areaBorderColor":"#303133","suspension":true,"areaBaseColor":"#FFFFFF","mapSymbolOpacity":0.7,"mapSymbolStrokeWidth":2,"mapSymbol":"circle","mapSymbolSize":20,"radius":100,"innerRadius":60},"misc":{"pieInnerRadius":0,"pieOuterRadius":80,"radarShape":"polygon","radarSize":80,"gaugeMinType":"fix","gaugeMinField":{"id":"","summary":""},"gaugeMin":0,"gaugeMaxType":"fix","gaugeMaxField":{"id":"","summary":""},"gaugeMax":100,"gaugeStartAngle":225,"gaugeEndAngle":-45,"nameFontSize":18,"valueFontSize":18,"nameValueSpace":10,"valueFontColor":"#5470c6","valueFontFamily":"Microsoft YaHei","valueFontIsBolder":false,"valueFontIsItalic":false,"valueLetterSpace":0,"valueFontShadow":false,"showName":true,"nameFontColor":"#000000","nameFontFamily":"Microsoft YaHei","nameFontIsBolder":false,"nameFontIsItalic":false,"nameLetterSpace":"0","nameFontShadow":false,"treemapWidth":80,"treemapHeight":80,"liquidMax":100,"liquidMaxType":"fix","liquidMaxField":{"id":"","summary":""},"liquidSize":80,"liquidShape":"circle","hPosition":"center","vPosition":"center","mapPitch":0,"mapLineType":"arc","mapLineWidth":1,"mapLineAnimateDuration":3,"mapLineGradient":false,"mapLineSourceColor":"#146C94","mapLineTargetColor":"#576CBC"},"label":{"show":false,"position":"top","color":"#000000","fontSize":10,"formatter":"","labelLine":{"show":true},"labelFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true},"reserveDecimalCount":2,"labelShadow":false,"labelBgColor":"","labelShadowColor":"","quotaLabelFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true},"showDimension":true,"showQuota":false,"showProportion":true,"seriesLabelFormatter":[]},"tooltip":{"show":true,"trigger":"item","confine":true,"fontSize":10,"color":"#000000","tooltipFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true},"backgroundColor":"#FFFFFF","seriesTooltipFormatter":[]},"tableTotal":{"row":{"showGrandTotals":true,"showSubTotals":true,"reverseLayout":false,"reverseSubLayout":false,"label":"总计","subLabel":"小计","subTotalsDimensions":[],"calcTotals":{"aggregation":"SUM"},"calcSubTotals":{"aggregation":"SUM"},"totalSort":"none","totalSortField":""},"col":{"showGrandTotals":true,"showSubTotals":true,"reverseLayout":false,"reverseSubLayout":false,"label":"总计","subLabel":"小计","subTotalsDimensions":[],"calcTotals":{"aggregation":"SUM"},"calcSubTotals":{"aggregation":"SUM"},"totalSort":"none","totalSortField":""}},"tableHeader":{"indexLabel":"序号","showIndex":false,"tableHeaderAlign":"left","tableHeaderBgColor":"#F5F6F7","tableHeaderFontColor":"#646A73","tableTitleFontSize":14,"tableTitleHeight":36},"tableCell":{"tableFontColor":"#1F2329","tableItemAlign":"right","tableItemBgColor":"#FFFFFF","tableItemFontSize":14,"tableItemHeight":36},"map":{"id":"","level":"world"}},"customStyle":{"text":{"show":false,"fontSize":"18","hPosition":"left","vPosition":"top","isItalic":false,"isBolder":true,"remarkShow":false,"remark":"","fontFamily":"Microsoft YaHei","letterSpace":"0","fontShadow":false,"color":"#000000","remarkBackgroundColor":"#ffffff"},"legend":{"show":true,"hPosition":"center","vPosition":"bottom","orient":"horizontal","icon":"circle","color":"#000000","fontSize":12},"xAxis":{"show":true,"position":"bottom","name":"","color":"#000000","fontSize":12,"axisLabel":{"show":true,"color":"#000000","fontSize":12,"rotate":0,"formatter":"{value}"},"axisLine":{"show":true,"lineStyle":{"color":"#cccccc","width":1,"style":"solid"}},"splitLine":{"show":false,"lineStyle":{"color":"#CCCCCC","width":1,"style":"solid"}},"axisValue":{"auto":true,"min":10,"max":100,"split":10,"splitCount":10},"axisLabelFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true}},"yAxis":{"show":true,"position":"left","name":"","color":"#000000","fontSize":12,"axisLabel":{"show":true,"color":"#000000","fontSize":12,"rotate":0,"formatter":"{value}"},"axisLine":{"show":false,"lineStyle":{"color":"#cccccc","width":1,"style":"solid"}},"splitLine":{"show":true,"lineStyle":{"color":"#CCCCCC","width":1,"style":"solid"}},"axisValue":{"auto":true,"min":10,"max":100,"split":10,"splitCount":10},"axisLabelFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true}},"yAxisExt":{"show":true,"position":"right","name":"","color":"#000000","fontSize":12,"axisLabel":{"show":true,"color":"#000000","fontSize":12,"rotate":0,"formatter":"{value}"},"axisLine":{"show":false,"lineStyle":{"color":"#cccccc","width":1,"style":"solid"}},"splitLine":{"show":true,"lineStyle":{"color":"#CCCCCC","width":1,"style":"solid"}},"axisValue":{"auto":true,"min":null,"max":null,"split":null,"splitCount":null},"axisLabelFormatter":{"type":"auto","unit":1,"suffix":"","decimalCount":2,"thousandSeparator":true}},"misc":{"showName":false,"color":"#000000","fontSize":12,"axisColor":"#999","splitNumber":5,"axisLine":{"show":true,"lineStyle":{"color":"#CCCCCC","width":1,"type":"solid"}},"axisTick":{"show":false,"length":5,"lineStyle":{"color":"#000000","width":1,"type":"solid"}},"axisLabel":{"show":false,"rotate":0,"margin":8,"color":"#000000","fontSize":"12","formatter":"{value}"},"splitLine":{"show":true,"lineStyle":{"color":"#CCCCCC","width":1,"type":"solid"}},"splitArea":{"show":true}}},"senior":{"functionCfg":{"sliderShow":false,"sliderRange":[0,10],"sliderBg":"#FFFFFF","sliderFillBg":"#BCD6F1","sliderTextColor":"#999999","emptyDataStrategy":"breakLine","emptyDataFieldCtrl":[]},"assistLine":[],"threshold":{"gaugeThreshold":"","labelThreshold":[],"tableThreshold":[],"textLabelThreshold":[]},"scrollCfg":{"open":false,"row":1,"interval":2000,"step":50}},"chartExtRequest":{"user":"1","filter":[],"drill":[],"resultCount":1000,"resultMode":"all"}}' @@ -25,7 +27,8 @@ export const PANEL_CHART_INFO_LIGHT = { chartCommonStyle: COMMON_COMPONENT_BACKGROUND_LIGHT, filterStyle: FILTER_COMMON_STYLE_LIGHT, tabStyle: TAB_COMMON_STYLE_LIGHT, - seniorStyleSetting: SENIOR_STYLE_SETTING_LIGHT + seniorStyleSetting: SENIOR_STYLE_SETTING_LIGHT, + formatterItem: formatterItem } export const PANEL_CHART_INFO_DARK = { @@ -34,7 +37,8 @@ export const PANEL_CHART_INFO_DARK = { chartCommonStyle: COMMON_COMPONENT_BACKGROUND_DARK, filterStyle: FILTER_COMMON_STYLE_DARK, tabStyle: TAB_COMMON_STYLE_DARK, - seniorStyleSetting: SENIOR_STYLE_SETTING_DARK + seniorStyleSetting: SENIOR_STYLE_SETTING_DARK, + formatterItem: formatterItem } export const PANEL_CHART_INFO_SCREEN_DARK = { diff --git a/core/core-frontend/src/views/chart/components/js/formatter.ts b/core/core-frontend/src/views/chart/components/js/formatter.ts index 1e4e0dc17b..d663814ccb 100644 --- a/core/core-frontend/src/views/chart/components/js/formatter.ts +++ b/core/core-frontend/src/views/chart/components/js/formatter.ts @@ -1,4 +1,4 @@ -import { find } from 'lodash-es' +import { find, merge } from 'lodash-es' import { useI18n } from '@/hooks/web/useI18n' import { getLocale } from '@/utils/utils' import { parseJson } from '@/views/chart/components/js/util' @@ -255,3 +255,65 @@ export const calcNiceMinValue = (chart, options, tmpOptions) => { } return { ...tmpOptions, ...axis } } + +/** + * 适配图表数字格式化属性 + * @param viewInfo + * @param value + */ +export const formatterViewInfo = (viewInfo, value) => { + viewInfo.xAxis.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.xAxisExt.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.yAxis.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.extStack.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.extBubble.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.extLabel.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + viewInfo.extTooltip.forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + //customAttr + viewInfo['customAttr']['label']['labelFormatter'] = merge( + viewInfo['customAttr']['label']['labelFormatter'], + value + ) + viewInfo['customAttr']['label']['quotaLabelFormatter'] = merge( + viewInfo['customAttr']['label']['quotaLabelFormatter'], + value + ) + viewInfo['customAttr']['label']['totalFormatter'] = merge( + viewInfo['customAttr']['label']['totalFormatter'], + value + ) + viewInfo['customAttr']['tooltip']['tooltipFormatter'] = merge( + viewInfo['customAttr']['tooltip']['tooltipFormatter'], + value + ) + viewInfo['customAttr']['tooltip']['seriesTooltipFormatter'].forEach(function (item) { + item['formatterCfg'] = merge(item['formatterCfg'], value) + }) + //customStyle + viewInfo['customStyle']['xAxis']['axisLabelFormatter'] = merge( + viewInfo['customStyle']['xAxis']['axisLabelFormatter'], + value + ) + viewInfo['customStyle']['yAxis']['axisLabelFormatter'] = merge( + viewInfo['customStyle']['yAxis']['axisLabelFormatter'], + value + ) + viewInfo['customStyle']['yAxisExt']['axisLabelFormatter'] = merge( + viewInfo['customStyle']['yAxisExt']['axisLabelFormatter'], + value + ) +}