forked from github/dataease
feat: AntV时间条形图
This commit is contained in:
parent
c4664243c2
commit
4bafcaeb97
@ -636,7 +636,9 @@ public class ChartViewService {
|
||||
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|
||||
|| StringUtils.containsIgnoreCase(view.getType(), "group")
|
||||
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
|
||||
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
|
||||
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")
|
||||
|| StringUtils.equalsIgnoreCase(view.getType(), "bar-time-range")
|
||||
) {
|
||||
xAxis.addAll(xAxisExt);
|
||||
}
|
||||
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
|
||||
@ -1421,6 +1423,8 @@ public class ChartViewService {
|
||||
mapChart = ChartDataBuild.transBaseGroupDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, view, data, isDrill);
|
||||
} else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-group-stack")) {
|
||||
mapChart = ChartDataBuild.transGroupStackDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
|
||||
} else if (StringUtils.equalsIgnoreCase(view.getType(), "bar-time-range")) {
|
||||
mapChart = ChartDataBuild.transTimeBarDataAntV(xAxisBase, xAxis, xAxisExt, yAxis, extStack, data, view, isDrill);
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "bar-stack")) {
|
||||
mapChart = ChartDataBuild.transStackChartDataAntV(xAxis, yAxis, view, data, extStack, isDrill);
|
||||
} else if (StringUtils.containsIgnoreCase(view.getType(), "line-stack")) {
|
||||
|
@ -11,6 +11,7 @@ import org.apache.commons.lang3.StringUtils;
|
||||
|
||||
import java.math.BigDecimal;
|
||||
import java.math.RoundingMode;
|
||||
import java.text.SimpleDateFormat;
|
||||
import java.util.*;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
@ -1282,6 +1283,120 @@ public class ChartDataBuild {
|
||||
}
|
||||
}
|
||||
|
||||
private static String getDateFormat(String dateStyle, String datePattern) {
|
||||
String split;
|
||||
if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
|
||||
split = "/";
|
||||
} else {
|
||||
split = "-";
|
||||
}
|
||||
switch (dateStyle) {
|
||||
case "y":
|
||||
return "yyyy";
|
||||
case "y_M":
|
||||
return "yyyy" + split + "MM";
|
||||
case "y_M_d":
|
||||
return "yyyy" + split + "MM" + split + "dd";
|
||||
case "H_m_s":
|
||||
return "HH:mm:ss";
|
||||
case "y_M_d_H":
|
||||
return "yyyy" + split + "MM" + split + "dd" + " HH";
|
||||
case "y_M_d_H_m":
|
||||
return "yyyy" + split + "MM" + split + "dd" + " HH:mm";
|
||||
case "y_M_d_H_m_s":
|
||||
return "yyyy" + split + "MM" + split + "dd" + " HH:mm:ss";
|
||||
default:
|
||||
return "yyyy-MM-dd HH:mm:ss";
|
||||
}
|
||||
}
|
||||
|
||||
public static Map<String, Object> transTimeBarDataAntV(List<ChartViewFieldDTO> xAxisBase, List<ChartViewFieldDTO> xAxis, List<ChartViewFieldDTO> xAxisExt, List<ChartViewFieldDTO> yAxis, List<ChartViewFieldDTO> extStack, List<String[]> data, ChartViewWithBLOBs view, boolean isDrill) {
|
||||
|
||||
Map<String, Object> map = new HashMap<>();
|
||||
if (CollectionUtils.isEmpty(xAxisBase) || CollectionUtils.isEmpty(xAxisExt) || xAxisExt.size() < 2) {
|
||||
map.put("data", new ArrayList<>());
|
||||
return map;
|
||||
}
|
||||
if (xAxisExt.stream().filter(ext -> !ext.isDrill()).count() != 2) {
|
||||
map.put("data", new ArrayList<>());
|
||||
return map;
|
||||
}
|
||||
|
||||
List<Date> dates = new ArrayList<>();
|
||||
|
||||
ChartViewFieldDTO xAxis1 = xAxis.get(xAxisBase.size());
|
||||
SimpleDateFormat sdf = new SimpleDateFormat(getDateFormat(xAxis1.getDateStyle(), xAxis1.getDatePattern()));
|
||||
|
||||
List<Object> dataList = new ArrayList<>();
|
||||
for (int i1 = 0; i1 < data.size(); i1++) {
|
||||
String[] row = data.get(i1);
|
||||
|
||||
StringBuilder xField = new StringBuilder();
|
||||
if (isDrill) {
|
||||
xField.append(row[xAxis.size() - 1]);
|
||||
} else {
|
||||
for (int i = 0; i < xAxisBase.size(); i++) {
|
||||
if (i == xAxisBase.size() - 1) {
|
||||
xField.append(row[i]);
|
||||
} else {
|
||||
xField.append(row[i]).append("\n");
|
||||
}
|
||||
}
|
||||
}
|
||||
Map<String, Object> obj = new HashMap<>();
|
||||
obj.put("field", xField.toString());
|
||||
obj.put("category", xField.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);
|
||||
}
|
||||
|
||||
obj.put("dimensionList", dimensionList);
|
||||
|
||||
List<String> values = new ArrayList<>();
|
||||
|
||||
if (row[xAxisBase.size()] == null || row[xAxisBase.size() + 1] == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
values.add(row[xAxisBase.size()]);
|
||||
values.add(row[xAxisBase.size() + 1]);
|
||||
obj.put("values", values);
|
||||
|
||||
|
||||
try {
|
||||
Date date = sdf.parse(row[xAxisBase.size()]);
|
||||
if (date != null) {
|
||||
dates.add(date);
|
||||
}
|
||||
} catch (Exception ignore) {
|
||||
}
|
||||
try {
|
||||
Date date = sdf.parse(row[xAxisBase.size() + 1]);
|
||||
if (date != null) {
|
||||
dates.add(date);
|
||||
}
|
||||
} catch (Exception ignore) {
|
||||
}
|
||||
|
||||
dataList.add(obj);
|
||||
}
|
||||
|
||||
map.put("minTime", sdf.format(dates.stream().min(Date::compareTo).orElse(null)));
|
||||
|
||||
|
||||
map.put("maxTime", sdf.format(dates.stream().max(Date::compareTo).orElse(null)));
|
||||
|
||||
map.put("data", dataList);
|
||||
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<>();
|
||||
|
||||
|
8
core/frontend/src/icons/svg/bar-time-range.svg
Normal file
8
core/frontend/src/icons/svg/bar-time-range.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="1072" height="1024" xmlns="http://www.w3.org/2000/svg" p-id="1374" version="1.1" class="icon" t="1616054957891">
|
||||
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path id="svg_1" p-id="1375" d="m150.528,77.48267l0,207.28685l472.64914,0l2.99886,-207.28685l-475.648,0zm873.32571,303.34781l-469.32565,0l0,204.62018l469.12451,0l0.20114,-204.62018zm-203.14209,303.34781l-483.51692,0l0,207.28685l479.25025,0l4.26667,-207.28685z"/>
|
||||
<path id="svg_2" p-id="1376" d="m115.15124,943.07962l0,-942.93333l-41.20381,0l0,994.37714l996.10819,0l0,-51.44381l-954.90438,0z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 566 B |
@ -1184,6 +1184,7 @@ export default {
|
||||
chart_bar_stack: 'Stack Bar',
|
||||
chart_percentage_bar_stack: 'Percentage Stack Bar',
|
||||
chart_bar_horizontal: 'Horizontal Bar',
|
||||
chart_bar_time_range: 'Time Bar',
|
||||
chart_bar_stack_horizontal: 'Stack Horizontal Bar',
|
||||
chart_percentage_bar_stack_horizontal: 'Horizontal Percentage Stack Bar',
|
||||
chart_bidirectional_bar: 'Bidirectional Bar',
|
||||
|
@ -1182,6 +1182,7 @@ export default {
|
||||
chart_bar_stack: '堆疊柱狀圖',
|
||||
chart_percentage_bar_stack: '百分比柱狀圖',
|
||||
chart_bar_horizontal: '橫嚮柱狀圖',
|
||||
chart_bar_time_range: '時間條形圖',
|
||||
chart_bar_stack_horizontal: '橫嚮堆疊柱狀圖',
|
||||
chart_percentage_bar_stack_horizontal: '橫嚮百分比柱狀圖',
|
||||
chart_bidirectional_bar: '對稱柱狀圖',
|
||||
|
@ -1182,6 +1182,7 @@ export default {
|
||||
chart_bar_stack: '堆叠柱状图',
|
||||
chart_percentage_bar_stack: '百分比柱状图',
|
||||
chart_bar_horizontal: '横向柱状图',
|
||||
chart_bar_time_range: '时间条形图',
|
||||
chart_bar_stack_horizontal: '横向堆叠柱状图',
|
||||
chart_percentage_bar_stack_horizontal: '横向百分比柱状图',
|
||||
chart_bidirectional_bar: '对称柱状图',
|
||||
|
@ -262,6 +262,130 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
|
||||
return plot
|
||||
}
|
||||
|
||||
export function timeRangeBarOptionAntV(plot, container, chart, action) {
|
||||
// theme
|
||||
const theme = getTheme(chart)
|
||||
// attr
|
||||
const label = getLabel(chart)
|
||||
const tooltip = getTooltip(chart)
|
||||
// style
|
||||
const legend = getLegend(chart)
|
||||
const yAxis = getXAxis(chart)
|
||||
const xAxis = getYAxis(chart)
|
||||
// data
|
||||
const data = _.cloneDeep(chart.data.data)
|
||||
|
||||
const minTime = chart.data.minTime
|
||||
const maxTime = chart.data.maxTime
|
||||
|
||||
// config
|
||||
const slider = getSlider(chart)
|
||||
const analyse = getAnalyse(chart)
|
||||
// options
|
||||
const options = {
|
||||
theme: theme,
|
||||
data: data,
|
||||
xField: 'values',
|
||||
yField: 'field',
|
||||
seriesField: 'category',
|
||||
appendPadding: getPadding(chart),
|
||||
label: label,
|
||||
tooltip: tooltip,
|
||||
legend: legend,
|
||||
xAxis: xAxis,
|
||||
yAxis: yAxis,
|
||||
slider: slider,
|
||||
annotations: analyse,
|
||||
isRange: true,
|
||||
meta: {
|
||||
values: {
|
||||
type: 'time',
|
||||
min: minTime,
|
||||
max: maxTime
|
||||
}
|
||||
},
|
||||
brush: {
|
||||
enabled: true,
|
||||
isStartEnable: (context) => {
|
||||
// 按住 shift 键,才能开启交互
|
||||
if (context.event.gEvent.originalEvent?.shiftKey) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
delete options.isGroup
|
||||
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) => {
|
||||
return setGradientColor(ele, customAttr.color.gradient)
|
||||
})
|
||||
}
|
||||
// 处理空值
|
||||
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 Bar(container, options)
|
||||
|
||||
plot.off('interval:click')
|
||||
plot.on('interval:click', action)
|
||||
|
||||
return plot
|
||||
}
|
||||
|
||||
export function baseBidirectionalBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
|
||||
// theme
|
||||
const theme = getTheme(chart)
|
||||
|
@ -422,7 +422,7 @@ export function getTooltip(chart) {
|
||||
res = valueFormatter(param.value, formatterItem)
|
||||
}
|
||||
}
|
||||
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group')) {
|
||||
} else if (includesAny(chart.type, 'bar', 'scatter', 'radar', 'area') && !chart.type.includes('group') && chart.type !== 'bar-time-range') {
|
||||
obj = { name: param.category, value: param.value }
|
||||
for (let i = 0; i < yAxis.length; i++) {
|
||||
const f = yAxis[i]
|
||||
@ -470,6 +470,9 @@ export function getTooltip(chart) {
|
||||
res = valueFormatter(param.value, formatterItem)
|
||||
}
|
||||
}
|
||||
} else if (chart.type === 'bar-time-range') {
|
||||
obj = { values: param.values, name: param.category }
|
||||
res = param.values[0] + ' - ' + param.values[1]
|
||||
} else {
|
||||
res = param.value
|
||||
}
|
||||
@ -724,7 +727,7 @@ export function getXAxis(chart) {
|
||||
delete axis.maxLimit
|
||||
delete axis.tickCount
|
||||
const axisValue = a.axisValue
|
||||
if (chart.type.includes('horizontal')) {
|
||||
if (chart.type.includes('horizontal') || chart.type === 'bar-time-range') {
|
||||
if (axisValue && !axisValue.auto) {
|
||||
const yAxisSeriesMaxList = []
|
||||
const maxList = []
|
||||
@ -814,7 +817,7 @@ export function getYAxis(chart) {
|
||||
if (chart.type === 'waterfall') {
|
||||
return value
|
||||
} else {
|
||||
if (!chart.type.includes('horizontal')) {
|
||||
if (!(chart.type.includes('horizontal') || chart.type === 'bar-time-range')) {
|
||||
if (!a.axisLabelFormatter) {
|
||||
return valueFormatter(value, formatterItem)
|
||||
} else {
|
||||
@ -841,7 +844,7 @@ export function getYAxis(chart) {
|
||||
delete axis.maxLimit
|
||||
delete axis.tickCount
|
||||
const axisValue = a.axisValue
|
||||
if (!chart.type.includes('horizontal')) {
|
||||
if (!chart.type.includes('horizontal') || chart.type === 'bar-time-range') {
|
||||
if (axisValue && !axisValue.auto) {
|
||||
const yAxisSeriesMaxList = []
|
||||
const maxList = []
|
||||
|
@ -1100,6 +1100,85 @@ export const TYPE_CONFIGS = [
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
render: 'antv',
|
||||
category: 'chart.chart_type_compare',
|
||||
value: 'bar-time-range',
|
||||
title: 'chart.chart_bar_time_range',
|
||||
icon: 'bar-time-range',
|
||||
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'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
'barDefault',
|
||||
'barGap'
|
||||
],
|
||||
'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',
|
||||
'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',
|
||||
category: 'chart.chart_type_compare',
|
||||
@ -3517,7 +3596,7 @@ export function getColors(chart, colors, reset) {
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if ((includesAny(chart.type, 'bar', 'radar', 'area')) && !chart.type.includes('group')) {
|
||||
} else if ((includesAny(chart.type, 'bar', 'radar', 'area')) && !chart.type.includes('group') && chart.type !== 'bar-time-range') {
|
||||
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
|
||||
series = JSON.parse(JSON.stringify(chart.yaxis))
|
||||
} else {
|
||||
|
@ -45,7 +45,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, baseBidirectionalBarOptionAntV } from '@/views/chart/chart/bar/bar_antv'
|
||||
import { baseBarOptionAntV, hBaseBarOptionAntV, baseBidirectionalBarOptionAntV, timeRangeBarOptionAntV } 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'
|
||||
@ -273,6 +273,8 @@ export default {
|
||||
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
|
||||
} else if (equalsAny(chart.type, 'bar-stack-horizontal', 'percentage-bar-stack-horizontal')) {
|
||||
this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
|
||||
} else if (equalsAny(chart.type, 'bar-time-range')) {
|
||||
this.myChart = timeRangeBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
||||
} else if (chart.type === 'line') {
|
||||
this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
||||
} else if (chart.type === 'area') {
|
||||
@ -389,8 +391,12 @@ export default {
|
||||
}
|
||||
return
|
||||
}
|
||||
const quotaList = this.pointParam.data.quotaList
|
||||
let quotaList = this.pointParam.data.quotaList
|
||||
if (this.chart.type === 'bar-time-range') {
|
||||
quotaList = this.pointParam.data.dimensionList
|
||||
} else {
|
||||
quotaList[0]['value'] = this.pointParam.data.value
|
||||
}
|
||||
const linkageParam = {
|
||||
option: 'linkage',
|
||||
name: this.pointParam.data.name,
|
||||
|
@ -28,14 +28,18 @@
|
||||
size="mini"
|
||||
@change="changeXAxisStyle('position')"
|
||||
>
|
||||
<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'">
|
||||
<div v-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>
|
||||
<div v-else-if="chart.type === 'bar-time-range'">
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -266,7 +270,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="chart.type && chart.type !== 'bidirectional-bar'"
|
||||
v-if="chart.type && chart.type !== 'bidirectional-bar' && chart.type !== 'bar-time-range'"
|
||||
:label="$t('chart.axis_label_rotate')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
|
@ -28,14 +28,18 @@
|
||||
size="mini"
|
||||
@change="changeYAxisStyle('position')"
|
||||
>
|
||||
<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'">
|
||||
<div v-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>
|
||||
<div v-else-if="chart.type === 'bar-time-range'">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -293,7 +297,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<span v-show="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
|
||||
<span v-show="chart.type && !(chart.type.includes('horizontal') || chart.type === 'bar-time-range') && chart.type !== 'waterfall'">
|
||||
<el-form-item
|
||||
:label="$t('chart.value_formatter_type')"
|
||||
class="form-item"
|
||||
|
@ -299,10 +299,10 @@ export default {
|
||||
},
|
||||
getDateExtStatus() {
|
||||
if (this.chart) {
|
||||
this.showDateExt = this.chart.datasourceType === 'mysql' ||
|
||||
this.showDateExt = (this.chart.datasourceType === 'mysql' ||
|
||||
this.chart.datasourceType === 'ds_doris' ||
|
||||
this.chart.datasourceType === 'StarRocks' ||
|
||||
this.chart.datasetMode === 1
|
||||
this.chart.datasetMode === 1) && this.chart.type !== 'bar-time-range'
|
||||
} else {
|
||||
this.showDateExt = false
|
||||
}
|
||||
|
@ -687,7 +687,8 @@
|
||||
v-if="view.type === 'bar-group'
|
||||
|| view.type === 'bar-group-stack'
|
||||
|| (view.render === 'antv' && view.type === 'line')
|
||||
|| view.type === 'flow-map'"
|
||||
|| view.type === 'flow-map'
|
||||
|| view.type === 'bar-time-range'"
|
||||
class="padding-lr"
|
||||
>
|
||||
<span class="data-area-label">
|
||||
@ -755,7 +756,7 @@
|
||||
</el-row>
|
||||
<!--yaxis-->
|
||||
<el-row
|
||||
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map')"
|
||||
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map', 'bar-time-range')"
|
||||
class="padding-lr"
|
||||
style="margin-top: 6px;"
|
||||
>
|
||||
@ -2122,7 +2123,7 @@ export default {
|
||||
return equalsAny(this.view.type, 'table-normal', 'table-info')
|
||||
},
|
||||
showAnalyseCfg() {
|
||||
if (this.view.type === 'bidirectional-bar') {
|
||||
if (this.view.type === 'bidirectional-bar' || this.view.type === 'bar-time-range') {
|
||||
return false
|
||||
}
|
||||
return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'liquid') ||
|
||||
@ -2502,7 +2503,7 @@ export default {
|
||||
}
|
||||
})
|
||||
if (equalsAny(view.type, 'table-pivot', 'bar-group', 'bar-group-stack', 'flow-map', 'race-bar') ||
|
||||
(view.render === 'antv' && (view.type === 'line' || view.type === 'scatter'))) {
|
||||
(view.render === 'antv' && (view.type === 'line' || view.type === 'scatter' || view.type === 'bar-time-range'))) {
|
||||
view.xaxisExt.forEach(function(ele) {
|
||||
if (!ele.dateStyle || ele.dateStyle === '') {
|
||||
ele.dateStyle = 'y_M_d'
|
||||
@ -3310,6 +3311,19 @@ export default {
|
||||
if (this.view.type !== 'table-info') {
|
||||
this.dragCheckType(this.view.xaxisExt, 'd')
|
||||
}
|
||||
if (this.view.type === 'bar-time-range') {
|
||||
// 针对时间条形图,需要限定类型为时间类型
|
||||
if (this.view.xaxisExt && this.view.xaxisExt.length > 0) {
|
||||
for (let i = this.view.xaxisExt.length - 1; i >= 0; i--) {
|
||||
if (this.view.xaxisExt[i].deType !== 1) {
|
||||
this.view.xaxisExt.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.view.xaxisExt.length > 2) {
|
||||
this.view.xaxisExt = [this.view.xaxisExt[0], this.view.xaxisExt[1]]
|
||||
}
|
||||
}
|
||||
if ((this.view.type === 'map' || this.view.type === 'word-cloud' || this.view.type === 'scatter') && this.view.xaxisExt.length > 1) {
|
||||
this.view.xaxisExt = [this.view.xaxisExt[0]]
|
||||
}
|
||||
|
@ -471,13 +471,13 @@ export default {
|
||||
return false
|
||||
},
|
||||
xAisTitle() {
|
||||
if (this.chart.type === 'bidirectional-bar') {
|
||||
if (this.chart.type === 'bidirectional-bar' || this.chart.type === 'bar-time-range') {
|
||||
return this.$t('chart.yAxis')
|
||||
}
|
||||
return this.$t('chart.xAxis')
|
||||
},
|
||||
yAxisTitle() {
|
||||
if (this.chart.type === 'bidirectional-bar') {
|
||||
if (this.chart.type === 'bidirectional-bar' || this.chart.type === 'bar-time-range') {
|
||||
return this.$t('chart.xAxis')
|
||||
}
|
||||
if (this.chart.type === 'chart-mix') {
|
||||
|
Loading…
Reference in New Issue
Block a user