center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(视图-对称条形图): 新增对称条形图

Browse Source 
https://github.com/dataease/dataease/issues/4727
This commit is contained in:
wisonic-s 2023-04-19 10:16:58 +08:00
parent b3e4dd918e
commit 9781058675
17 changed files with 465 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/main/java/io/dataease/dto/chart/AxisChartDataAntVDTO.java
View File

@ -19,4 +19,5 @@ public class AxisChartDataAntVDTO {
private String category;
private BigDecimal popSize;
private String group;
private BigDecimal extValue;
}

4
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -611,7 +611,7 @@ public class ChartViewService {
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
if (StringUtils.equalsIgnoreCase(view.getType(), "chart-mix")) {
if (StringUtils.equalsAnyIgnoreCase(view.getType(), "chart-mix","bidirectional-bar")) {
List<ChartViewFieldDTO> yAxisExt = gson.fromJson(view.getYAxisExt(), tokenType);
yAxis.addAll(yAxisExt);
}
@ -1337,6 +1337,8 @@ public class ChartViewService {
mapChart = ChartDataBuild.transMixChartDataAntV(xAxis, yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "label")) {
mapChart = ChartDataBuild.transLabelChartData(xAxis, yAxis, view, data, isDrill);
} else if (StringUtils.containsIgnoreCase(view.getType(), "bidirectional-bar")) {
mapChart = ChartDataBuild.transBidirectionalBarData(xAxis, yAxis, view, data, isDrill);
} else {
mapChart = ChartDataBuild.transChartDataAntV(xAxis, yAxis, view, data, isDrill);
}

59
backend/src/main/java/io/dataease/service/chart/util/ChartDataBuild.java
View File

@ -1199,4 +1199,63 @@ public class ChartDataBuild {
return map;
}
}
public static Map<String, Object> transBidirectionalBarData(List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> yAxis, ChartViewDTO view, List<String[]> data, boolean isDrill) {
Map<String, Object> map = new HashMap<>();
List<AxisChartDataAntVDTO> dataList = new ArrayList<>();
for (int i1 = 0; i1 < data.size(); i1++) {
String[] row = data.get(i1);
StringBuilder a = new StringBuilder();
if (isDrill) {
a.append(row[xAxis.size() - 1]);
} else {
for (int i = 0; i < xAxis.size(); i++) {
if (i == xAxis.size() - 1) {
a.append(row[i]);
} else {
a.append(row[i]).append("\n");
}
}
}
AxisChartDataAntVDTO axisChartDataDTO = new AxisChartDataAntVDTO();
axisChartDataDTO.setField(a.toString());
axisChartDataDTO.setName(a.toString());
List<ChartDimensionDTO> dimensionList = new ArrayList<>();
for (int j = 0; j < xAxis.size(); j++) {
ChartDimensionDTO chartDimensionDTO = new ChartDimensionDTO();
chartDimensionDTO.setId(xAxis.get(j).getId());
chartDimensionDTO.setValue(row[j]);
dimensionList.add(chartDimensionDTO);
}
axisChartDataDTO.setDimensionList(dimensionList);
for (int i = xAxis.size(); i < xAxis.size() + yAxis.size(); i++) {
List<ChartQuotaDTO> quotaList = new ArrayList<>();
int j = i - xAxis.size();
ChartQuotaDTO chartQuotaDTO = new ChartQuotaDTO();
chartQuotaDTO.setId(yAxis.get(j).getId());
quotaList.add(chartQuotaDTO);
axisChartDataDTO.setQuotaList(quotaList);
}
if (yAxis.size() == 2){
try {
axisChartDataDTO.setValue(StringUtils.isEmpty(row[xAxis.size()]) ? null : new BigDecimal(row[xAxis.size()]));
} catch (Exception e) {
axisChartDataDTO.setValue(new BigDecimal(0));
}
try {
axisChartDataDTO.setExtValue(StringUtils.isEmpty(row[xAxis.size() + yAxis.size() - 1]) ? null : new BigDecimal(row[xAxis.size() + yAxis.size() - 1]));
} catch (Exception e) {
axisChartDataDTO.setExtValue(new BigDecimal(0));
}
dataList.add(axisChartDataDTO);
}
}
map.put("data", dataList);
return map;
}
}

