refactor: 批量修改样式优化
This commit is contained in:
wangjiahao
parent
8f37ee68c9
commit
9041866e9c
@ -407,17 +407,17 @@ export default {
|
||||
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
|
||||
if (param.custom === 'customAttr') {
|
||||
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
|
||||
sourceCustomAttr[param.property] = param.value
|
||||
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
|
||||
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
|
||||
this.chart.customAttr = this.sourceCustomAttrStr
|
||||
updateParams['customAttr'] = this.sourceCustomAttrStr
|
||||
} else if (param.custom === 'customStyle') {
|
||||
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
|
||||
// view's title use history
|
||||
if (param.property === 'text') {
|
||||
param.value.title = sourceCustomStyle.text.title
|
||||
}
|
||||
sourceCustomStyle[param.property] = param.value
|
||||
// if (param.property === 'text') {
|
||||
// param.value.title = sourceCustomStyle.text.title
|
||||
// }
|
||||
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
|
||||
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
|
||||
this.chart.customStyle = this.sourceCustomStyleStr
|
||||
updateParams['customStyle'] = this.sourceCustomStyleStr
|
||||
|
||||
@ -2024,5 +2024,8 @@ export default {
|
||||
port: 'Port',
|
||||
user: 'User',
|
||||
passwd: 'Password'
|
||||
},
|
||||
plugin_style: {
|
||||
border: 'Border'
|
||||
}
|
||||
}
|
||||
|
||||
@ -2035,5 +2035,8 @@ export default {
|
||||
port: '端口',
|
||||
user: '用戶名',
|
||||
passwd: '密碼'
|
||||
},
|
||||
plugin_style: {
|
||||
border: '边框'
|
||||
}
|
||||
}
|
||||
|
||||
@ -2051,5 +2051,8 @@ export default {
|
||||
time: '操作时间',
|
||||
export: '导出',
|
||||
search_by_key: '搜索详情'
|
||||
},
|
||||
plugin_style: {
|
||||
border: '边框'
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,6 +119,7 @@ const data = {
|
||||
// Currently selected components
|
||||
curBatchOptComponents: [],
|
||||
mixProperties: [],
|
||||
mixPropertiesInner: {},
|
||||
batchOptChartInfo: null,
|
||||
batchOptViews: {},
|
||||
// properties changed
|
||||
@ -552,15 +553,6 @@ const data = {
|
||||
const viewBaseInfo = state.componentViewsData[id]
|
||||
// get properties
|
||||
const viewConfig = state.allViewRender.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
|
||||
const viewProperties = viewConfig ? viewConfig[0].properties : []
|
||||
if (state.mixProperties.length > 0) {
|
||||
// If it exists , taking the intersection
|
||||
state.mixProperties = state.mixProperties.filter(property => viewProperties.indexOf(property) > -1)
|
||||
} else {
|
||||
// If it doesn't exist, assignment directly
|
||||
state.mixProperties = deepCopy(viewProperties)
|
||||
}
|
||||
|
||||
if (viewConfig && viewConfig.length > 0) {
|
||||
state.batchOptViews[id] = viewConfig[0]
|
||||
this.commit('setBatchOptChartInfo')
|
||||
@ -570,16 +562,27 @@ const data = {
|
||||
setBatchOptChartInfo(state) {
|
||||
let render = null
|
||||
let type = null
|
||||
let allTypes = ''
|
||||
let isPlugin = null
|
||||
state.mixProperties = []
|
||||
state.mixPropertiesInner = {}
|
||||
let mixPropertiesTemp = []
|
||||
let mixPropertyInnerTemp = {}
|
||||
if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
|
||||
for (const key in state.batchOptViews) {
|
||||
if (state.mixProperties.length > 0) {
|
||||
if (mixPropertiesTemp.length > 0) {
|
||||
// If it exists , taking the intersection
|
||||
state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
|
||||
mixPropertiesTemp = mixPropertiesTemp.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
|
||||
// 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
|
||||
mixPropertiesTemp.forEach(propertyInnerItem => {
|
||||
if (mixPropertyInnerTemp[propertyInnerItem] && state.batchOptViews[key].propertyInner[propertyInnerItem]) {
|
||||
mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[propertyInnerItem].filter(propertyInnerItemValue => state.batchOptViews[key].propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) > -1)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// If it doesn't exist, assignment directly
|
||||
state.mixProperties = deepCopy(state.batchOptViews[key].properties)
|
||||
mixPropertiesTemp = deepCopy(state.batchOptViews[key].properties)
|
||||
mixPropertyInnerTemp = deepCopy(state.batchOptViews[key].propertyInner)
|
||||
}
|
||||
|
||||
if (render && render !== state.batchOptViews[key].render) {
|
||||
@ -588,6 +591,7 @@ const data = {
|
||||
render = state.batchOptViews[key].render
|
||||
}
|
||||
|
||||
allTypes = allTypes + '-' + state.batchOptViews[key].value
|
||||
if (type && type !== state.batchOptViews[key].value) {
|
||||
type = 'mix'
|
||||
} else {
|
||||
@ -600,6 +604,16 @@ const data = {
|
||||
isPlugin = state.batchOptViews[key].isPlugin
|
||||
}
|
||||
}
|
||||
mixPropertiesTemp.forEach(property => {
|
||||
if (mixPropertyInnerTemp[property] && mixPropertyInnerTemp[property].length) {
|
||||
state.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
|
||||
state.mixProperties.push(property)
|
||||
}
|
||||
})
|
||||
|
||||
// if (type && type === 'mix') {
|
||||
// type = type + '-' + allTypes
|
||||
// }
|
||||
// Assembly history settings 'customAttr' & 'customStyle'
|
||||
state.batchOptChartInfo = {
|
||||
'mode': 'batchOpt',
|
||||
@ -618,6 +632,7 @@ const data = {
|
||||
// Currently selected components
|
||||
state.curBatchOptComponents = []
|
||||
state.mixProperties = []
|
||||
state.mixPropertyInnder = {}
|
||||
state.batchOptChartInfo = null
|
||||
state.batchOptViews = {}
|
||||
state.changeProperties = {
|
||||
@ -636,6 +651,7 @@ const data = {
|
||||
// Currently selected components
|
||||
state.curBatchOptComponents = []
|
||||
state.mixProperties = []
|
||||
state.mixPropertyInnder = {}
|
||||
state.batchOptChartInfo = null
|
||||
state.batchOptViews = {}
|
||||
state.changeProperties = {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,12 +2,12 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="legendForm.show">
|
||||
<el-form-item :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
|
||||
<div v-show="showProperty('show') && legendForm.show">
|
||||
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
|
||||
<el-option
|
||||
v-for="item in iconSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -16,29 +16,29 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
|
||||
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
|
||||
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
@ -63,6 +63,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -117,11 +124,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeLegendStyle() {
|
||||
changeLegendStyle(modifyName) {
|
||||
if (!this.legendForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.legendForm['modifyName'] = modifyName
|
||||
this.$emit('onLegendChange', this.legendForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="legendForm.show">
|
||||
<el-form-item :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
|
||||
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
|
||||
<el-option
|
||||
v-for="item in iconSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -16,29 +16,29 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
|
||||
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
|
||||
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
|
||||
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
@ -63,6 +63,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -115,11 +122,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeLegendStyle() {
|
||||
changeLegendStyle(modifyName) {
|
||||
if (!this.legendForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.legendForm['modifyName'] = modifyName
|
||||
this.$emit('onLegendChange', this.legendForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,42 +2,42 @@
|
||||
<div style="width: 100%">
|
||||
<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 v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
|
||||
</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-form-item v-show="showProperty('name')" :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('name')">
|
||||
<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 v-show="showProperty('axisLine')" :label="$t('chart.axis_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle('axisLine')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
|
||||
</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 v-show="showProperty('axisLabel')" :label="$t('chart.axis_label')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle('axisLabel')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLabel')" />
|
||||
</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-form-item v-show="showProperty('axisLabel')" :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('axisLabel')">
|
||||
<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 v-show="showProperty('splitLine')" :label="$t('chart.split_line')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle('splitLine')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.split_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('splitLine')" />
|
||||
</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 v-show="showProperty('splitArea')" :label="$t('chart.shadow')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle('splitArea')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
@ -57,6 +57,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -105,11 +112,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeSplitStyle() {
|
||||
changeSplitStyle(modifyName) {
|
||||
if (!this.splitForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.splitForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeSplitForm', this.splitForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,22 +2,22 @@
|
||||
<div style="width: 100%">
|
||||
<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 v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
|
||||
</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-form-item v-show="showProperty('name')" :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('name')">
|
||||
<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">
|
||||
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
|
||||
<el-form-item v-show="showProperty('lineStyle')" :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
|
||||
</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>-->
|
||||
@ -57,6 +57,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -105,11 +112,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeSplitStyle() {
|
||||
changeSplitStyle(modifyName) {
|
||||
if (!this.splitForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.splitForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeSplitForm', this.splitForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,45 +2,45 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="titleForm.show">
|
||||
<el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
|
||||
<div v-show="showProperty('show') && titleForm.show">
|
||||
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
|
||||
<el-input
|
||||
v-model="titleForm.title"
|
||||
size="mini"
|
||||
:placeholder="$t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle"
|
||||
@blur="changeTitleStyle('title')"
|
||||
@input="inputOnInput($event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
|
||||
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
|
||||
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
|
||||
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid' && !chart.type.includes('text')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
|
||||
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
|
||||
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_style')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder')" :label="$t('chart.text_style')" class="form-item">
|
||||
<el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -63,6 +63,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -117,7 +124,7 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeTitleStyle() {
|
||||
changeTitleStyle(modifyName) {
|
||||
if (!this.batchOptStatus) {
|
||||
if (this.titleForm.title.length < 1) {
|
||||
this.$error(this.$t('chart.title_cannot_empty'))
|
||||
@ -133,10 +140,14 @@ export default {
|
||||
if (!this.titleForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.titleForm['modifyName'] = modifyName
|
||||
this.$emit('onTextChange', this.titleForm)
|
||||
},
|
||||
inputOnInput: function(e) {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,38 +2,38 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="titleForm.show">
|
||||
<el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
|
||||
<div v-show="showProperty('show') && titleForm.show">
|
||||
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
|
||||
<el-input
|
||||
v-model="titleForm.title"
|
||||
size="mini"
|
||||
:placeholder="$t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle"
|
||||
@blur="changeTitleStyle('title')"
|
||||
@input="inputOnInput($event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
|
||||
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
|
||||
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('fontSize')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
|
||||
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
|
||||
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
|
||||
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
|
||||
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
|
||||
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_style')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder') " :label="$t('chart.text_style')" class="form-item">
|
||||
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -56,6 +56,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -110,7 +117,7 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeTitleStyle() {
|
||||
changeTitleStyle(modifyName) {
|
||||
if (!this.batchOptStatus) {
|
||||
if (this.titleForm.title.length < 1) {
|
||||
this.$error(this.$t('chart.title_cannot_empty'))
|
||||
@ -123,10 +130,14 @@ export default {
|
||||
return
|
||||
}
|
||||
}
|
||||
this.titleForm['modifyName'] = modifyName
|
||||
this.$emit('onTextChange', this.titleForm)
|
||||
},
|
||||
inputOnInput: function(e) {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -39,33 +39,33 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle('splitLine')">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
@ -73,25 +73,25 @@
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
|
||||
<el-divider v-show="showProperty('axisLabel')" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle('')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -112,6 +112,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -167,11 +174,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeXAxisStyle() {
|
||||
changeXAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeXAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -39,45 +39,45 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
|
||||
<el-input @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
|
||||
<el-color-picker class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -101,6 +101,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -156,7 +163,7 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeXAxisStyle() {
|
||||
changeXAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
@ -167,8 +174,13 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeXAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,30 +2,30 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<div v-show="showProperty('show') && axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && !chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.axis_value') }}</span>
|
||||
@ -39,59 +39,59 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-divider v-show="showProperty('splitLine')" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-divider v-show="showProperty('axisLabel')" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
|
||||
<el-divider v-show="showProperty('axisLabel')" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -112,6 +112,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -170,11 +177,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeYAxisStyle() {
|
||||
changeYAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeYAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && !chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -39,45 +39,45 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -101,6 +101,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -159,7 +166,7 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeYAxisStyle() {
|
||||
changeYAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
@ -170,7 +177,11 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeYAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<div v-show="showProperty('show') && axisForm.show">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && !chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -39,59 +39,59 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_split')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.split" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_type')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle('splitLine')">
|
||||
<el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
|
||||
<el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-divider v-show="showProperty('axisLabel')" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
|
||||
<el-divider v-show="showProperty('axisLabel')" />
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
|
||||
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -112,6 +112,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -167,11 +174,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeYAxisStyle() {
|
||||
changeYAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeYAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="axisForm.show">
|
||||
<el-form-item :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
|
||||
<el-radio-group v-model="axisForm.position" 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>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
|
||||
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
|
||||
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<span v-show="chart.type && !chart.type.includes('horizontal')">
|
||||
<span v-show="showProperty('axisValue')">
|
||||
<el-divider />
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -39,14 +39,14 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="!axisForm.axisValue.auto">
|
||||
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<span slot="label">
|
||||
@ -60,35 +60,35 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
|
||||
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.splitLine.show">
|
||||
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
|
||||
<el-form-item :label="$t('chart.axis_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
<el-divider />
|
||||
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
|
||||
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<span v-show="axisForm.axisLabel.show">
|
||||
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
|
||||
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
|
||||
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
|
||||
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
|
||||
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -112,6 +112,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -167,7 +174,7 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeYAxisStyle() {
|
||||
changeYAxisStyle(modifyName) {
|
||||
if (!this.axisForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
@ -178,7 +185,11 @@ export default {
|
||||
})
|
||||
return
|
||||
}
|
||||
this.axisForm['modifyName'] = modifyName
|
||||
this.$emit('onChangeYAxisForm', this.axisForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
|
||||
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
|
||||
<div>
|
||||
<el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="400"
|
||||
@ -12,7 +12,7 @@
|
||||
<div style="padding: 6px 10px;">
|
||||
<div>
|
||||
<span class="color-label">{{ $t('chart.system_case') }}</span>
|
||||
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
|
||||
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
|
||||
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
|
||||
<div style="float: left">
|
||||
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
|
||||
@ -45,34 +45,34 @@
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('quotaColor')" :label="$t('chart.quota_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('dimensionColor')" :label="$t('chart.dimension_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="sourceType==='view' || sourceType==='panelTable'">
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<div>
|
||||
<el-form-item v-show="showProperty('tableHeaderBgColor')" :label="$t('chart.table_header_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="(chart.render && chart.render === 'antv' && chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('tableBorderColor')" :label="$t('chart.table_border_color')" class="form-item">
|
||||
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
|
||||
</el-form-item>
|
||||
<!-- 暂时不支持该功能-->
|
||||
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
|
||||
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase('tableStripe')">{{ $t('chart.stripe') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
|
||||
<el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
|
||||
<el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
@ -93,6 +93,13 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
sourceType: {
|
||||
type: String,
|
||||
default: 'view',
|
||||
@ -206,7 +213,7 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
changeColorOption() {
|
||||
changeColorOption(modifyName = 'value') {
|
||||
const that = this
|
||||
const items = this.colorCases.filter(ele => {
|
||||
return ele.value === that.colorForm.value
|
||||
@ -220,9 +227,12 @@ export default {
|
||||
this.customColor = this.colorForm.colors[0]
|
||||
this.colorIndex = 0
|
||||
|
||||
this.changeColorCase()
|
||||
this.changeColorCase(modifyName)
|
||||
},
|
||||
changeColorCase() {
|
||||
changeColorCase(modifyName) {
|
||||
this.colorForm['modifyName'] = modifyName
|
||||
this.$emit('onColorChange', this.colorForm)
|
||||
this.colorForm['modifyName'] = 'colors'
|
||||
this.$emit('onColorChange', this.colorForm)
|
||||
// this.customColor = null
|
||||
// this.colorIndex = 0
|
||||
@ -253,11 +263,16 @@ export default {
|
||||
},
|
||||
switchColorCase() {
|
||||
this.colorForm.colors[this.colorIndex] = this.customColor
|
||||
this.colorForm['modifyName'] = 'value'
|
||||
this.$emit('onColorChange', this.colorForm)
|
||||
this.colorForm['modifyName'] = 'colors'
|
||||
this.$emit('onColorChange', this.colorForm)
|
||||
},
|
||||
|
||||
resetCustomColor() {
|
||||
this.changeColorOption()
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="labelForm.show">
|
||||
<el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('labelLine')" :label="$t('chart.pie_label_line_show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr('labelLine')">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
|
||||
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap' && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
|
||||
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
|
||||
<el-form-item v-show="showProperty('formatter')" class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
@ -34,30 +34,16 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('formatter')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-form-item v-show="showProperty('gaugeFormatter')" class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
|
||||
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('gaugeFormatter')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
@ -77,6 +63,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -143,10 +136,11 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeLabelAttr() {
|
||||
changeLabelAttr(modifyName) {
|
||||
if (!this.labelForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.labelForm['modifyName'] = modifyName
|
||||
this.$emit('onLabelChange', this.labelForm)
|
||||
},
|
||||
initOptions() {
|
||||
@ -160,6 +154,9 @@ export default {
|
||||
this.labelPosition = this.labelPositionV
|
||||
}
|
||||
}
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,43 +1,26 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="labelForm.show">
|
||||
<!-- <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
|
||||
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap' && !chart.type.includes('scatter')" :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
|
||||
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
|
||||
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
|
||||
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
@ -55,6 +38,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -121,10 +111,11 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeLabelAttr() {
|
||||
changeLabelAttr(modifyName) {
|
||||
if (!this.labelForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.labelForm['modifyName'] = modifyName
|
||||
this.$emit('onLabelChange', this.labelForm)
|
||||
},
|
||||
initOptions() {
|
||||
@ -138,6 +129,9 @@ export default {
|
||||
this.labelPosition = this.labelPositionV
|
||||
}
|
||||
}
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
<el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<!--bar-begin-->
|
||||
<el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type !== 'bar-stack'" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--bar-end-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
<!--line-begin-->
|
||||
<el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
|
||||
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -33,65 +34,59 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<span v-show="chart.type && chart.type.includes('pie-rose')">
|
||||
<el-form-item :label="$t('chart.rose_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
|
||||
<!--line-end-->
|
||||
<!--pie-begin-->
|
||||
<el-form-item v-show="showProperty('pieInnerRadius')" :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieInnerRadius')" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="showProperty('pieOuterRadius')" :label="$t('chart.pie_outer_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieOuterRadius')" />
|
||||
</el-form-item>
|
||||
|
||||
<span v-show="showProperty('pieRoseType') || showProperty('pieRoseRadius') ">
|
||||
<el-form-item v-show="showProperty('pieRoseType')" :label="$t('chart.rose_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase('pieRoseType')">
|
||||
<el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
|
||||
<el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('pieRoseRadius')" :label="$t('chart.rose_radius')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('pieRoseRadius')" />
|
||||
</el-form-item>
|
||||
</span>
|
||||
</el-form>
|
||||
<!--pie-end-->
|
||||
<!--funnel-begin-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('funnelWidth')" :label="$t('chart.funnel_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('funnelWidth')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
|
||||
<!--funnel-end-->
|
||||
<!--radar-begin-->
|
||||
<el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
|
||||
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
|
||||
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('radarSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('radarSize')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--radar-end-->
|
||||
<!--table-begin-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tablePageMode')" :label="$t('chart.table_page_mode')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase('tablePageMode')">
|
||||
<el-option :label="$t('chart.page_mode_page')" value="page" />
|
||||
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tablePageSize') && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase('tablePageSize')">
|
||||
<el-option
|
||||
v-for="item in pageSizeOptions"
|
||||
:key="item.value"
|
||||
@ -100,64 +95,61 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tableTitleFontSize')" :label="$t('chart.table_title_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase('tableTitleFontSize')">
|
||||
<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.table_item_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tableItemFontSize')" :label="$t('chart.table_item_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase('tableItemFontSize')">
|
||||
<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.table_title_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('tableTitleHeight')" :label="$t('chart.table_title_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableTitleHeight')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('tableItemHeight')" :label="$t('chart.table_item_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableItemHeight" :min="36" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableItemHeight')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('tableColumnWidth')" :label="$t('chart.table_column_width_config')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="1000" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase('tableColumnWidth')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
|
||||
<!--table-end-->
|
||||
<!--gauge-begin-->
|
||||
<el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase('gaugeMin')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('gaugeStartAngle')" :label="$t('chart.start_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeStartAngle')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('gaugeEndAngle')" :label="$t('chart.end_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<!--gauge-end-->
|
||||
<!--text&label-end-->
|
||||
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('dimensionFontSize')" :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase('dimensionFontSize')">
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<!--text&label-end-->
|
||||
<!--scatter-begin-->
|
||||
<el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -166,43 +158,43 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<!--scatter-end-->
|
||||
<!--treemap-begin-->
|
||||
<el-form-item v-show="showProperty('treemapWidth')" :label="$t('chart.width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapWidth')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('treemapHeight')" :label="$t('chart.height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase('treemapHeight')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--treemap-end-->
|
||||
<!--chart-mix-end-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('barDefault')" :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('barWidth')" :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase('barWidth')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase('barGap')" />
|
||||
</el-form-item>
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('lineWidth')" :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase('lineWidth')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('lineType')" :label="$t('chart.line_type')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase('lineType')">
|
||||
<el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>
|
||||
<el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -211,18 +203,12 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('lineArea')" :label="$t('chart.line_area')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase('lineArea')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('bubble_scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('scatterSymbol')">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -231,14 +217,13 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('bubble_scatterSymbolSize')" :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase('scatterSymbolSize')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.liquid_shape')" class="form-item">
|
||||
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
|
||||
<!--chart-mix-end-->
|
||||
<!--liquid-begin-->
|
||||
<el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
|
||||
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
|
||||
<el-option
|
||||
v-for="item in liquidShapeOptions"
|
||||
:key="item.value"
|
||||
@ -247,24 +232,26 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidMax')" :label="$t('chart.liquid_max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidSize')" :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase('liquidSize')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidOutlineBorder')" :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase('liquidOutlineBorder')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidOutlineDistance')" :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase('liquidOutlineDistance')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidWaveLength')" :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase('liquidWaveLength')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('liquidWaveCount')" :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase('liquidWaveCount')" />
|
||||
</el-form-item>
|
||||
|
||||
<!--liquid-end-->
|
||||
</el-form>
|
||||
</el-col>
|
||||
</div>
|
||||
@ -282,6 +269,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -364,8 +358,12 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeBarSizeCase() {
|
||||
changeBarSizeCase(modifyName) {
|
||||
this.sizeForm['modifyName'] = modifyName
|
||||
this.$emit('onSizeChange', this.sizeForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,43 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form v-show="chart.type && (chart.type.includes('bar'))" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
<el-form ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<!--bar-begin-->
|
||||
<el-form-item v-show="showProperty('adapt')" :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase('barDefault')">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
<el-form-item v-show="showProperty('barGap')" :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider
|
||||
v-model="sizeForm.barGap"
|
||||
:disabled="sizeForm.barDefault"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.1"
|
||||
@change="changeBarSizeCase('barGap')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
<!--bar-end-->
|
||||
<!--line-begin-->
|
||||
<el-form-item
|
||||
v-show="showProperty('lineWidth')"
|
||||
:label="$t('chart.line_width')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.lineWidth"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="10"
|
||||
@change="changeBarSizeCase('lineWidth')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('lineSymbol')" :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase('lineSymbol')">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -33,62 +46,105 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('lineSymbolSize')"
|
||||
:label="$t('chart.line_symbol_size')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.lineSymbolSize"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="20"
|
||||
@change="changeBarSizeCase('lineSymbolSize')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('lineSmooth')" :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase('lineSmooth')">{{ $t('chart.line_smooth') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--line-end-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.pie_inner_radius_percent')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<!--pie-begin-->
|
||||
<el-form-item
|
||||
v-show="showProperty('pieInnerRadius')"
|
||||
:label="$t('chart.pie_inner_radius_percent')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.pieInnerRadius"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@change="changeBarSizeCase('pieInnerRadius')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.pie_outer_radius_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('pieOuterRadius')"
|
||||
:label="$t('chart.pie_outer_radius_size')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.pieOuterRadius"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@change="changeBarSizeCase('pieOuterRadius')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <span v-show="chart.type && chart.type.includes('pie-rose')">-->
|
||||
<!-- <el-form-item :label="$t('chart.rose_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="area">{{ $t('chart.area_mode') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.rose_radius')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.pieRoseRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </span>-->
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
|
||||
<!--pie-end-->
|
||||
<!--radar-begin-->
|
||||
<el-form-item v-show="showProperty('radarShape')" :label="$t('chart.shape')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase('radarShape')">
|
||||
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
|
||||
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.radarSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('radarSize')"
|
||||
:label="$t('chart.radar_size')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.radarSize"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="0"
|
||||
:max="100"
|
||||
@change="changeBarSizeCase('radarSize')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--radar-end-->
|
||||
<!--table-begin-->
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item v-show="chart.type && chart.type === 'table-info'" :label="$t('chart.table_page_mode')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageMode" :placeholder="$t('chart.table_page_mode')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tablePageMode')" label-width="100px" :label="$t('chart.table_page_mode')" class="form-item">
|
||||
<el-select
|
||||
v-model="sizeForm.tablePageMode"
|
||||
:placeholder="$t('chart.table_page_mode')"
|
||||
@change="changeBarSizeCase('tablePageMode')"
|
||||
>
|
||||
<el-option :label="$t('chart.page_mode_page')" value="page" />
|
||||
<el-option :label="$t('chart.page_mode_pull')" value="pull" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type && chart.type === 'table-info' && sizeForm.tablePageMode === 'page'" :label="$t('chart.table_page_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.tablePageSize" :placeholder="$t('chart.table_page_size')" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('tablePageSize')&&sizeForm.tablePageMode === 'page'"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_page_size')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.tablePageSize"
|
||||
:placeholder="$t('chart.table_page_size')"
|
||||
@change="changeBarSizeCase('tablePageSize')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in pageSizeOptions"
|
||||
:key="item.value"
|
||||
@ -97,34 +153,96 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('tableTitleFontSize')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_title_fontsize')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.tableTitleFontSize"
|
||||
:placeholder="$t('chart.table_title_fontsize')"
|
||||
@change="changeBarSizeCase('tableTitleFontSize')"
|
||||
>
|
||||
<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.table_item_fontsize')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('tableItemFontSize')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_item_fontsize')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.tableItemFontSize"
|
||||
:placeholder="$t('chart.table_item_fontsize')"
|
||||
@change="changeBarSizeCase('tableItemFontSize')"
|
||||
>
|
||||
<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.table_header_align')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableHeaderAlign" :placeholder="$t('chart.table_header_align')" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('tableHeaderAlign')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_header_align')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.tableHeaderAlign"
|
||||
:placeholder="$t('chart.table_header_align')"
|
||||
@change="changeBarSizeCase('tableHeaderAlign')"
|
||||
>
|
||||
<el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_item_align')" class="form-item">
|
||||
<el-select v-model="sizeForm.tableItemAlign" :placeholder="$t('chart.table_item_align')" @change="changeBarSizeCase">
|
||||
<el-form-item v-show="showProperty('tableItemAlign')" label-width="100px" :label="$t('chart.table_item_align')" class="form-item">
|
||||
<el-select
|
||||
v-model="sizeForm.tableItemAlign"
|
||||
:placeholder="$t('chart.table_item_align')"
|
||||
@change="changeBarSizeCase('tableItemAlign')"
|
||||
>
|
||||
<el-option v-for="option in alignOptions" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_title_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableTitleHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('tableTitleHeight')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_title_height')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.tableTitleHeight"
|
||||
:min="20"
|
||||
:max="100"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
@change="changeBarSizeCase('tableTitleHeight')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_item_height')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableItemHeight" :min="20" :max="100" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('tableItemHeight')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_item_height')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.tableItemHeight"
|
||||
:min="20"
|
||||
:max="100"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
@change="changeBarSizeCase('tableItemHeight')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.table_column_width_config')" class="form-item">
|
||||
<el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('tableColumnMode')"
|
||||
label-width="100px"
|
||||
:label="$t('chart.table_column_width_config')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-radio-group v-model="sizeForm.tableColumnMode" @change="changeBarSizeCase('tableColumnMode')">
|
||||
<el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
|
||||
<el-radio label="custom">
|
||||
<span>{{ $t('chart.table_column_custom') }}</span>
|
||||
@ -139,48 +257,102 @@
|
||||
<i class="el-icon-info" style="cursor: pointer;color: #606266;margin-left: 4px;" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="sizeForm.tableColumnMode === 'custom'" label="" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.tableColumnWidth" :min="10" :max="500" show-input :show-input-controls="false" input-size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('tableColumnWidth') && sizeForm.tableColumnMode === 'custom'"
|
||||
label=""
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.tableColumnWidth"
|
||||
:min="10"
|
||||
:max="500"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
@change="changeBarSizeCase('tableColumnWidth')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">-->
|
||||
<!-- <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
|
||||
<!--table-end-->
|
||||
<!--gauge-begin-->
|
||||
<el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('gaugeStartAngle')"
|
||||
:label="$t('chart.start_angle')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.gaugeStartAngle"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="-360"
|
||||
:max="360"
|
||||
@change="changeBarSizeCase('gaugeStartAngle')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('gaugeEndAngle')"
|
||||
:label="$t('chart.end_angle')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.gaugeEndAngle"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="-360"
|
||||
:max="360"
|
||||
@change="changeBarSizeCase('gaugeEndAngle')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
|
||||
<el-form-item :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
|
||||
<!--gauge-end-->
|
||||
<!--text&label-end-->
|
||||
<el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
|
||||
<el-select
|
||||
v-model="sizeForm.quotaFontSize"
|
||||
:placeholder="$t('chart.quota_font_size')"
|
||||
@change="changeBarSizeCase('quotaFontSize')"
|
||||
>
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.dimension_show')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item
|
||||
v-show="showProperty('dimensionShow')"
|
||||
:label="$t('chart.dimension_show')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.dimension_font_size')" class="form-item">
|
||||
<el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
|
||||
<el-form-item
|
||||
v-show="showProperty('dimensionFontSize')"
|
||||
:label="$t('chart.dimension_font_size')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.dimensionFontSize"
|
||||
:placeholder="$t('chart.dimension_font_size')"
|
||||
@change="changeBarSizeCase('dimensionFontSize')"
|
||||
>
|
||||
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="chart.type" :label="$t('chart.space_split')" class="form-item">
|
||||
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('spaceSplit')"
|
||||
:label="$t('chart.space_split')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type.includes('scatter')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<!--text&label-end-->
|
||||
<!--scatter-begin-->
|
||||
<el-form-item v-show="showProperty('scatterSymbol')" :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select
|
||||
v-model="sizeForm.scatterSymbol"
|
||||
:placeholder="$t('chart.line_symbol')"
|
||||
@change="changeBarSizeCase('scatterSymbol')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
@ -189,79 +361,25 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('scatterSymbolSize')"
|
||||
:label="$t('chart.bubble_size')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.scatterSymbolSize"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="40"
|
||||
@change="changeBarSizeCase('scatterSymbolSize')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'treemap'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<!-- <el-form-item :label="$t('chart.width')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.treemapWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item :label="$t('chart.height')" class="form-item form-item-slider">-->
|
||||
<!-- <el-slider v-model="sizeForm.treemapHeight" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />-->
|
||||
<!-- </el-form-item>-->
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'chart-mix'" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_bar') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.adapt')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barWidth" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="1" :max="80" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bar_gap')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.barGap" :disabled="sizeForm.barDefault" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" :step="0.1" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_line') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('chart.line_type')" class="form-item">-->
|
||||
<!-- <el-radio-group v-model="sizeForm.lineType" @change="changeBarSizeCase">-->
|
||||
<!-- <el-radio-button label="solid">{{ $t('chart.line_type_solid') }}</el-radio-button>-->
|
||||
<!-- <el-radio-button label="dashed">{{ $t('chart.line_type_dashed') }}</el-radio-button>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item :label="$t('chart.line_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.lineSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
|
||||
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('chart.line_area')" class="form-item">-->
|
||||
<!-- <el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.chart_scatter') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
|
||||
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
|
||||
<el-option
|
||||
v-for="item in lineSymbolOptions"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form v-show="chart.type && chart.type === 'liquid'" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.liquid_shape')" class="form-item">
|
||||
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase">
|
||||
<!--scatter-end-->
|
||||
<!--liquid-begin-->
|
||||
<el-form-item v-show="showProperty('liquidShape')" :label="$t('chart.liquid_shape')" class="form-item">
|
||||
<el-select v-model="sizeForm.liquidShape" :placeholder="$t('chart.liquid_shape')" @change="changeBarSizeCase('liquidShape')">
|
||||
<el-option
|
||||
v-for="item in liquidShapeOptions"
|
||||
:key="item.value"
|
||||
@ -270,19 +388,45 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.liquid_max')" class="form-item form-item-slider">
|
||||
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('liquidMax')"
|
||||
:label="$t('chart.liquid_max')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-input-number v-model="sizeForm.liquidMax" :min="1" size="mini" @change="changeBarSizeCase('liquidMax')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
|
||||
<el-form-item
|
||||
v-show="showProperty('liquidSize')"
|
||||
:label="$t('chart.radar_size')"
|
||||
class="form-item form-item-slider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="sizeForm.liquidSize"
|
||||
show-input
|
||||
:show-input-controls="false"
|
||||
input-size="mini"
|
||||
:min="1"
|
||||
:max="100"
|
||||
@change="changeBarSizeCase('liquidSize')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!--liquid-end-->
|
||||
<el-form-item v-if="showProperty(symbolOpacity)" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="showProperty('symbolStrokeWidth') && sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_style.border')" class="form-item form-item-slider">
|
||||
<el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase('symbolStrokeWidth')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DEFAULT_SIZE } from '../../chart/chart'
|
||||
|
||||
export default {
|
||||
name: 'SizeSelectorAntV',
|
||||
props: {
|
||||
@ -293,6 +437,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -382,46 +533,56 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeBarSizeCase() {
|
||||
changeBarSizeCase(modifyName) {
|
||||
this.sizeForm['modifyName'] = modifyName
|
||||
this.$emit('onSizeChange', this.sizeForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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
|
||||
}
|
||||
.shape-item {
|
||||
padding: 6px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-form-item{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0
|
||||
}
|
||||
.divider-style>>>.el-divider__text{
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.divider-style >>> .el-divider__text {
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,25 +2,25 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="tooltipForm.show">
|
||||
<el-form-item :label="$t('chart.trigger_position')" class="form-item">
|
||||
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
|
||||
<el-form-item v-show="showProperty('trigger')" :label="$t('chart.trigger_position')" class="form-item">
|
||||
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr('trigger')">
|
||||
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
|
||||
<el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item">
|
||||
<el-form-item v-show="showProperty('formatter')" class="form-item">
|
||||
<span slot="label">
|
||||
<span class="span-box">
|
||||
<span>{{ $t('chart.content_formatter') }}</span>
|
||||
@ -44,7 +44,7 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</span>
|
||||
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
|
||||
<el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr('formatter')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -65,6 +65,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -111,11 +118,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeTooltipAttr() {
|
||||
changeTooltipAttr(modifyName) {
|
||||
if (!this.tooltipForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.tooltipForm['modifyName'] = modifyName
|
||||
this.$emit('onTooltipChange', this.tooltipForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
|
||||
<el-form-item :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
|
||||
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr('show')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="tooltipForm.show">
|
||||
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
|
||||
<el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr('textStyle')">
|
||||
<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.text_color')" class="form-item">
|
||||
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr" />
|
||||
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
|
||||
<el-color-picker v-model="tooltipForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeTooltipAttr('textStyle')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -33,6 +33,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -79,11 +86,15 @@ export default {
|
||||
}
|
||||
this.fontSize = arr
|
||||
},
|
||||
changeTooltipAttr() {
|
||||
changeTooltipAttr(modifyName) {
|
||||
if (!this.tooltipForm.show) {
|
||||
this.isSetting = false
|
||||
}
|
||||
this.tooltipForm['modifyName'] = modifyName
|
||||
this.$emit('onTooltipChange', this.tooltipForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,28 +2,28 @@
|
||||
<div style="width: 100%">
|
||||
<el-col>
|
||||
<el-form ref="totalForm" :model="totalForm" label-width="80px" size="mini">
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-divider v-show="showProperty('row')" content-position="center" class="divider-style">{{ $t('chart.row_cfg') }}</el-divider>
|
||||
<el-form-item v-show="showProperty('row')" :label="$t('chart.total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.row.showGrandTotals" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="totalForm.row.showGrandTotals">
|
||||
<div v-show="showProperty('row') && totalForm.row.showGrandTotals">
|
||||
<el-form-item :label="$t('chart.total_position')" class="form-item">
|
||||
<el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg">
|
||||
<el-radio-group v-model="totalForm.row.reverseLayout" @change="changeTotalCfg('row')">
|
||||
<el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.total_label')" class="form-item">
|
||||
<el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
|
||||
<el-input v-model="totalForm.row.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('row')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item :label="$t('chart.sub_total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('row')" :label="$t('chart.sub_total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.row.showSubTotals" :disabled="rowNum < 2" @change="changeTotalCfg('row')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="totalForm.row.showSubTotals">
|
||||
<div v-show="showProperty('row') && totalForm.row.showSubTotals">
|
||||
<el-form-item :label="$t('chart.total_position')" class="form-item">
|
||||
<el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg">
|
||||
<el-radio-group v-model="totalForm.row.reverseSubLayout" :disabled="rowNum < 2" @change="changeTotalCfg('row')">
|
||||
<el-radio :label="true">{{ $t('chart.total_pos_top') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('chart.total_pos_bottom') }}</el-radio>
|
||||
</el-radio-group>
|
||||
@ -33,34 +33,34 @@
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
|
||||
<el-form-item :label="$t('chart.total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-divider v-show="showProperty('col')" content-position="center" class="divider-style">{{ $t('chart.col_cfg') }}</el-divider>
|
||||
<el-form-item v-show="showProperty('col')" :label="$t('chart.total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.col.showGrandTotals" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="totalForm.col.showGrandTotals">
|
||||
<div v-show="showProperty('col') && totalForm.col.showGrandTotals">
|
||||
<el-form-item :label="$t('chart.total_position')" class="form-item">
|
||||
<el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg">
|
||||
<el-radio-group v-model="totalForm.col.reverseLayout" @change="changeTotalCfg('col')">
|
||||
<el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.total_label')" class="form-item">
|
||||
<el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
|
||||
<el-input v-model="totalForm.col.label" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item :label="$t('chart.sub_total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg">{{ $t('chart.show') }}</el-checkbox>
|
||||
<el-form-item v-show="showProperty('col')" :label="$t('chart.sub_total_show')" class="form-item">
|
||||
<el-checkbox v-model="totalForm.col.showSubTotals" :disabled="colNum < 2" @change="changeTotalCfg('col')">{{ $t('chart.show') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<div v-show="totalForm.col.showSubTotals">
|
||||
<div v-show="showProperty('col') && totalForm.col.showSubTotals">
|
||||
<el-form-item :label="$t('chart.total_position')" class="form-item">
|
||||
<el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg">
|
||||
<el-radio-group v-model="totalForm.col.reverseSubLayout" :disabled="colNum < 2" @change="changeTotalCfg('col')">
|
||||
<el-radio :label="true">{{ $t('chart.total_pos_left') }}</el-radio>
|
||||
<el-radio :label="false">{{ $t('chart.total_pos_right') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('chart.total_label')" class="form-item">
|
||||
<el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg" />
|
||||
<el-input v-model="totalForm.col.subLabel" :disabled="colNum < 2" style="width: 160px;" :placeholder="$t('chart.total_label')" size="mini" clearable @change="changeTotalCfg('col')" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
@ -77,6 +77,13 @@ export default {
|
||||
chart: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
propertyInner: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -139,8 +146,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
changeTotalCfg() {
|
||||
changeTotalCfg(modifyName) {
|
||||
this.totalForm['modifyName'] = modifyName
|
||||
this.$emit('onTotalCfgChange', this.totalForm)
|
||||
},
|
||||
showProperty(property) {
|
||||
return this.propertyInner.includes(property)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -652,11 +652,12 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
|
||||
<chart-style
|
||||
v-if="chartProperties"
|
||||
v-if="chartProperties || view.isPlugin"
|
||||
:param="param"
|
||||
:view="view"
|
||||
:chart="chart"
|
||||
:properties="chartProperties"
|
||||
:property-inner-all="chartPropertyInnerAll"
|
||||
@calcStyle="calcStyle"
|
||||
@onColorChange="onColorChange"
|
||||
@onSizeChange="onSizeChange"
|
||||
@ -1167,12 +1168,12 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
chartProperties() {
|
||||
chartConfig() {
|
||||
const _this = this
|
||||
if (_this.chart && _this.chart.render) {
|
||||
const viewConfig = this.allViewRender.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
|
||||
if (viewConfig && viewConfig.length) {
|
||||
return viewConfig[0].properties
|
||||
return viewConfig[0]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
@ -1180,6 +1181,12 @@ export default {
|
||||
return null
|
||||
}
|
||||
},
|
||||
chartProperties() {
|
||||
return this.chartConfig ? this.chartConfig.properties : null
|
||||
},
|
||||
chartPropertyInnerAll() {
|
||||
return this.chartConfig ? this.chartConfig.propertyInner : null
|
||||
},
|
||||
chartType() {
|
||||
return this.chart.type
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-row class="view-panel">
|
||||
<plugin-com
|
||||
v-if="view.isPlugin"
|
||||
v-if="pluginShow"
|
||||
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
|
||||
class="attr-style theme-border-class"
|
||||
:component-name="view.type + '-style'"
|
||||
@ -29,22 +29,24 @@
|
||||
<el-row>
|
||||
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
|
||||
<el-collapse v-model="attrActiveNames" class="style-collapse">
|
||||
<el-collapse-item name="color" :title="$t('chart.color')">
|
||||
<el-collapse-item name="color" v-show="showPropertiesCollapse(['color-selector'])" :title="$t('chart.color')">
|
||||
<color-selector
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['color-selector']"
|
||||
@onColorChange="onColorChange($event,'color-selector')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item
|
||||
v-show="showPropertiesCollapse(['size-selector','no-mix'])"
|
||||
v-show="showPropertiesCollapse(['size-selector'])"
|
||||
name="size"
|
||||
:title="$t('chart.size')"
|
||||
>
|
||||
<size-selector
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:property-inner="propertyInnerAll['size-selector']"
|
||||
:chart="chart"
|
||||
@onSizeChange="onSizeChange($event,'size-selector')"
|
||||
/>
|
||||
@ -58,6 +60,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['size-selector-ant-v']"
|
||||
@onSizeChange="onSizeChange($event,'size-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -71,6 +74,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['label-selector']"
|
||||
@onLabelChange="onLabelChange($event,'label-selector')"
|
||||
/>
|
||||
<label-selector-ant-v
|
||||
@ -78,6 +82,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['label-selector-ant-v']"
|
||||
@onLabelChange="onLabelChange($event,'label-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -91,6 +96,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['tooltip-selector']"
|
||||
@onTooltipChange="onTooltipChange($event,'tooltip-selector')"
|
||||
/>
|
||||
<tooltip-selector-ant-v
|
||||
@ -98,6 +104,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['tooltip-selector-ant-v']"
|
||||
@onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -110,6 +117,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['total-cfg']"
|
||||
@onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -128,6 +136,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['x-axis-selector']"
|
||||
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
|
||||
/>
|
||||
<x-axis-selector-ant-v
|
||||
@ -135,6 +144,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['x-axis-selector-ant-v']"
|
||||
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -148,6 +158,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['y-axis-selector']"
|
||||
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
|
||||
/>
|
||||
<y-axis-selector-ant-v
|
||||
@ -155,6 +166,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['y-axis-selector-ant-v']"
|
||||
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -168,6 +180,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['y-axis-ext-selector']"
|
||||
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
|
||||
/>
|
||||
<y-axis-ext-selector-ant-v
|
||||
@ -175,6 +188,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['y-axis-ext-selector-ant-v']"
|
||||
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -188,6 +202,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['split-selector']"
|
||||
@onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
|
||||
/>
|
||||
<split-selector-ant-v
|
||||
@ -195,6 +210,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['split-selector-ant-v']"
|
||||
@onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -204,6 +220,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['title-selector']"
|
||||
@onTextChange="onTextChange($event,'title-selector')"
|
||||
/>
|
||||
<title-selector-ant-v
|
||||
@ -211,6 +228,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['title-selector-ant-v']"
|
||||
@onTextChange="onTextChange($event,'title-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -224,6 +242,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['legend-selector']"
|
||||
@onLegendChange="onLegendChange($event,'legend-selector')"
|
||||
/>
|
||||
<legend-selector-ant-v
|
||||
@ -231,6 +250,7 @@
|
||||
:param="param"
|
||||
class="attr-selector"
|
||||
:chart="chart"
|
||||
:property-inner="propertyInnerAll['legend-selector-ant-v']"
|
||||
@onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
@ -313,6 +333,10 @@ export default {
|
||||
properties: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
propertyInnerAll: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -322,6 +346,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pluginShow() {
|
||||
return this.view.isPlugin && !this.batchOptStatus
|
||||
},
|
||||
...mapState([
|
||||
'batchOptStatus'
|
||||
])
|
||||
@ -336,7 +363,7 @@ export default {
|
||||
showPropertiesCollapse(propertiesInfo) {
|
||||
let includeCount = 0
|
||||
// Property does not support mixed mode
|
||||
if (propertiesInfo.includes('no-mix') && this.chart.type === 'mix') {
|
||||
if (propertiesInfo.includes('no-mix') && this.chart.type.includes('mix')) {
|
||||
return false
|
||||
} else {
|
||||
propertiesInfo.forEach(property => {
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
:view="batchOptChartInfo"
|
||||
:chart="batchOptChartInfo"
|
||||
:properties="mixProperties"
|
||||
:property-inner-all="mixPropertiesInner"
|
||||
@calcStyle="calcStyle"
|
||||
@onColorChange="onColorChange"
|
||||
@onSizeChange="onSizeChange"
|
||||
@ -49,7 +50,8 @@ export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'batchOptChartInfo',
|
||||
'mixProperties'
|
||||
'mixProperties',
|
||||
'mixPropertiesInner'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user