From ddf7207fc4326d418b9983084c4310c19d057847 Mon Sep 17 00:00:00 2001 From: ulleo Date: Thu, 9 Nov 2023 10:57:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20antv=E7=BB=84=E5=90=88=E5=9B=BE?= =?UTF-8?q?=E6=8F=92=E4=BB=B6=20=E9=A2=9C=E8=89=B2=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B8=90=E5=8F=98=E4=B8=8E=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shapeAttr/ColorSelector.vue | 1 - .../src/components/selector/ColorSelector.vue | 15 ++++++++--- .../src/utils/chartmix.js | 6 +++++ .../src/views/antv/chartmix/index.vue | 26 +++++++++++++++---- 4 files changed, 39 insertions(+), 9 deletions(-) diff --git a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue index df0d5314a6..d67d0dfa8f 100644 --- a/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue +++ b/core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue @@ -120,7 +120,6 @@ v-show="showProperty('customColor')" class="custom-color-style" > - aaa
+ + + - +
+ + diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue deleted file mode 100644 index 7ca0b08909..0000000000 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue +++ /dev/null @@ -1,130 +0,0 @@ - - - - - diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js index 6030857ca0..5945fdf986 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js @@ -12,53 +12,14 @@ export const DEFAULT_COLOR_CASE = { } export const DEFAULT_SIZE = { barDefault: true, - barWidth: 40, - barGap: 0.4, + barWidthPercent: 50, lineWidth: 2, lineType: 'solid', - lineSymbol: 'marker', + lineSymbol: 'circle', lineSymbolSize: 4, lineSmooth: true, - lineArea: false, - pieInnerRadius: 0, - pieOuterRadius: 80, - pieRoseType: 'radius', - pieRoseRadius: 5, - funnelWidth: 80, - radarShape: 'polygon', - radarSize: 80, - tableTitleFontSize: 12, - tableItemFontSize: 12, - tableTitleHeight: 36, - tableItemHeight: 36, - tablePageSize: '20', - tableColumnMode: 'custom', - tableColumnWidth: 100, - tableHeaderAlign: 'left', - tableItemAlign: 'right', - gaugeMin: 0, - gaugeMax: 100, - gaugeStartAngle: 225, - gaugeEndAngle: -45, - dimensionFontSize: 18, - quotaFontSize: 18, - spaceSplit: 10, - dimensionShow: true, - quotaShow: true, - scatterSymbol: 'marker', + scatterSymbol: 'circle', scatterSymbolSize: 15, - symbolOpacity: 5, - symbolStrokeWidth: 1, - treemapWidth: 80, - treemapHeight: 80, - liquidMax: 100, - liquidSize: 80, - liquidOutlineBorder: 4, - liquidOutlineDistance: 8, - liquidWaveLength: 128, - liquidWaveCount: 3, - liquidShape: 'circle', - tablePageMode: 'page' } export const COLOR_PANEL = [ '#ff4500', @@ -73,6 +34,27 @@ export const COLOR_PANEL = [ '#FFFFFF' ] +export const CHART_FONT_FAMILY = [ + { name: '微软雅黑', value: 'Microsoft YaHei' }, + { name: '宋体', value: 'SimSun' }, + { name: '黑体', value: 'SimHei' }, + { name: '楷体', value: 'KaiTi' } +] + +export const CHART_FONT_LETTER_SPACE = [ + { name: '0px', value: '0' }, + { name: '1px', value: '1' }, + { name: '2px', value: '2' }, + { name: '3px', value: '3' }, + { name: '4px', value: '4' }, + { name: '5px', value: '5' }, + { name: '6px', value: '6' }, + { name: '7px', value: '7' }, + { name: '8px', value: '8' }, + { name: '9px', value: '9' }, + { name: '10px', value: '10' } +] + export const DEFAULT_LABEL = { show: true, position: 'middle', diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue index d09f5bd268..7124da1491 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue @@ -330,10 +330,9 @@ export default { let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined; if (color && gradient) { color = setGradientColor(color, true, 270) - console.log(color) } - return { + const setting = { type: _chartType, name: t.name, options: { @@ -362,6 +361,7 @@ export default { label: _labelSetting, } } + return this.setSizeSetting(setting); }) : []; let _dataExt = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { @@ -390,10 +390,9 @@ export default { let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined; if (color && gradient) { color = setGradientColor(color, true, 270) - console.log(color) } - return { + const setting = { type: _chartType, name: t.name, options: { @@ -422,6 +421,7 @@ export default { label: _labelSetting, } } + return this.setSizeSetting(setting); }) : []; @@ -484,6 +484,41 @@ export default { return params; }, + setSizeSetting(setting) { + let customAttr = undefined; + if (this.chart.customAttr) { + customAttr = JSON.parse(this.chart.customAttr); + } + if (customAttr && customAttr.size) { + setting.options.columnWidthRatio = undefined; + setting.options.smooth = undefined; + setting.options.point = undefined; + setting.options.lineStyle = undefined; + setting.options.size = undefined; + setting.options.shape = undefined; + + if (setting.type === 'column' && !customAttr.size.barDefault) { + setting.options.columnWidthRatio = customAttr.size.barWidthPercent / 100.0 + } + if (setting.type === 'line') { + setting.options.smooth = customAttr.size.lineSmooth + setting.options.point = { + size: parseInt(customAttr.size.lineSymbolSize), + shape: customAttr.size.lineSymbol + } + setting.options.lineStyle = { + lineWidth: parseInt(customAttr.size.lineWidth) + } + } + if (setting.type === 'scatter') { + setting.options.size = parseInt(customAttr.size.scatterSymbolSize) + setting.options.shape = customAttr.size.scatterSymbol + } + } + + return setting; + }, + getAnalyse(chart) { let senior = {} const assistLine = [] diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue index db2e372f99..627c5eefb0 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue @@ -11,6 +11,10 @@ + + + + Date: Mon, 13 Nov 2023 15:20:03 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20AntV=20=E7=BB=84=E5=90=88=E5=9B=BE?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A8=AA=E8=BD=B4=E3=80=81=E7=BA=B5=E8=BD=B4?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #6099 --- .../selector/LegendSelectorAntV.vue | 248 +++++++++ .../src/components/selector/TitleSelector.vue | 4 + .../components/selector/TooltipSelector.vue | 4 + .../selector/TooltipSelectorAntV.vue | 4 + .../components/selector/XAxisSelectorAntV.vue | 413 +++++++++++++++ .../selector/YAxisExtSelectorAntV.vue | 473 ++++++++++++++++++ .../components/selector/YAxisSelectorAntV.vue | 473 ++++++++++++++++++ .../view-chartmix-frontend/src/utils/map.js | 112 +++-- .../src/views/antv/chartmix/index.vue | 404 ++++++++++++++- .../src/views/antv/chartmix/style.vue | 296 ++++++----- 10 files changed, 2255 insertions(+), 176 deletions(-) create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue create mode 100644 extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue new file mode 100644 index 0000000000..7a77a4fe91 --- /dev/null +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue @@ -0,0 +1,248 @@ + + + + + diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue index 938dd29c36..4796a15120 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue @@ -235,6 +235,10 @@ export default { .form-item ::v-deep .el-form-item__label{ font-size: 12px; } + +.form-item ::v-deep .el-checkbox__label { + font-size: 12px; +} .el-select-dropdown__item{ padding: 0 20px; } diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue index 2461555af5..4010193615 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue @@ -125,6 +125,10 @@ export default { .form-item ::v-deep .el-form-item__label { font-size: 12px; } + +.form-item ::v-deep .el-checkbox__label { + font-size: 12px; +} .el-select-dropdown__item{ padding: 0 20px; } diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue index 111041be39..0198b37f4f 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue @@ -206,6 +206,10 @@ export default { .form-item ::v-deep .el-form-item__label{ font-size: 12px; } + +.form-item ::v-deep .el-checkbox__label { + font-size: 12px; +} .el-select-dropdown__item{ padding: 0 20px; } diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue new file mode 100644 index 0000000000..56b459462a --- /dev/null +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue @@ -0,0 +1,413 @@ + + + + + diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue new file mode 100644 index 0000000000..e87b87317b --- /dev/null +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue @@ -0,0 +1,473 @@ + + + + + diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue new file mode 100644 index 0000000000..0dce869d04 --- /dev/null +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue @@ -0,0 +1,473 @@ + + + + + diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js index 5945fdf986..b13d0f26b7 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js @@ -388,9 +388,9 @@ export function hexColorToRGBA(hex, alpha) { } -export const DEFAULT_YAXIS_EXT_STYLE = { +export const DEFAULT_YAXIS_STYLE = { show: true, - position: 'right', + position: 'left', name: '', nameTextStyle: { color: '#333333', @@ -403,6 +403,14 @@ export const DEFAULT_YAXIS_EXT_STYLE = { rotate: 0, formatter: '{value}' }, + axisLine: { + show: false, + lineStyle: { + color: '#cccccc', + width: 1, + style: 'solid' + } + }, splitLine: { show: true, lineStyle: { @@ -417,6 +425,59 @@ export const DEFAULT_YAXIS_EXT_STYLE = { max: null, split: null, splitCount: null + }, + axisLabelFormatter: { + type: 'auto', // auto,value,percent + unit: 1, // 换算单位 + suffix: '', // 单位后缀 + decimalCount: 2, // 小数位数 + thousandSeparator: true// 千分符 + } +} +export const DEFAULT_YAXIS_EXT_STYLE = { + show: true, + position: 'right', + name: '', + nameTextStyle: { + color: '#333333', + fontSize: 12 + }, + axisLabel: { + show: true, + color: '#333333', + 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', // auto,value,percent + unit: 1, // 换算单位 + suffix: '', // 单位后缀 + decimalCount: 2, // 小数位数 + thousandSeparator: true// 千分符 } } @@ -497,53 +558,6 @@ export const DEFAULT_XAXIS_STYLE = { } } -export const DEFAULT_YAXIS_STYLE = { - show: true, - position: 'left', - name: '', - nameTextStyle: { - color: '#333333', - fontSize: 12 - }, - axisLabel: { - show: true, - color: '#333333', - 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', // auto,value,percent - unit: 1, // 换算单位 - suffix: '', // 单位后缀 - decimalCount: 2, // 小数位数 - thousandSeparator: true// 千分符 - } -} - export function transAxisPosition(chart, axis) { if (chart.type.includes('horizontal')) { switch (axis.position) { diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue index 7124da1491..2bc5a0c21c 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue @@ -37,17 +37,15 @@ import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix' import ViewTrackBar from '../../../components/views/ViewTrackBar' import {getRemark} from "../../../components/views/utils"; import { - DEFAULT_TITLE_STYLE, DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_STYLE, transAxisPosition, - getLineDash, DEFAULT_COLOR_CASE + getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE } from '../../../utils/map'; import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate'; import _ from 'lodash'; import {clear} from 'size-sensor' import {valueFormatter} from '../../../utils/formatter' -import fa from "element-ui/src/locale/lang/fa"; export default { name: 'ChartComponent', @@ -302,6 +300,12 @@ export default { } } + const xAxis = this.getXAxis(this.chart); + + const yAxis = this.getYAxis(this.chart); + + const yAxisExt = this.getYAxisExt(this.chart); + const names = []; let _data = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => { @@ -354,11 +358,10 @@ export default { alias: t.name, }, }, - yAxis: { - position: 'left', - }, color: color, label: _labelSetting, + xAxis: xAxis, + yAxis: yAxis, } } return this.setSizeSetting(setting); @@ -414,11 +417,10 @@ export default { alias: t.name, }, }, - yAxis: { - position: 'right', - }, color: color, label: _labelSetting, + xAxis: false, + yAxis: yAxisExt, } } return this.setSizeSetting(setting); @@ -481,9 +483,297 @@ export default { params.annotations = this.getAnalyse(this.chart); + params.legend = this.getLegend(this.chart); + + + console.log(params) + return params; }, + getXAxis(chart) { + let axis = {} + let customStyle + if (chart.customStyle) { + customStyle = JSON.parse(chart.customStyle) + // legend + if (customStyle.xAxis) { + const a = JSON.parse(JSON.stringify(customStyle.xAxis)) + if (a.show) { + const title = (a.name && a.name !== '') ? { + text: a.name, + style: { + fill: a.nameTextStyle.color, + fontSize: parseInt(a.nameTextStyle.fontSize) + }, + spacing: 8 + } : null + const grid = a.splitLine.show ? { + line: { + style: { + stroke: a.splitLine.lineStyle.color, + lineWidth: parseInt(a.splitLine.lineStyle.width) + } + } + } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null + const rotate = parseInt(a.axisLabel.rotate) + const label = a.axisLabel.show ? { + rotate: rotate * Math.PI / 180, + style: { + textAlign: rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center', + fill: a.axisLabel.color, + fontSize: parseInt(a.axisLabel.fontSize) + }, + formatter: function (value) { + if (chart.type.includes('horizontal')) { + if (!a.axisLabelFormatter) { + return valueFormatter(value, formatterItem) + } else { + return valueFormatter(value, a.axisLabelFormatter) + } + } else { + return value + } + } + } : null + + axis = { + position: transAxisPosition(chart, a), + title: title, + grid: grid, + label: label, + line: axisLine, + tickLine: tickLine + } + + // 轴值设置 + delete axis.minLimit + delete axis.maxLimit + delete axis.tickCount + } else { + axis = false + } + } + } + return axis + }, + + getYAxis(chart) { + let axis = {} + let customStyle + if (chart.customStyle) { + customStyle = JSON.parse(chart.customStyle) + // legend + if (customStyle.yAxis) { + const a = JSON.parse(JSON.stringify(customStyle.yAxis)) + if (a.show) { + const title = (a.name && a.name !== '') ? { + text: a.name, + style: { + fill: a.nameTextStyle.color, + fontSize: parseInt(a.nameTextStyle.fontSize) + }, + spacing: 8 + } : null + const grid = a.splitLine.show ? { + line: { + style: { + stroke: a.splitLine.lineStyle.color, + lineWidth: parseInt(a.splitLine.lineStyle.width) + } + } + } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null + const label = a.axisLabel.show ? { + rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180, + style: { + fill: a.axisLabel.color, + fontSize: parseInt(a.axisLabel.fontSize) + }, + formatter: function (value) { + if (chart.type === 'waterfall') { + return value + } else { + if (!chart.type.includes('horizontal')) { + if (!a.axisLabelFormatter) { + return valueFormatter(value, formatterItem) + } else { + return valueFormatter(value, a.axisLabelFormatter) + } + } else { + return value + } + } + } + } : null + + axis = { + position: 'left', + title: title, + grid: grid, + label: label, + line: axisLine, + tickLine: tickLine + } + + // 轴值设置 + delete axis.minLimit + delete axis.maxLimit + delete axis.tickCount + const axisValue = a.axisValue + if (axisValue && !axisValue.auto) { + const yAxisSeriesMaxList = [] + const maxList = [] + chart.data.data.forEach(ele => { + maxList.push(ele.value) + }) + yAxisSeriesMaxList.push(Math.max.apply(null, maxList)) + if (yAxisSeriesMaxList.length > 0 && !isNaN(axisValue.max)) { + const max = Math.max.apply(null, yAxisSeriesMaxList) + if (max <= parseFloat(axisValue.max)) { + axisValue.max && (axis.maxLimit = axis.max = parseFloat(axisValue.max)) + } + } + + const yAxisSeriesMinList = [] + const minList = [] + chart.data.data.forEach(ele => { + minList.push(ele.value) + }) + yAxisSeriesMinList.push(Math.min.apply(null, minList)) + if (yAxisSeriesMinList.length > 0 && !isNaN(axisValue.min)) { + const min = Math.min.apply(null, yAxisSeriesMinList) + if (min >= parseFloat(axisValue.min)) { + axisValue.min && (axis.minLimit = axis.min = parseFloat(axisValue.min)) + } + } + axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount)) + } + + } else { + axis = false + } + } + } else { + return {position: 'left'} + } + return axis + }, +// yAxisExt + getYAxisExt(chart) { + let axis = {} + let customStyle + if (chart.customStyle) { + customStyle = JSON.parse(chart.customStyle) + // legend + if (customStyle.yAxisExt) { + const a = JSON.parse(JSON.stringify(customStyle.yAxisExt)) + if (a.show) { + const title = (a.name && a.name !== '') ? { + text: a.name, + style: { + fill: a.nameTextStyle.color, + fontSize: parseInt(a.nameTextStyle.fontSize) + }, + spacing: 8 + } : null + const grid = a.splitLine.show ? { + line: { + style: { + stroke: a.splitLine.lineStyle.color, + lineWidth: parseInt(a.splitLine.lineStyle.width) + } + } + } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null + const label = a.axisLabel.show ? { + rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180, + style: { + fill: a.axisLabel.color, + fontSize: parseInt(a.axisLabel.fontSize) + }, + formatter: function (value) { + if (chart.type === 'waterfall') { + return value + } else { + if (!chart.type.includes('horizontal')) { + if (!a.axisLabelFormatter) { + return valueFormatter(value, formatterItem) + } else { + return valueFormatter(value, a.axisLabelFormatter) + } + } else { + return value + } + } + } + } : null + + axis = { + position: 'right', + title: title, + grid: grid, + label: label, + line: axisLine, + tickLine: tickLine + } + + // 轴值设置 + delete axis.minLimit + delete axis.maxLimit + delete axis.tickCount + const axisValue = a.axisValue + + if (axisValue && !axisValue.auto) { + axisValue.min && (axis.minLimit = parseFloat(axisValue.min)) + axisValue.max && (axis.maxLimit = parseFloat(axisValue.max)) + axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount)) + } + + } else { + axis = false + } + } + } else { + return {position: 'right'} + } + return axis + }, + setSizeSetting(setting) { let customAttr = undefined; if (this.chart.customAttr) { @@ -592,6 +882,102 @@ export default { return assistLine }, + getLegend(chart) { + let legend = {} + let customStyle + if (chart.customStyle) { + customStyle = JSON.parse(chart.customStyle) + // legend + if (customStyle.legend) { + const l = JSON.parse(JSON.stringify(customStyle.legend)) + if (l.show) { + let offsetX, offsetY, position + const orient = l.orient + const legendSymbol = l.icon + // fix position + if (l.hPosition === 'center') { + position = l.vPosition === 'center' ? 'top' : l.vPosition + } else if (l.vPosition === 'center') { + position = l.hPosition === 'center' ? 'left' : l.hPosition + } else { + if (orient === 'horizontal') { + position = l.vPosition + '-' + l.hPosition + } else { + position = l.hPosition + '-' + l.vPosition + } + } + // fix offset + if (orient === 'horizontal') { + if (l.hPosition === 'left') { + offsetX = 16 + } else if (l.hPosition === 'right') { + offsetX = -16 + } else { + offsetX = 0 + } + if (l.vPosition === 'top') { + offsetY = 0 + } else if (l.vPosition === 'bottom') { + if (chart.drill) { + offsetY = -16 + } else { + offsetY = -4 + } + } else { + offsetY = 0 + } + } else { + if (l.hPosition === 'left') { + offsetX = 10 + } else if (l.hPosition === 'right') { + offsetX = -10 + } else { + offsetX = 0 + } + if (l.vPosition === 'top') { + offsetY = 0 + } else if (l.vPosition === 'bottom') { + if (chart.drill) { + offsetY = -22 + } else { + offsetY = -10 + } + } else { + offsetY = 0 + } + } + + legend = { + layout: orient, + position: position, + offsetX: offsetX, + offsetY: offsetY, + marker: { + symbol: legendSymbol + }, + radio: false, // 柱状图图例的聚焦功能，默认先关掉 + itemName: { + formatter: (text, item, index) => { + if (chart.type !== 'bidirectional-bar') { + return text + } + const yaxis = JSON.parse(chart.yaxis)[0] + const yaxisExt = JSON.parse(chart.yaxisExt)[0] + if (index === 0) { + return yaxis.name + } + return yaxisExt.name + } + } + } + } else { + legend = false + } + } + } + return legend + }, + getSlider(chart) { let senior = {} let cfg = false diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue index 627c5eefb0..ffcfb6cd3d 100644 --- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue +++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue @@ -8,15 +8,15 @@ {{ $t('chart.shape_attr') }} - + - + - + - + {{ $t('chart.module_style') }} - + + + + + + + + + + + + +