10
frontend/src/components/canvas/components/editor/SettingMenu.vue
View File

@ -192,7 +192,8 @@ export default {
'gauge',
'text',
'label',
'word-cloud'
'word-cloud',
'flow-map'
],
linkageExcludeViewType: [
'richTextView',
@ -200,7 +201,8 @@ export default {
'gauge',
'text',
'label',
'word-cloud'
'word-cloud',
'flow-map'
],
copyData: null,
hyperlinksSetVisible: false,
@ -218,12 +220,12 @@ export default {
linkJumpSetShow() {
return this.curComponent.type === 'view' &&
!this.jumpExcludeViewType.includes(this.curComponent.propValue.innerType) &&
!(this.curComponent.propValue.innerType && this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
!(this.curComponent.propValue.innerType?.includes('table') && this.curComponent.propValue.render === 'echarts')
},
linkageSettingShow() {
return this.curComponent.type === 'view' &&
!this.linkageExcludeViewType.includes(this.curComponent.propValue.innerType) &&
!(this.curComponent.propValue.innerType && this.curComponent.propValue.innerType.includes('table') && this.curComponent.propValue.render === 'echarts')
!(this.curComponent.propValue.innerType?.includes('table') && this.curComponent.propValue.render === 'echarts')
},
panelInfo() {
return this.$store.state.panel.panelInfo

1
frontend/src/icons/svg/bidirectional-bar.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1680772592602" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1804" width="200" height="200"><path d="M488.704 139.636364h23.272727v744.727272h-23.272727z" opacity=".502" p-id="1805"></path><path d="M977.454545 139.636364a46.545455 46.545455 0 0 1 46.545455 46.545454v93.090909a46.545455 46.545455 0 0 1-46.545455 46.545455H605.090909a46.545455 46.545455 0 0 1-46.545454-46.545455V186.181818a46.545455 46.545455 0 0 1 46.545454-46.545454h372.363636zM395.636364 139.636364a46.545455 46.545455 0 0 1 46.545454 46.545454v93.090909a46.545455 46.545455 0 0 1-46.545454 46.545455H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545455V186.181818a46.545455 46.545455 0 0 1 46.545455-46.545454h349.090909z" p-id="1806"></path><path d="M395.636364 884.363636h-139.636364a46.545455 46.545455 0 0 1-46.545455-46.545454v-93.090909a46.545455 46.545455 0 0 1 46.545455-46.545455h139.636364a46.545455 46.545455 0 0 1 46.545454 46.545455v93.090909a46.545455 46.545455 0 0 1-46.545454 46.545454zM395.636364 605.090909H116.363636a46.545455 46.545455 0 0 1-46.545454-46.545454v-93.09091a46.545455 46.545455 0 0 1 46.545454-46.545454h279.272728a46.545455 46.545455 0 0 1 46.545454 46.545454v93.09091a46.545455 46.545455 0 0 1-46.545454 46.545454zM605.090909 418.909091h279.272727a46.545455 46.545455 0 0 1 46.545455 46.545454v93.09091a46.545455 46.545455 0 0 1-46.545455 46.545454H605.090909a46.545455 46.545455 0 0 1-46.545454-46.545454v-93.09091a46.545455 46.545455 0 0 1 46.545454-46.545454zM605.090909 698.181818h139.636364a46.545455 46.545455 0 0 1 46.545454 46.545455v93.090909a46.545455 46.545455 0 0 1-46.545454 46.545454h-139.636364a46.545455 46.545455 0 0 1-46.545454-46.545454v-93.090909a46.545455 46.545455 0 0 1 46.545454-46.545455z" p-id="1807"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
frontend/src/lang/en.js
View File

@ -1169,6 +1169,7 @@ export default {
chart_bar_horizontal: 'Horizontal Bar',
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
chart_bidirectional_bar: 'Bidirectional Bar',
chart_line: 'Base Line',
chart_line_stack: 'Stack Line',
chart_pie: 'Pie',

1
frontend/src/lang/tw.js
View File

@ -1168,6 +1168,7 @@ export default {
chart_bar_horizontal: '橫嚮柱狀圖',
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
chart_bidirectional_bar: '對稱柱狀圖',
chart_line: '基礎摺線圖',
chart_line_stack: '堆疊摺線圖',
chart_pie: '餅圖',

3
frontend/src/lang/zh.js
View File

@ -1,5 +1,3 @@
import { $confirm } from '@/utils/message'
export default {
fu: {
search_bar: {
@ -1169,6 +1167,7 @@ export default {
chart_bar_horizontal: '横向柱状图',
chart_bar_stack_horizontal: '横向堆叠柱状图',
chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
chart_bidirectional_bar: '对称柱状图',
chart_line: '基础折线图',
chart_line_stack: '堆叠折线图',
chart_pie: '饼图',

109
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -1,4 +1,4 @@
import { Column, Bar } from '@antv/g2plot'
import { Column, Bar, BidirectionalBar } from '@antv/g2plot'
import {
getTheme,
getLabel,
@ -240,3 +240,110 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
return plot
}
export function baseBidirectionalBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
const theme = getTheme(chart)
// attr
const label = getLabel(chart)
const tooltip = getTooltip(chart)
// style
const legend = getLegend(chart)
const xAxis = getXAxis(chart)
const yAxis = getYAxis(chart)
// data
const data = _.cloneDeep(chart.data.data)
// options
const options = {
theme: theme,
data: data,
xField: 'field',
yField: ['value', 'extValue'],
appendPadding: getPadding(chart),
label: label,
tooltip: tooltip,
legend: legend,
xAxis: xAxis,
yAxis: {
value: yAxis,
extValue: yAxis
},
interactions: [
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
}
},
{
type: 'legend-filter', cfg: {
start: [{ trigger: 'legend-item:click', action: ['list-unchecked:toggle', 'data-filter:filter', 'element-active:reset', 'element-highlight:reset'] }]
}
},
{
type: 'tooltip', cfg: {
start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'tooltip:hide' }]
}
},
{
type: 'active-region', cfg: {
start: [{ trigger: 'interval:mousemove', action: 'active-region:show' }],
end: [{ trigger: 'interval:mouseleave', action: 'active-region:hide' }]
}
}
]
}
// size
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (customAttr.size) {
const s = JSON.parse(JSON.stringify(customAttr.size))
if (s.barDefault) {
delete options.marginRatio
} else {
options.marginRatio = s.barGap
}
}
}
// group
if (isGroup) {
options.isGroup = true
} else {
delete options.isGroup
}
// stack
if (isStack) {
options.isStack = true
} else {
delete options.isStack
}
options.isPercent = chart.type.includes('percentage')
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele, index) => {
return setGradientColor(ele, customAttr.color.gradient, 180 - index * 180)
})
}
// 处理空值
if (chart.senior) {
let emptyDataStrategy = JSON.parse(chart.senior)?.functionCfg?.emptyDataStrategy
if (!emptyDataStrategy) {
emptyDataStrategy = 'breakLine'
}
handleEmptyDataStrategy(emptyDataStrategy, chart, data, options)
}
// 开始渲染
if (plot) {
plot.destroy()
}
plot = new BidirectionalBar(container, options)
plot.off('interval:click')
plot.on('interval:click', action)
return plot
}

37
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -200,6 +200,17 @@ export function getLabel(chart) {
f.formatterCfg.thousandSeparator = false
}
res = valueFormatter(param.value, f.formatterCfg)
} else if (chart.type === 'bidirectional-bar') {
let yaxis = yAxis[0]
if (param['series-field-key'] === 'extValue') {
yaxis = JSON.parse(chart.yaxisExt)[0]
}
const value = param[param['series-field-key']]
if (yaxis.formatterCfg) {
res = valueFormatter(value, yaxis.formatterCfg)
} else {
res = valueFormatter(value, formatterItem)
}
} else if (equalsAny(chart.type, 'bar-group')) {
const f = yAxis[0]
if (f.formatterCfg) {
@ -344,6 +355,17 @@ export function getTooltip(chart) {
res = valueFormatter(param.value, formatterItem)
}
}
} else if (chart.type === 'bidirectional-bar') {
let yaxis = yAxis[0]
if (param['series-field-key'] === 'extValue') {
yaxis = JSON.parse(chart.yaxisExt)[0]
}
obj = { name: yaxis.name, value: param[param['series-field-key']] }
if (yaxis.formatterCfg) {
res = valueFormatter(obj.value, yaxis.formatterCfg)
} else {
res = valueFormatter(obj.value, formatterItem)
}
} else if (chart.type.includes('treemap')) {
obj = { name: param.name, value: param.value }
for (let i = 0; i < yAxis.length; i++) {
@ -506,7 +528,20 @@ export function getLegend(chart) {
marker: {
symbol: legendSymbol
},
radio: false // 柱状图图例的聚焦功能，默认先关掉
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

94
frontend/src/views/chart/chart/util.js
View File

@ -1546,6 +1546,81 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bidirectional-bar',
title: 'chart.chart_bidirectional_bar',
icon: 'bidirectional-bar',
properties: [
'color-selector',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
],
propertyInner: {
'color-selector': [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'label-selector-ant-v': [
'show',
'fontSize',
'color',
'position-h'
],
'tooltip-selector-ant-v': [
'show',
'textStyle'
],
'x-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'splitLine',
'axisForm',
'axisLabel'
],
'y-axis-selector-ant-v': [
'show',
'position',
'name',
'nameTextStyle',
'axisValue',
'splitLine',
'axisForm',
'axisLabel'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
'icon',
'orient',
'textStyle',
'hPosition',
'vPosition'
]
}
},
{
render: 'antv',
@ -1856,7 +1931,7 @@ export const TYPE_CONFIGS = [
'mapLineAnimate',
'mapLineAnimateDuration',
'mapLineAnimateInterval',
'mapLineAnimateTrailLength',
'mapLineAnimateTrailLength'
],
'title-selector-ant-v': [
'show',
@ -3349,6 +3424,23 @@ export function getColors(chart, colors, reset) {
})
}
}
} else if (chart.type === 'bidirectional-bar') {
const yaxis = JSON.parse(chart.yaxis)[0]
const yaxisExt = JSON.parse(chart.yaxisExt)[0]
if (yaxis) {
seriesColors.push({
name: yaxis.name,
color: colors[0],
isCustom: false
})
}
if (yaxisExt) {
seriesColors.push({
name: yaxisExt.name,
color: colors[1],
isCustom: false
})
}
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))

