diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 8e81bf079f..7005db5a13 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -781,7 +781,14 @@ export default { axis_name_fontsize: 'Name Fontsize', pie_label_line_show: 'Line', outside: 'Outside', - center: 'Center' + center: 'Center', + split: 'Axis', + axis_line: 'Axis Line', + axis_label: 'Axis Label', + label_fontsize: 'Label Fontsize', + split_line: 'Split Line', + split_color: 'Split Color', + shadow: 'Shadow' }, dataset: { sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', @@ -938,7 +945,7 @@ export default { oracle_service_name: 'Service Name', get_schema: 'Get Schema', schema: 'Database Schema', - please_choose_schema: 'Please select Schema', + please_choose_schema: 'Please select Schema' }, pblink: { key_pwd: 'Please enter the password to open the link', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 6c585e38e6..a710479e05 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -781,7 +781,14 @@ export default { axis_name_fontsize: '名稱字體', pie_label_line_show: '引導線', outside: '外', - center: '中心' + center: '中心', + split: '軸線', + axis_line: '軸線', + axis_label: '軸標簽', + label_fontsize: '標簽大小', + split_line: '分割線', + split_color: '分割顏色', + shadow: '陰影' }, dataset: { sheet_warn: '有多個sheet頁面,默認抽取第一個', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index c7306a9f21..8ac6f042ea 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -781,7 +781,14 @@ export default { axis_name_fontsize: '名称字体', pie_label_line_show: '引导线', outside: '外', - center: '中心' + center: '中心', + split: '轴线', + axis_line: '轴线', + axis_label: '轴标签', + label_fontsize: '标签大小', + split_line: '分割线', + split_color: '分割颜色', + shadow: '阴影' }, dataset: { sheet_warn: '有多个 Sheet 页,默认抽取第一个', @@ -939,7 +946,7 @@ export default { oracle_service_name: '服务名', get_schema: '获取 Schema', schema: '数据库 Schema', - please_choose_schema: '请选择数据库 Schema', + please_choose_schema: '请选择数据库 Schema' }, pblink: { key_pwd: '请输入密码打开链接', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index 66cce7fb14..88dd327a47 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -132,6 +132,50 @@ export const DEFAULT_BACKGROUND_COLOR = { color: '#ffffff', alpha: 0 } +export const DEFAULT_SPLIT = { + name: { + show: true, + color: '#999999', + fontSize: '12' + }, + splitNumber: 5, + axisLine: { + show: true, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' + } + }, + axisTick: { + show: false, + length: 5, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' + } + }, + axisLabel: { + show: false, + rotate: 0, + margin: 8, + color: '#999999', + fontSize: '12', + formatter: '{value}' + }, + splitLine: { + show: true, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' + } + }, + splitArea: { + show: true + } +} // chart config export const BASE_BAR = { title: { @@ -349,13 +393,47 @@ export const BASE_RADAR = { radar: { shape: 'polygon', name: { - textStyle: { - color: '#000000' - // backgroundColor: '#999', - // borderRadius: 3, - // padding: [3, 5] + show: true, + color: '#999999', + fontSize: '12' + }, + splitNumber: 5, + axisLine: { + show: true, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' } }, + axisTick: { + show: false, + length: 5, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' + } + }, + axisLabel: { + show: false, + rotate: 0, + margin: 8, + color: '#999999', + fontSize: '12', + formatter: '{value}' + }, + splitLine: { + show: true, + lineStyle: { + color: '#999999', + width: 1, + type: 'solid' + } + }, + splitArea: { + show: true + }, indicator: [] }, series: [{ diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js index 0e095abf05..0ca82eadc0 100644 --- a/frontend/src/views/chart/chart/common/common.js +++ b/frontend/src/views/chart/chart/common/common.js @@ -38,6 +38,15 @@ export function componentStyle(chart_option, chart) { chart_option.yAxis.splitLine = customStyle.yAxis.splitLine chart_option.yAxis.nameTextStyle = customStyle.yAxis.nameTextStyle } + if (customStyle.split && chart.type.includes('radar')) { + chart_option.radar.name = customStyle.split.name + chart_option.radar.splitNumber = customStyle.split.splitNumber + chart_option.radar.axisLine = customStyle.split.axisLine + chart_option.radar.axisTick = customStyle.split.axisTick + chart_option.radar.axisLabel = customStyle.split.axisLabel + chart_option.radar.splitLine = customStyle.split.splitLine + chart_option.radar.splitArea = customStyle.split.splitArea + } if (customStyle.background) { chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha) } diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue new file mode 100644 index 0000000000..4e49cdee99 --- /dev/null +++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index ed22f81813..d87212a8c7 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -341,7 +341,8 @@ import { DEFAULT_TOOLTIP, DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_STYLE, - DEFAULT_BACKGROUND_COLOR + DEFAULT_BACKGROUND_COLOR, + DEFAULT_SPLIT } from '../chart/chart' export default { @@ -750,7 +751,8 @@ export default { legend: DEFAULT_LEGEND_STYLE, xAxis: DEFAULT_XAXIS_STYLE, yAxis: DEFAULT_YAXIS_STYLE, - background: DEFAULT_BACKGROUND_COLOR + background: DEFAULT_BACKGROUND_COLOR, + split: DEFAULT_SPLIT }) view.customFilter = JSON.stringify([]) post('/chart/view/save', view).then(response => { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index c48209a865..a62920ef9d 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -213,6 +213,7 @@ + @@ -373,7 +374,8 @@ import { DEFAULT_TITLE_STYLE, DEFAULT_TOOLTIP, DEFAULT_XAXIS_STYLE, - DEFAULT_YAXIS_STYLE + DEFAULT_YAXIS_STYLE, + DEFAULT_SPLIT } from '../chart/chart' import ColorSelector from '../components/shape-attr/ColorSelector' import SizeSelector from '../components/shape-attr/SizeSelector' @@ -384,6 +386,7 @@ import TooltipSelector from '../components/shape-attr/TooltipSelector' import XAxisSelector from '../components/component-style/XAxisSelector' import YAxisSelector from '../components/component-style/YAxisSelector' import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector' +import SplitSelector from '../components/component-style/SplitSelector' import QuotaFilterEditor from '../components/filter/QuotaFilterEditor' import DimensionFilterEditor from '../components/filter/DimensionFilterEditor' import TableNormal from '../components/table/TableNormal' @@ -393,7 +396,7 @@ import TableSelector from './TableSelector' export default { name: 'ChartEdit', - components: { TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, + components: { SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable }, props: { param: { type: Object, @@ -423,7 +426,8 @@ export default { legend: DEFAULT_LEGEND_STYLE, xAxis: DEFAULT_XAXIS_STYLE, yAxis: DEFAULT_YAXIS_STYLE, - background: DEFAULT_BACKGROUND_COLOR + background: DEFAULT_BACKGROUND_COLOR, + split: DEFAULT_SPLIT }, customFilter: [] }, @@ -861,6 +865,11 @@ export default { this.save() }, + onChangeSplitForm(val) { + this.view.customStyle.split = val + this.save() + }, + showDimensionEditFilter(item) { this.dimensionItem = JSON.parse(JSON.stringify(item)) this.dimensionFilterEdit = true