Merge pull request #6681 from dataease/pr@dev@feat_quota_chart_suffix
feat: 指标卡支持空值处理和后缀 #5413 #5576
This commit is contained in:
commit
c497f02cf4
@ -205,34 +205,34 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {viewData} from '@/api/panel/panel'
|
||||
import {viewInfo} from '@/api/link'
|
||||
import { viewData } from '@/api/panel/panel'
|
||||
import { viewInfo } from '@/api/link'
|
||||
import ChartComponent from '@/views/chart/components/ChartComponent.vue'
|
||||
import TableNormal from '@/views/chart/components/table/TableNormal'
|
||||
import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
|
||||
import {uuid} from 'vue-uuid'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import bus from '@/utils/bus'
|
||||
import {mapState} from 'vuex'
|
||||
import {isChange} from '@/utils/conditionUtil'
|
||||
import {BASE_CHART_STRING} from '@/views/chart/chart/chart'
|
||||
import {deepCopy} from '@/components/canvas/utils/utils'
|
||||
import {getLinkToken, getToken} from '@/utils/auth'
|
||||
import { mapState } from 'vuex'
|
||||
import { isChange } from '@/utils/conditionUtil'
|
||||
import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { getLinkToken, getToken } from '@/utils/auth'
|
||||
import DrillPath from '@/views/chart/view/DrillPath'
|
||||
import {areaMapping} from '@/api/map/map'
|
||||
import { areaMapping } from '@/api/map/map'
|
||||
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
|
||||
import EditBarView from '@/components/canvas/components/editor/EditBarView'
|
||||
import {adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj} from '@/components/canvas/utils/style'
|
||||
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
|
||||
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
|
||||
import {viewEditSave, viewPropsSave} from '@/api/chart/chart'
|
||||
import {checkAddHttp} from '@/utils/urlUtils'
|
||||
import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
|
||||
import { checkAddHttp } from '@/utils/urlUtils'
|
||||
import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
|
||||
import Vue from 'vue'
|
||||
import {formatterItem, valueFormatter} from '@/views/chart/chart/formatter'
|
||||
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
|
||||
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
|
||||
import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
|
||||
import {equalsAny} from '@/utils/StringUtils'
|
||||
import { equalsAny } from '@/utils/StringUtils'
|
||||
|
||||
export default {
|
||||
name: 'UserView',
|
||||
@ -267,7 +267,7 @@ export default {
|
||||
outStyle: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function () {
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
@ -306,7 +306,7 @@ export default {
|
||||
canvasStyleData: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: function () {
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
@ -508,7 +508,7 @@ export default {
|
||||
|
||||
watch: {
|
||||
'innerPadding': {
|
||||
handler: function (val1, val2) {
|
||||
handler: function(val1, val2) {
|
||||
if (val1 !== val2) {
|
||||
this.resizeChart()
|
||||
}
|
||||
@ -516,7 +516,7 @@ export default {
|
||||
deep: true
|
||||
},
|
||||
'cfilters': {
|
||||
handler: function (val1, val2) {
|
||||
handler: function(val1, val2) {
|
||||
if (isChange(val1, val2) && !this.isFirstLoad) {
|
||||
this.getData(this.element.propValue.viewId)
|
||||
this.getDataLoading = true
|
||||
@ -532,13 +532,13 @@ export default {
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
resultCount: function () {
|
||||
resultCount: function() {
|
||||
this.getData(this.element.propValue.viewId, false)
|
||||
},
|
||||
resultMode: function () {
|
||||
resultMode: function() {
|
||||
this.getData(this.element.propValue.viewId, false)
|
||||
},
|
||||
gap: function () {
|
||||
gap: function() {
|
||||
this.resizeChart()
|
||||
},
|
||||
// 监听外部的样式变化 (非实时性要求)
|
||||
@ -557,13 +557,13 @@ export default {
|
||||
deep: true
|
||||
},
|
||||
// 监听外部计时器变化
|
||||
searchCount: function (val1) {
|
||||
searchCount: function(val1) {
|
||||
// 内部计时器启动 忽略外部计时器
|
||||
if (val1 > 0 && this.requestStatus !== 'waiting' && !this.innerRefreshTimer) {
|
||||
this.getData(this.element.propValue.viewId)
|
||||
}
|
||||
},
|
||||
'chartType': function (newVal, oldVal) {
|
||||
'chartType': function(newVal, oldVal) {
|
||||
if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
|
||||
this.initAreas()
|
||||
}
|
||||
@ -577,10 +577,10 @@ export default {
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'chart.yaxis': function (newVal, oldVal) {
|
||||
'chart.yaxis': function(newVal, oldVal) {
|
||||
this.$emit('fill-chart-2-parent', this.chart)
|
||||
},
|
||||
'chart.title': function (newVal, oldVal) {
|
||||
'chart.title': function(newVal, oldVal) {
|
||||
this.$emit('fill-chart-2-parent', this.chart)
|
||||
}
|
||||
},
|
||||
@ -691,7 +691,7 @@ export default {
|
||||
})
|
||||
},
|
||||
pluginEditHandler(e) {
|
||||
this.$emit('trigger-plugin-edit', {e, id: this.element.id})
|
||||
this.$emit('trigger-plugin-edit', { e, id: this.element.id })
|
||||
},
|
||||
batchOptChange(param) {
|
||||
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
|
||||
@ -700,7 +700,7 @@ export default {
|
||||
},
|
||||
optFromBatchSingleProp(param) {
|
||||
this.$store.commit('canvasChange')
|
||||
const updateParams = {'id': this.chart.id}
|
||||
const updateParams = { 'id': this.chart.id }
|
||||
if (param.custom === 'customAttr') {
|
||||
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
|
||||
if (!sourceCustomAttr[param.property]) {
|
||||
@ -733,11 +733,11 @@ export default {
|
||||
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
|
||||
this.active && bus.$emit('current-component-change')
|
||||
})
|
||||
this.$store.commit('recordViewEdit', {viewId: this.chart.id, hasEdit: true})
|
||||
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
|
||||
this.mergeScale()
|
||||
},
|
||||
optFromBatchThemeChange() {
|
||||
const updateParams = {'id': this.chart.id}
|
||||
const updateParams = { 'id': this.chart.id }
|
||||
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
|
||||
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
|
||||
adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type)
|
||||
@ -750,7 +750,7 @@ export default {
|
||||
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
|
||||
this.active && bus.$emit('current-component-change')
|
||||
})
|
||||
this.$store.commit('recordViewEdit', {viewId: this.chart.id, hasEdit: true})
|
||||
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
|
||||
this.mergeScale()
|
||||
},
|
||||
resizeChart() {
|
||||
@ -760,7 +760,7 @@ export default {
|
||||
this.chartResize(this.changeIndex)
|
||||
} else if (this.$refs[this.element.propValue.id]) {
|
||||
this.chart.isPlugin
|
||||
? this.$refs[this.element.propValue.id].callPluginInner({methodName: 'chartResize'})
|
||||
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
|
||||
: this.$refs[this.element.propValue.id].chartResize()
|
||||
}
|
||||
},
|
||||
@ -825,11 +825,11 @@ export default {
|
||||
const filters = this.filter.filter
|
||||
const group = this.groupRequiredInvalid(filters)
|
||||
if (group.unReady?.length) {
|
||||
this.view.unReadyMsg = '请先完成必填项过滤器!'
|
||||
this.view && (this.view.unReadyMsg = '请先完成必填项过滤器!')
|
||||
this.getDataLoading = false
|
||||
return
|
||||
} else {
|
||||
this.view.unReadyMsg = ''
|
||||
this.view && (this.view.unReadyMsg = '')
|
||||
}
|
||||
if (this.getDataLoading || Vue.prototype.$currentHttpRequestList.get(`/chart/view/getData/${id}/${this.panelInfo.id}`)) {
|
||||
const url = `/chart/view/getData/${id}/${this.panelInfo.id}`
|
||||
@ -860,7 +860,7 @@ export default {
|
||||
}
|
||||
if (this.panelInfo.proxy) {
|
||||
// method = viewInfo
|
||||
requestInfo.proxy = {userId: this.panelInfo.proxy}
|
||||
requestInfo.proxy = { userId: this.panelInfo.proxy }
|
||||
}
|
||||
// table-info明细表增加分页
|
||||
if (this.view && this.view.customAttr) {
|
||||
@ -879,7 +879,7 @@ export default {
|
||||
this.chart = response.data
|
||||
this.view = response.data
|
||||
if (this.chart.type.includes('table')) {
|
||||
this.$store.commit('setLastViewRequestInfo', {viewId: id, requestInfo: requestInfo})
|
||||
this.$store.commit('setLastViewRequestInfo', { viewId: id, requestInfo: requestInfo })
|
||||
}
|
||||
this.buildInnerRefreshTimer(this.chart.refreshViewEnable, this.chart.refreshUnit, this.chart.refreshTime)
|
||||
this.$emit('fill-chart-2-parent', this.chart)
|
||||
@ -1048,7 +1048,7 @@ export default {
|
||||
chartClick(param) {
|
||||
if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
|
||||
(this.chart.type === 'map' || this.chart.type === 'buddle-map') && this.sendToChildren(param)
|
||||
this.drillClickDimensionList.push({dimensionList: param.data.dimensionList})
|
||||
this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
|
||||
this.getData(this.element.propValue.viewId)
|
||||
} else if (this.chart.drillFields.length > 0) {
|
||||
this.$message({
|
||||
@ -1308,7 +1308,7 @@ export default {
|
||||
this.timeMachine = setTimeout(() => {
|
||||
if (index === this.changeIndex) {
|
||||
this.chart.isPlugin
|
||||
? this.$refs[this.element.propValue.id].callPluginInner({methodName: 'chartResize'})
|
||||
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
|
||||
: this.$refs[this.element.propValue.id].chartResize()
|
||||
}
|
||||
this.destroyTimeMachine()
|
||||
|
||||
@ -1161,6 +1161,12 @@ export default {
|
||||
quota_color: 'Value Color',
|
||||
dimension_font_size: 'Name FontSize',
|
||||
quota_font_size: 'Value FontSize',
|
||||
quota_suffix: 'Value Suffix',
|
||||
quota_suffix_font_size: 'Value Suffix FontSize',
|
||||
quota_suffix_color: 'Value Suffix Color',
|
||||
quota_suffix_font_family: 'Value Suffix Font Family',
|
||||
quota_suffix_text_style: 'Value Suffix Style',
|
||||
quota_suffix_letter_space: 'Value Suffix Letter Space',
|
||||
space_split: 'Name/Value Space',
|
||||
only_one_quota: 'Only support 1 quota',
|
||||
only_one_result: 'Only show first result',
|
||||
@ -1436,6 +1442,7 @@ export default {
|
||||
value_formatter_suffix: 'Unit Suffix',
|
||||
value_formatter_thousand_separator: 'Thousand Separator',
|
||||
value_formatter_example: 'Example',
|
||||
value_suffix: 'Value Suffix',
|
||||
unit_none: 'None',
|
||||
unit_thousand: 'Thousand',
|
||||
unit_ten_thousand: 'Ten Thousand',
|
||||
|
||||
@ -1160,6 +1160,11 @@ export default {
|
||||
quota_color: '值顔色',
|
||||
dimension_font_size: '名稱字體大小',
|
||||
quota_font_size: '值字體大小',
|
||||
quota_suffix_font_size: '後綴字體大小',
|
||||
quota_suffix_font_family: '後綴字體',
|
||||
quota_suffix_text_style: '後綴樣式',
|
||||
quota_suffix_letter_space: '後綴字間距',
|
||||
quota_suffix_color: '後綴顏色',
|
||||
space_split: '名稱/值間隔',
|
||||
only_one_quota: '僅支持1個指標',
|
||||
only_one_result: '僅顯示第1個計算結果',
|
||||
|
||||
@ -1159,6 +1159,12 @@ export default {
|
||||
quota_color: '值颜色',
|
||||
dimension_font_size: '名称字体大小',
|
||||
quota_font_size: '值字体大小',
|
||||
quota_suffix: '值后缀',
|
||||
quota_suffix_font_size: '后缀字体大小',
|
||||
quota_suffix_font_family: '后缀字体',
|
||||
quota_suffix_text_style: '后缀样式',
|
||||
quota_suffix_letter_space: '后缀字间距',
|
||||
quota_suffix_color: '后缀颜色',
|
||||
space_split: '名称/值间隔',
|
||||
only_one_quota: '仅支持1个指标',
|
||||
only_one_result: '仅显示第1个计算结果',
|
||||
|
||||
@ -39,7 +39,8 @@ export const DEFAULT_COLOR_CASE = {
|
||||
mapStyle: 'normal',
|
||||
mapLineGradient: false,
|
||||
mapLineSourceColor: '#146C94',
|
||||
mapLineTargetColor: '#576CBC'
|
||||
mapLineTargetColor: '#576CBC',
|
||||
quotaSuffixColor: '#5470c6'
|
||||
}
|
||||
|
||||
export const DEFAULT_COLOR_CASE_DARK = {
|
||||
@ -63,7 +64,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
|
||||
mapStyle: 'darkblue',
|
||||
mapLineGradient: false,
|
||||
mapLineSourceColor: '#2F58CD',
|
||||
mapLineTargetColor: '#3795BD'
|
||||
mapLineTargetColor: '#3795BD',
|
||||
quotaSuffixColor: '#5470c6'
|
||||
}
|
||||
export const DEFAULT_SIZE = {
|
||||
barDefault: true,
|
||||
@ -161,7 +163,14 @@ export const DEFAULT_SIZE = {
|
||||
mapLineAnimateTrailLength: 1,
|
||||
wordSizeRange: [8, 32],
|
||||
wordSpacing: 6,
|
||||
showTableHeader: true
|
||||
showTableHeader: true,
|
||||
quotaSuffix: '',
|
||||
quotaSuffixFontSize: 12,
|
||||
quotaSuffixFontFamily: 'Microsoft YaHei',
|
||||
quotaSuffixFontIsItalic: false,
|
||||
quotaSuffixFontIsBolder: false,
|
||||
quotaSuffixLetterSpace: '0',
|
||||
quotaSuffixFontShadow: false
|
||||
}
|
||||
export const DEFAULT_SUSPENSION = {
|
||||
show: true
|
||||
|
||||
@ -251,6 +251,7 @@ export const TYPE_CONFIGS = [
|
||||
propertyInner: {
|
||||
'color-selector': [
|
||||
'quotaColor',
|
||||
'quotaSuffixColor',
|
||||
'dimensionColor'
|
||||
],
|
||||
'size-selector-ant-v': [
|
||||
@ -267,7 +268,13 @@ export const TYPE_CONFIGS = [
|
||||
'dimensionFontShadow',
|
||||
'spaceSplit',
|
||||
'hPosition',
|
||||
'vPosition'
|
||||
'vPosition',
|
||||
'quotaSuffix',
|
||||
'quotaSuffixFontSize',
|
||||
'quotaSuffixFontFamily',
|
||||
'quotaSuffixFontStyle',
|
||||
'quotaSuffixLetterSpace',
|
||||
'quotaSuffixFontShadow'
|
||||
],
|
||||
'title-selector-ant-v': [
|
||||
'show',
|
||||
@ -2123,6 +2130,7 @@ export const TYPE_CONFIGS = [
|
||||
|
||||
'color-selector': [
|
||||
'quotaColor',
|
||||
'quotaSuffixColor',
|
||||
'dimensionColor'
|
||||
],
|
||||
'size-selector': [
|
||||
@ -2139,7 +2147,13 @@ export const TYPE_CONFIGS = [
|
||||
'dimensionFontShadow',
|
||||
'spaceSplit',
|
||||
'hPosition',
|
||||
'vPosition'
|
||||
'vPosition',
|
||||
'quotaSuffix',
|
||||
'quotaSuffixFontSize',
|
||||
'quotaSuffixFontFamily',
|
||||
'quotaSuffixFontStyle',
|
||||
'quotaSuffixLetterSpace',
|
||||
'quotaSuffixFontShadow'
|
||||
],
|
||||
'title-selector': [
|
||||
'show',
|
||||
|
||||
@ -28,9 +28,12 @@
|
||||
:style="content_class"
|
||||
>
|
||||
<span :style="label_class">
|
||||
<p :style="label_content_class">
|
||||
<span :style="label_content_class">
|
||||
{{ result }}
|
||||
</p>
|
||||
</span>
|
||||
<span :style="label_suffix_class">
|
||||
{{ suffix }}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="dimensionShow"
|
||||
@ -49,7 +52,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
import { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
|
||||
import { CHART_CONT_FAMILY_MAP, DEFAULT_COLOR_CASE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
|
||||
import ChartTitleUpdate from '../ChartTitleUpdate.vue'
|
||||
|
||||
export default {
|
||||
@ -110,6 +113,10 @@ export default {
|
||||
remarkCfg: {
|
||||
show: false,
|
||||
content: ''
|
||||
},
|
||||
suffix: '',
|
||||
label_suffix_class: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -170,6 +177,7 @@ export default {
|
||||
this.label_class.color = customAttr.color.dimensionColor
|
||||
// color threshold
|
||||
this.colorThreshold(customAttr.color.quotaColor)
|
||||
this.label_suffix_class.color = customAttr.color.quotaSuffixColor ?? DEFAULT_COLOR_CASE.quotaSuffixColor
|
||||
}
|
||||
// 设置背景
|
||||
this.colorThreshold(null, true)
|
||||
@ -193,7 +201,15 @@ export default {
|
||||
|
||||
this.content_class.alignItems = customAttr.size.hPosition ? customAttr.size.hPosition : DEFAULT_SIZE.hPosition
|
||||
this.content_class.justifyContent = customAttr.size.vPosition ? customAttr.size.vPosition : DEFAULT_SIZE.vPosition
|
||||
|
||||
this.suffix = customAttr.size.quotaSuffix
|
||||
if (this.suffix) {
|
||||
this.label_suffix_class.fontSize = (customAttr.size.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize) + 'px'
|
||||
this.label_suffix_class.fontFamily = customAttr.size.quotaSuffixFontFamily ? customAttr.size.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
|
||||
this.label_suffix_class.fontWeight = customAttr.size.quotaSuffixFontIsBolder ? 'bold' : 'normal'
|
||||
this.label_suffix_class.fontStyle = customAttr.size.quotaSuffixFontIsItalic ? 'italic' : 'normal'
|
||||
this.label_suffix_class.letterSpacing = (customAttr.size.quotaSuffixLetterSpace ? customAttr.size.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace) + 'px'
|
||||
this.label_suffix_class.textShadow = customAttr.size.quotaSuffixFontShadow ? '2px 2px 4px' : 'none'
|
||||
}
|
||||
if (!this.dimensionShow) {
|
||||
this.label_space.marginTop = '0px'
|
||||
} else {
|
||||
@ -326,8 +342,12 @@ export default {
|
||||
resultFormat() {
|
||||
if (!this.chart.data) return
|
||||
const value = this.chart.data.series[0].data[0]
|
||||
const senior = JSON.parse(this.chart.senior)
|
||||
if (value === null || value === undefined) {
|
||||
this.result = '-'
|
||||
if (senior?.functionCfg?.emptyDataStrategy === 'setZero') {
|
||||
this.result = 0
|
||||
}
|
||||
return
|
||||
}
|
||||
let yAxis = []
|
||||
|
||||
@ -134,15 +134,15 @@ export default {
|
||||
showSlider() {
|
||||
return this.chart.type !== 'bidirectional-bar' &&
|
||||
!equalsAny(this.chart.type, 'map') &&
|
||||
!includesAny(this.chart.type, 'table')
|
||||
!includesAny(this.chart.type, 'table', 'text')
|
||||
},
|
||||
showEmptyStrategy() {
|
||||
return (this.chart.render === 'antv' &&
|
||||
includesAny(this.chart.type, 'line', 'bar', 'area', 'table')) ||
|
||||
includesAny(this.chart.type, 'line', 'bar', 'area', 'table', 'text')) ||
|
||||
(this.chart.render === 'echarts' && equalsAny(this.chart.type, 'map'))
|
||||
},
|
||||
showIgnoreOption() {
|
||||
return !equalsAny(this.chart.type, 'map', 'table-pivot', 'table-info')
|
||||
return !equalsAny(this.chart.type, 'map', 'table-pivot', 'table-info', 'text')
|
||||
},
|
||||
showEmptyDataFieldCtrl() {
|
||||
return this.showEmptyStrategy &&
|
||||
|
||||
@ -174,6 +174,18 @@
|
||||
@change="changeColorCase('quotaColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixColor')"
|
||||
:label="$t('chart.quota_suffix_color')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-color-picker
|
||||
v-model="colorForm.quotaSuffixColor"
|
||||
class="color-picker-style"
|
||||
:predefine="predefineColors"
|
||||
@change="changeColorCase('quotaSuffixColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('dimensionColor')"
|
||||
:label="$t('chart.dimension_color')"
|
||||
@ -593,6 +605,7 @@ export default {
|
||||
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
|
||||
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
|
||||
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
|
||||
this.colorForm.quotaSuffixColor = this.colorForm.quotaSuffixColor ? this.colorForm.quotaSuffixColor :DEFAULT_COLOR_CASE.quotaSuffixColor
|
||||
|
||||
this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle
|
||||
this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
|
||||
|
||||
@ -523,6 +523,34 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffix')"
|
||||
:label="$t('chart.quota_suffix')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="sizeForm.quotaSuffix"
|
||||
@blur="changeBarSizeCase('quotaSuffix')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixFontSize')"
|
||||
:label="$t('chart.quota_suffix_font_size')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.quotaSuffixFontSize"
|
||||
:placeholder="$t('chart.quota_suffix_font_size')"
|
||||
@change="changeBarSizeCase('quotaSuffixFontSize')"
|
||||
>
|
||||
<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="showProperty('quotaFontFamily')"
|
||||
:label="$t('chart.quota_font_family')"
|
||||
|
||||
@ -979,6 +979,95 @@
|
||||
>{{ $t('chart.p_bottom') }}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-divider v-if="showProperty('quotaSuffix')" />
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffix')"
|
||||
:label="$t('chart.quota_suffix')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="sizeForm.quotaSuffix"
|
||||
@blur="changeBarSizeCase('quotaSuffix')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixFontSize')"
|
||||
:label="$t('chart.quota_suffix_font_size')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.quotaSuffixFontSize"
|
||||
:placeholder="$t('chart.quota_suffix_font_size')"
|
||||
@change="changeBarSizeCase('quotaSuffixFontSize')"
|
||||
>
|
||||
<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="showProperty('quotaSuffixFontFamily')"
|
||||
:label="$t('chart.quota_suffix_font_family')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.quotaSuffixFontFamily"
|
||||
:placeholder="$t('chart.quota_suffix_font_family')"
|
||||
@change="changeBarSizeCase('quotaSuffixFontFamily')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontFamily"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixFontStyle')"
|
||||
:label="$t('chart.quota_suffix_text_style')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="sizeForm.quotaSuffixFontIsItalic"
|
||||
@change="changeBarSizeCase('quotaSuffixFontIsItalic')"
|
||||
>{{ $t('chart.italic') }}</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="sizeForm.quotaSuffixFontIsBolder"
|
||||
@change="changeBarSizeCase('quotaSuffixFontIsBolder')"
|
||||
>{{ $t('chart.bolder') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixLetterSpace')"
|
||||
:label="$t('chart.quota_suffix_letter_space')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-select
|
||||
v-model="sizeForm.quotaSuffixLetterSpace"
|
||||
:placeholder="$t('chart.quota_suffix_letter_space')"
|
||||
@change="changeBarSizeCase('quotaSuffixLetterSpace')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontLetterSpace"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="showProperty('quotaSuffixFontShadow')"
|
||||
:label="$t('chart.font_shadow')"
|
||||
class="form-item"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="sizeForm.quotaSuffixFontShadow"
|
||||
@change="changeBarSizeCase('quotaSuffixFontShadow')"
|
||||
>{{ $t('chart.font_shadow') }}</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-divider v-if="showProperty('dimensionShow')" />
|
||||
<el-form-item
|
||||
v-show="showProperty('dimensionShow')"
|
||||
@ -1639,6 +1728,13 @@ export default {
|
||||
this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
|
||||
this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
|
||||
|
||||
this.sizeForm.quotaSuffixFontSize = this.sizeForm.quotaSuffixFontSize ?? DEFAULT_SIZE.quotaSuffixFontSize
|
||||
this.sizeForm.quotaSuffixFontFamily = this.sizeForm.quotaSuffixFontFamily ? this.sizeForm.quotaSuffixFontFamily : DEFAULT_SIZE.quotaSuffixFontFamily
|
||||
this.sizeForm.quotaSuffixFontIsBolder = this.sizeForm.quotaSuffixFontIsBolder ? this.sizeForm.quotaSuffixFontIsBolder : DEFAULT_SIZE.quotaSuffixFontIsBolder
|
||||
this.sizeForm.quotaSuffixFontIsItalic = this.sizeForm.quotaSuffixFontIsItalic ? this.sizeForm.quotaSuffixFontIsItalic : DEFAULT_SIZE.quotaSuffixFontIsItalic
|
||||
this.sizeForm.quotaSuffixLetterSpace = this.sizeForm.quotaSuffixLetterSpace ? this.sizeForm.quotaSuffixLetterSpace : DEFAULT_SIZE.quotaSuffixLetterSpace
|
||||
this.sizeForm.quotaSuffixFontShadow = this.sizeForm.quotaSuffixFontShadow ? this.sizeForm.quotaSuffixFontShadow : DEFAULT_SIZE.quotaSuffixFontShadow
|
||||
|
||||
this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
|
||||
this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
|
||||
|
||||
|
||||
@ -2065,11 +2065,11 @@ export default {
|
||||
},
|
||||
showSeniorCfg() {
|
||||
return includesAny(this.view.type, 'bar', 'line', 'area', 'table') ||
|
||||
equalsAny(this.view.type, 'table-normal', 'table-info', 'map') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
|
||||
equalsAny(this.view.type, 'table-normal', 'table-info', 'map', 'text') || this.view.render === 'echarts' && includesAny(this.view.type, 'mix')
|
||||
},
|
||||
showFunctionCfg() {
|
||||
return includesAny(this.view.type, 'bar', 'line', 'area', 'mix', 'table') ||
|
||||
equalsAny(this.view.type, 'map')
|
||||
equalsAny(this.view.type, 'map', 'text')
|
||||
},
|
||||
showScrollCfg() {
|
||||
return equalsAny(this.view.type, 'table-normal', 'table-info')
|
||||
@ -3514,6 +3514,8 @@ export default {
|
||||
if (this.view?.senior?.functionCfg?.emptyDataStrategy === 'ignoreData') {
|
||||
this.view.senior.functionCfg.emptyDataStrategy = 'breakLine'
|
||||
}
|
||||
} else if (type === 'label-normal') {
|
||||
this.view.senior.functionCfg.emptyDataStrategy = 'breakLine'
|
||||
}
|
||||
// reset custom colors
|
||||
this.view.customAttr.color.seriesColors = []
|
||||
|
||||
Loading…
Reference in New Issue
Block a user