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

feat: radar支持轴线样式设置

Browse Source
This commit is contained in:
junjie 2021-07-05 13:57:10 +08:00
parent 56b1895241
commit 141e146909
8 changed files with 289 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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',

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

@ -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頁面，默認抽取第一個',

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

@ -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: '请输入密码打开链接',

88
frontend/src/views/chart/chart/chart.js
View File

@ -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: [{

9
frontend/src/views/chart/chart/common/common.js
View File

@ -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)
}

155
frontend/src/views/chart/components/component-style/SplitSelector.vue Normal file
View File

@ -0,0 +1,155 @@
<template>
<div>
<div style="width: 100%">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.axis_line')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.split_line')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">
{{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" />
</el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_SPLIT } from '../../chart/chart'
export default {
name: 'SplitSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
isSetting: false,
fontSize: []
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.split) {
this.splitForm = customStyle.split
} else {
this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeSplitStyle() {
if (!this.splitForm.show) {
this.isSetting = false
}
this.$emit('onChangeSplitForm', this.splitForm)
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style>

6
frontend/src/views/chart/group/Group.vue
View File

@ -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 => {

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

@ -213,6 +213,7 @@
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
<y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
<split-selector v-show="view.type.includes('radar')" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
<background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
@ -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