4
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -43,7 +43,7 @@ import { baseLiquid } from '@/views/chart/chart/liquid/liquid'
import { uuid } from 'vue-uuid'
import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar'
import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
import { baseBarOptionAntV, hBaseBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
import { baseBarOptionAntV, hBaseBarOptionAntV, baseBidirectionalBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
import { baseAreaOptionAntV, baseLineOptionAntV } from '@/views/chart/chart/line/line_antv'
import { basePieOptionAntV, basePieRoseOptionAntV } from '@/views/chart/chart/pie/pie_antv'
import { baseScatterOptionAntV } from '@/views/chart/chart/scatter/scatter_antv'
@ -277,6 +277,8 @@ export default {
this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'flow-map') {
this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'bidirectional-bar') {
this.myChart = baseBidirectionalBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else {
if (this.myChart) {
this.antVRenderStatus = false

10
frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue
View File

@ -28,8 +28,14 @@
size="mini"
@change="changeXAxisStyle('position')"
>
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
<div v-if="chart.type !== 'bidirectional-bar'">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bidirectional-bar'">
<el-radio-button label="top">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_center') }}</el-radio-button>
</div>
</el-radio-group>
</el-form-item>
<el-form-item

10
frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue
View File

@ -28,8 +28,14 @@
size="mini"
@change="changeYAxisStyle('position')"
>
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
<div v-if="chart.type !== 'bidirectional-bar'">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</div>
<div v-else-if="chart.type === 'bidirectional-bar'">
<el-radio-button label="right">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="left">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</div>
</el-radio-group>
</el-form-item>
<el-form-item

133
frontend/src/views/chart/components/senior/FunctionCfg.vue
View File

@ -7,68 +7,70 @@
label-width="80px"
size="mini"
>
<div v-if="showSlider">
<el-form-item
:label="$t('chart.slider')"
class="form-item"
>
<el-checkbox
v-model="functionForm.sliderShow"
@change="changeFunctionCfg"
>{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_range')+'(%)'"
class="form-item form-item-slider"
>
<el-slider
v-model="functionForm.sliderRange"
style="width: 90%"
:min="0"
:max="100"
input-size="mini"
range
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_bg')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderBg"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_fill_bg')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderFillBg"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_text_color')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderTextClolor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
</div>
<el-form-item
:label="$t('chart.slider')"
class="form-item"
>
<el-checkbox
v-model="functionForm.sliderShow"
@change="changeFunctionCfg"
>{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_range')+'(%)'"
class="form-item form-item-slider"
>
<el-slider
v-model="functionForm.sliderRange"
style="width: 90%"
:min="0"
:max="100"
input-size="mini"
range
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_bg')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderBg"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_fill_bg')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderFillBg"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="functionForm.sliderShow"
:label="$t('chart.slider_text_color')"
class="form-item"
>
<el-color-picker
v-model="functionForm.sliderTextClolor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeFunctionCfg"
/>
</el-form-item>
<el-form-item
v-show="chart.render === 'antv' && (chart.type.includes('line') || chart.type.includes('bar') || chart.type.includes('area'))"
v-show="showEmptyStrategy"
:label="$t('chart.empty_data_strategy')"
class="form-item"
>
@ -88,6 +90,7 @@
<script>
import { DEFAULT_FUNCTION_CFG, COLOR_PANEL } from '../../chart/chart'
import { includesAny } from '@/utils/StringUtils'
export default {
name: 'FunctionCfg',
@ -103,6 +106,14 @@ export default {
predefineColors: COLOR_PANEL
}
},
computed: {
showSlider() {
return this.chart.type !== 'bidirectional-bar'
},
showEmptyStrategy() {
return this.chart.render === 'antv' && includesAny(this.chart.type, 'line', 'bar', 'area')
}
},
watch: {
'chart': {
handler: function() {

60
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -782,7 +782,7 @@
</el-row>
<!--yAxisExt-->
<el-row
v-if="view.type && view.type === 'chart-mix'"
v-if="equalsAny(view.type , 'chart-mix', 'bidirectional-bar')"
class="padding-lr"
style="margin-top: 6px;"
>
@ -1088,12 +1088,12 @@
>
<el-row class="view-panel">
<div
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
v-if="showCfg"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
>
<el-row
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type === 'table-normal' || view.type === 'table-info')"
v-if="showSeniorCfg"
>
<span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
<el-collapse
@ -1101,7 +1101,7 @@
class="style-collapse"
>
<el-collapse-item
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
v-if="showFunctionCfg"
name="function"
:title="$t('chart.function_cfg')"
>
@ -1113,7 +1113,7 @@
/>
</el-collapse-item>
<el-collapse-item
v-if="view.type && (view.type === 'table-normal' || view.type === 'table-info')"
v-if="showScrollCfg"
name="scroll"
:title="$t('chart.scroll_cfg')"
>
@ -1127,7 +1127,7 @@
</el-collapse>
</el-row>
<el-row
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
v-if="showAnalyseCfg"
>
<span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
<el-collapse
@ -1135,7 +1135,7 @@
class="style-collapse"
>
<el-collapse-item
v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('area') || view.type.includes('mix'))"
v-if="showAssistLineCfg"
name="analyse"
:title="$t('chart.assist_line')"
>
@ -1148,7 +1148,7 @@
/>
</el-collapse-item>
<el-collapse-item
v-if="view.type && (view.type.includes('gauge') || view.type === 'text' || view.type === 'label' || (view.render === 'antv' && view.type.includes('table')))"
v-if="showThresholdCfg"
name="threshold"
:title="$t('chart.threshold')"
>
@ -1162,7 +1162,9 @@
</el-collapse>
</el-row>
<el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">
<el-row
v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')"
>
<span
v-if="false"
@ -1954,11 +1956,43 @@ export default {
panelInfo() {
return this.$store.state.panel.panelInfo
},
showCfg() {
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'gauge', 'table') ||
equalsAny(this.view.type, 'text', 'label', 'map', 'buddle-map')
},
showSeniorCfg() {
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix') ||
equalsAny(this.view.type, 'table-normal', 'table-info')
},
showFunctionCfg() {
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix')
},
showScrollCfg() {
return equalsAny(this.view.type, 'table-normal', 'table-info')
},
showAnalyseCfg() {
if (this.view.type === 'bidirectional-bar') {
return false
}
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'gauge') ||
equalsAny(this.view.type, 'text', 'label') ||
(this.view.render === 'antv' && this.view.type.includes('table'))
},
showAssistLineCfg() {
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix')
},
showThresholdCfg() {
if (this.view.type === 'bidirectional-bar') {
return false
}
return includesAny(this.view.type, 'gauge') ||
equalsAny(this.view.type, 'text', 'label') ||
(this.view.render === 'antv' && this.view.type.includes('table'))
},
...mapState([
'curComponent',
'panelViewEditInfo',
'allViewRender'
])
},
watch: {
@ -2276,7 +2310,7 @@ export default {
ele.compareCalc = compareItem
}
})
if (view.type === 'chart-mix') {
if (equalsAny(view.type, 'chart-mix', 'bidirectional-bar')) {
view.yaxisExt.forEach(function(ele) {
if (!ele.chartType) {
ele.chartType = 'bar'
@ -3029,7 +3063,7 @@ export default {
addYaxis(e) {
this.dragCheckType(this.view.yaxis, 'q')
this.dragMoveDuplicate(this.view.yaxis, e)
if ((this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
if ((equalsAny(this.view.type, 'waterfall', 'word-cloud', 'bidirectional-bar') || this.view.type.includes('group')) && this.view.yaxis.length > 1) {
this.view.yaxis = [this.view.yaxis[0]]
}
this.calcData(true)
@ -3037,7 +3071,7 @@ export default {
addYaxisExt(e) {
this.dragCheckType(this.view.yaxisExt, 'q')
this.dragMoveDuplicate(this.view.yaxisExt, e)
if (this.view.type === 'map' && this.view.yaxisExt.length > 1) {
if (equalsAny(this.view.type, 'map', 'bidirectional-bar') && this.view.yaxisExt.length > 1) {
this.view.yaxisExt = [this.view.yaxisExt[0]]
}
this.calcData(true)

19
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -152,7 +152,7 @@
<el-collapse-item
v-show="showPropertiesCollapse(['x-axis-selector', 'x-axis-selector-ant-v'])"
name="xAxis"
:title="$t('chart.xAxis')"
:title="xAisTitle"
>
<x-axis-selector
v-if="showProperties('x-axis-selector')"
@ -174,7 +174,7 @@
<el-collapse-item
v-show="showPropertiesCollapse(['y-axis-selector', 'y-axis-selector-ant-v'])"
name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
:title="yAxisTitle"
>
<y-axis-selector
v-if="showProperties('y-axis-selector')"
@ -470,6 +470,21 @@ export default {
}
return false
},
xAisTitle() {
if (this.chart.type === 'bidirectional-bar') {
return this.$t('chart.yAxis')
}
return this.$t('chart.xAxis')
},
yAxisTitle() {
if (this.chart.type === 'bidirectional-bar') {
return this.$t('chart.xAxis')
}
if (this.chart.type === 'chart-mix') {
return this.$t('chart.yAxis_main')
}
return this.$t('chart.yAxis')
},
...mapState([
'batchOptStatus'
])