<script setup lang="ts">
|
import { computed, onMounted, PropType, reactive, watch, ref } from 'vue'
|
import {
|
COLOR_PANEL,
|
DEFAULT_BASIC_STYLE,
|
DEFAULT_MISC
|
} from '@/views/chart/components/editor/util/chart'
|
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
|
import { cloneDeep, debounce, defaultsDeep } from 'lodash-es'
|
import { SERIES_NUMBER_FIELD } from '@antv/s2'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { storeToRefs } from 'pinia'
|
import { isNumber } from 'lodash-es'
|
import { ElFormItem, ElInputNumber, ElMessage } from 'element-plus-secondary'
|
import { svgStrToUrl } from '../../../js/util'
|
import { numberToChineseUnderHundred } from '../../../js/panel/common/common_antv'
|
import { useLocaleStoreWithOut } from '@/store/modules/locale'
|
import { useMapStoreWithOut } from '@/store/modules/map'
|
import { queryMapKeyApi } from '@/api/setting/sysParameter'
|
import {
|
gaodeMapStyleOptions,
|
qqMapStyleOptions,
|
tdtMapStyleOptions
|
} from '@/views/chart/components/js/panel/charts/map/common'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { find } from 'lodash-es'
|
|
const dvMainStore = dvMainStoreWithOut()
|
const localeStore = useLocaleStoreWithOut()
|
const { batchOptStatus, mobileInPc } = storeToRefs(dvMainStore)
|
const { t } = useI18n()
|
const props = defineProps({
|
chart: {
|
type: Object as PropType<ChartObj>,
|
required: true
|
},
|
themes: {
|
type: String as PropType<EditorTheme>,
|
default: 'dark'
|
},
|
propertyInner: {
|
type: Array<string>
|
}
|
})
|
const showProperty = prop => {
|
const has = props.propertyInner?.includes(prop)
|
if (!has) {
|
return false
|
}
|
if (props.chart.type.includes('map') && mapType.value === 'tianditu' && prop === 'showLabel') {
|
return false
|
}
|
return has
|
}
|
const tableExpandLevelOptions = reactive([{ name: t('chart.expand_all'), value: 'all' }])
|
const predefineColors = COLOR_PANEL
|
const state = reactive({
|
basicStyleForm: JSON.parse(JSON.stringify(DEFAULT_BASIC_STYLE)) as ChartBasicStyle,
|
miscForm: JSON.parse(JSON.stringify(DEFAULT_MISC)) as ChartMiscAttr,
|
customColor: null,
|
colorIndex: 0,
|
fieldColumnWidth: {
|
fieldId: '',
|
width: 0
|
},
|
fileList: [],
|
treeRowWidth: 10
|
})
|
const emit = defineEmits(['onBasicStyleChange', 'onMiscChange'])
|
const changeBasicStyle = (prop?: string, requestData = false, render = true) => {
|
emit('onBasicStyleChange', { data: state.basicStyleForm, requestData, render }, prop)
|
}
|
|
const changeTreeRowWidth = () => {
|
if (state.basicStyleForm.tableRowHeaderMode === 'percent') {
|
state.basicStyleForm.tableRowHeaderWidthPercent = state.treeRowWidth
|
}
|
if (state.basicStyleForm.tableRowHeaderMode === 'fixed') {
|
state.basicStyleForm.tableRowHeaderWidth = state.treeRowWidth
|
}
|
changeBasicStyle(
|
state.basicStyleForm.tableRowHeaderMode === 'percent'
|
? 'tableRowHeaderWidthPercent'
|
: 'tableRowHeaderWidth'
|
)
|
}
|
const onAlphaChange = v => {
|
const _v = parseInt(v)
|
if (_v >= 0 && _v <= 100) {
|
state.basicStyleForm.alpha = _v
|
} else if (_v < 0) {
|
state.basicStyleForm.alpha = 0
|
} else if (_v > 100) {
|
state.basicStyleForm.alpha = 100
|
} else {
|
const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
|
const oldForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
|
state.basicStyleForm.alpha = oldForm.alpha
|
}
|
changeBasicStyle('alpha')
|
}
|
|
const onColumnWidthRatioChange = v => {
|
const _v = parseInt(v)
|
if (_v >= 1 && _v <= 100) {
|
state.basicStyleForm.columnWidthRatio = _v
|
} else if (_v < 1) {
|
state.basicStyleForm.columnWidthRatio = 1
|
} else if (_v > 100) {
|
state.basicStyleForm.columnWidthRatio = 100
|
} else {
|
const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
|
const oldForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
|
state.basicStyleForm.columnWidthRatio = oldForm.columnWidthRatio
|
}
|
changeBasicStyle('columnWidthRatio')
|
}
|
|
const changeMisc = prop => {
|
emit('onMiscChange', { data: state.miscForm, requestData: true }, prop)
|
}
|
const init = () => {
|
const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
|
const miscStyle = cloneDeep(props.chart.customAttr.misc)
|
configCompat(basicStyle)
|
if (
|
basicStyle.mapSymbol === 'custom' &&
|
state.basicStyleForm.customIcon !== basicStyle.customIcon
|
) {
|
let file
|
if (basicStyle.customIcon?.startsWith('data')) {
|
file = basicStyle.customIcon
|
} else {
|
file = svgStrToUrl(basicStyle.customIcon)
|
}
|
file && (state.fileList[0] = { url: file })
|
}
|
state.basicStyleForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle
|
const mapStyle = basicStyle.mapStyle
|
if (mapStyle && !find(mapStyleOptions.value, s => s.value === mapStyle)) {
|
state.basicStyleForm.mapStyle = 'normal'
|
}
|
state.miscForm = defaultsDeep(miscStyle, cloneDeep(DEFAULT_MISC)) as ChartMiscAttr
|
if (!state.customColor) {
|
state.customColor = state.basicStyleForm.colors[0]
|
state.colorIndex = 0
|
}
|
if (basicStyle.tableLayoutMode === 'tree') {
|
tableExpandLevelOptions.splice(1)
|
let maxLevel = props.chart.xAxis?.length
|
if (isNumber(basicStyle.defaultExpandLevel)) {
|
maxLevel = Math.max(maxLevel, basicStyle.defaultExpandLevel)
|
}
|
for (let i = 1; i <= maxLevel; i++) {
|
let name = t('chart.level_label', { num: i })
|
if (localeStore.getCurrentLocale.lang !== 'en') {
|
name = t('chart.level_label', { num: numberToChineseUnderHundred(i) })
|
}
|
tableExpandLevelOptions.push({ name, value: i })
|
}
|
if (basicStyle.tableRowHeaderMode === 'percent') {
|
state.treeRowWidth = basicStyle.tableRowHeaderWidthPercent
|
if (basicStyle.tableRowHeaderWidthPercent > 80) {
|
state.treeRowWidth = 80
|
}
|
}
|
if (basicStyle.tableRowHeaderMode === 'fixed') {
|
state.treeRowWidth = basicStyle.tableRowHeaderWidth
|
if (basicStyle.tableRowHeaderWidth < 10) {
|
state.treeRowWidth = 120
|
}
|
}
|
}
|
const lastPageInfo = dvMainStore.getViewPageInfo(props.chart.id)
|
if (lastPageInfo) {
|
if (lastPageInfo.pageSize && lastPageInfo.pageSize !== state.basicStyleForm.tablePageSize) {
|
state.basicStyleForm.tablePageSize = lastPageInfo.pageSize
|
changeBasicStyle('tablePageSize', false, false)
|
return
|
}
|
}
|
initTableColumnWidth()
|
}
|
const debouncedInit = debounce(init, 500)
|
watch(
|
[
|
() => props.chart.customAttr.basicStyle,
|
() => props.chart.customAttr.misc,
|
() => props.chart.customAttr.tableHeader,
|
() => props.chart.xAxis,
|
() => props.chart.yAxis
|
],
|
debouncedInit,
|
{ deep: true }
|
)
|
const configCompat = (basicStyle: ChartBasicStyle) => {
|
// 悬浮改为图例和缩放按钮
|
if (basicStyle.suspension === false && basicStyle.showZoom === undefined) {
|
basicStyle.showZoom = false
|
}
|
}
|
const COLUMN_WIDTH_TYPE = ['table-info', 'table-normal']
|
const initTableColumnWidth = () => {
|
if (!COLUMN_WIDTH_TYPE.includes(props.chart.type)) {
|
return
|
}
|
let { xAxis, yAxis, customAttr } = JSON.parse(JSON.stringify(props.chart))
|
let allAxis = xAxis
|
if (props.chart.type === 'table-normal') {
|
allAxis = allAxis.concat(yAxis)
|
}
|
const { tableHeader } = customAttr
|
if (allAxis.length && tableHeader.showIndex) {
|
const indexColumn = {
|
dataeaseName: SERIES_NUMBER_FIELD,
|
name: tableHeader.indexLabel
|
} as unknown as Axis
|
allAxis.unshift(indexColumn)
|
}
|
if (!allAxis.length) {
|
state.basicStyleForm.tableFieldWidth?.splice(0)
|
state.fieldColumnWidth.fieldId = ''
|
state.fieldColumnWidth.width = 0
|
} else {
|
if (!state.basicStyleForm.tableFieldWidth.length) {
|
state.basicStyleForm.tableFieldWidth.splice(0)
|
const defaultWidth = parseFloat((100 / allAxis.length).toFixed(2))
|
allAxis.forEach(item => {
|
state.basicStyleForm.tableFieldWidth.push({
|
fieldId: item.dataeaseName,
|
name: item.name,
|
width: defaultWidth
|
})
|
})
|
} else {
|
const fieldMap = state.basicStyleForm.tableFieldWidth.reduce((p, n) => {
|
p[n.fieldId] = n
|
return p
|
}, {})
|
state.basicStyleForm.tableFieldWidth.splice(0)
|
allAxis.forEach(item => {
|
let width = 10
|
if (fieldMap[item.dataeaseName]) {
|
width = fieldMap[item.dataeaseName].width
|
}
|
state.basicStyleForm.tableFieldWidth.push({
|
fieldId: item.dataeaseName,
|
name: item.name,
|
width
|
})
|
})
|
}
|
let selectedField = state.basicStyleForm.tableFieldWidth[0]
|
const curFieldIndex = state.basicStyleForm.tableFieldWidth.findIndex(
|
i => i.fieldId === state.fieldColumnWidth.fieldId
|
)
|
if (curFieldIndex !== -1) {
|
selectedField = state.basicStyleForm.tableFieldWidth[curFieldIndex]
|
}
|
state.fieldColumnWidth.fieldId = selectedField.fieldId
|
state.fieldColumnWidth.width = selectedField.width
|
}
|
}
|
const changeFieldColumn = () => {
|
const { basicStyleForm, fieldColumnWidth } = state
|
const fieldWidth = basicStyleForm.tableFieldWidth?.find(
|
i => i.fieldId === fieldColumnWidth.fieldId
|
)
|
if (fieldWidth) {
|
fieldColumnWidth.width = fieldWidth.width
|
}
|
}
|
const changeFieldColumnWidth = () => {
|
const { basicStyleForm, fieldColumnWidth } = state
|
let { width } = fieldColumnWidth
|
let validate = true
|
width = parseFloat(width)
|
if (isNaN(width) || !isNumber(width)) {
|
validate = false
|
}
|
if (width < 0 || width > 200) {
|
validate = false
|
}
|
const fieldWidth = basicStyleForm.tableFieldWidth?.find(
|
i => i.fieldId === fieldColumnWidth.fieldId
|
)
|
if (!validate) {
|
ElMessage.warning('宽度需要在 0-200 之间')
|
if (fieldWidth) {
|
fieldColumnWidth.width = fieldWidth.width
|
}
|
return
|
}
|
if (fieldWidth) {
|
fieldWidth.width = fieldColumnWidth.width
|
changeBasicStyle('tableFieldWidth')
|
}
|
}
|
const pageSizeOptions = [
|
{ name: '10' + t('chart.table_page_size_unit'), value: 10 },
|
{ name: '20' + t('chart.table_page_size_unit'), value: 20 },
|
{ name: '30' + t('chart.table_page_size_unit'), value: 30 },
|
{ name: '40' + t('chart.table_page_size_unit'), value: 40 },
|
{ name: '50' + t('chart.table_page_size_unit'), value: 50 },
|
{ name: '100' + t('chart.table_page_size_unit'), value: 100 }
|
]
|
|
const gaugeStyleOptions = [{ name: '默认', value: 'default' }]
|
|
const symbolOptions = [
|
{ name: t('chart.line_symbol_circle'), value: 'circle' },
|
{ name: t('chart.line_symbol_rect'), value: 'square' },
|
{ name: t('chart.line_symbol_triangle'), value: 'triangle' },
|
{ name: t('chart.line_symbol_diamond'), value: 'diamond' }
|
]
|
|
const mapStore = useMapStoreWithOut()
|
|
const getMapKey = async () => {
|
if (!mapStore.mapKey.key) {
|
await queryMapKeyApi().then(res => mapStore.setKey(res.data))
|
}
|
if (mapStore.mapKey.securityCode) {
|
window._AMapSecurityConfig = {
|
securityJsCode: mapStore.mapKey.securityCode
|
}
|
}
|
return mapStore.mapKey
|
}
|
|
const mapType = ref<string>(undefined)
|
|
const mapStyleOptions = computed(() => {
|
switch (mapType.value) {
|
case 'tianditu':
|
return tdtMapStyleOptions
|
case 'qq':
|
return qqMapStyleOptions
|
default:
|
return gaodeMapStyleOptions
|
}
|
})
|
|
const heatMapTypeOptions = [
|
{ name: t('chart.heatmap_classics'), value: 'heatmap' },
|
{ name: t('chart.heatmap3D'), value: 'heatmap3D' }
|
]
|
|
/**
|
* 表格是否合并单元格
|
*/
|
const mergeCell = computed(() => {
|
if (COLUMN_WIDTH_TYPE.includes(props.chart.type)) {
|
let { customAttr } = JSON.parse(JSON.stringify(props.chart))
|
const { tableCell } = customAttr
|
return tableCell.mergeCells
|
}
|
return false
|
})
|
|
const preventInvalidKeydown = event => {
|
const invalidKeys = ['e', 'E', '+', '-', '.']
|
if (invalidKeys.includes(event.key)) {
|
event.preventDefault()
|
}
|
}
|
// 验证输入值
|
const validateInput = (value, field) => {
|
if (value === '') {
|
state.basicStyleForm[field] = 1
|
return
|
}
|
|
let num = parseInt(value, 10)
|
|
if (isNaN(num)) {
|
num = 1
|
} else if (num < 1) {
|
num = 1
|
} else if (num > 100) {
|
num = 100
|
}
|
state.basicStyleForm[field] = num
|
}
|
onMounted(async () => {
|
await getMapKey().then(res => {
|
if (res) {
|
mapType.value = res.mapType
|
}
|
})
|
init()
|
useEmitt({
|
name: 'chart-type-change',
|
callback: () => {
|
if (['topRoundAngle', 'roundAngle'].includes(state.basicStyleForm.radiusColumnBar)) {
|
state.basicStyleForm.radiusColumnBar = 'roundAngle'
|
changeBasicStyle('radiusColumnBar')
|
}
|
}
|
})
|
})
|
</script>
|
<template>
|
<el-form size="small" style="width: 100%">
|
<template v-if="showProperty('colors')">
|
<custom-color-style-select
|
v-model="state"
|
:chart="chart"
|
:themes="themes"
|
:property-inner="propertyInner"
|
@change-basic-style="prop => changeBasicStyle(prop)"
|
/>
|
</template>
|
|
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('gradient')">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.gradient"
|
@change="changeBasicStyle('gradient')"
|
>
|
{{ $t('chart.gradient') }}{{ $t('chart.color') }}
|
</el-checkbox>
|
</el-form-item>
|
|
<el-form-item
|
class="form-item"
|
v-if="showProperty('tableLayoutMode')"
|
:label="t('chart.table_layout_mode')"
|
:class="'form-item-' + themes"
|
>
|
<el-radio-group
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.tableLayoutMode"
|
@change="changeBasicStyle('tableLayoutMode')"
|
>
|
<el-radio value="grid" :effect="themes">{{ t('chart.table_layout_grid') }}</el-radio>
|
<el-radio value="tree" :effect="themes">{{ t('chart.table_layout_tree') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
class="form-item"
|
v-if="showProperty('tableLayoutMode') && state.basicStyleForm.tableLayoutMode === 'tree'"
|
:label="t('chart.default_expand_level')"
|
:class="'form-item-' + themes"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.defaultExpandLevel"
|
@change="changeBasicStyle('defaultExpandLevel')"
|
>
|
<el-option
|
v-for="item in tableExpandLevelOptions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
class="form-item"
|
v-if="showProperty('quotaPosition')"
|
:label="t('chart.quota_position')"
|
:class="'form-item-' + themes"
|
>
|
<el-radio-group
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.quotaPosition"
|
@change="changeBasicStyle('quotaPosition')"
|
>
|
<el-radio value="col" :effect="themes">{{ t('chart.quota_position_col') }}</el-radio>
|
<el-radio value="row" :effect="themes">{{ t('chart.quota_position_row') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('quotaColLabel') && state.basicStyleForm.quotaPosition === 'row'"
|
class="form-item"
|
:label="t('chart.quota_col_label')"
|
:class="'form-item-' + themes"
|
>
|
<el-input
|
:effect="themes"
|
v-model="state.basicStyleForm.quotaColLabel"
|
@change="changeBasicStyle('quotaColLabel')"
|
/>
|
</el-form-item>
|
<div class="alpha-setting" v-if="showProperty('alpha')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.not_alpha') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col :span="13">
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
v-model="state.basicStyleForm.alpha"
|
@change="changeBasicStyle('alpha')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" style="padding-top: 2px">
|
<el-form-item class="form-item" :class="'form-item-' + themes">
|
<el-input
|
type="number"
|
:effect="themes"
|
v-model="state.basicStyleForm.alpha"
|
:min="0"
|
:max="100"
|
class="basic-input-number"
|
:controls="false"
|
@change="onAlphaChange"
|
>
|
<template #suffix> % </template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<el-form-item
|
class="form-item"
|
v-if="showProperty('radiusColumnBar')"
|
:label="t('chart.radiusColumnBar')"
|
:class="'form-item-' + themes"
|
>
|
<el-radio-group
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.radiusColumnBar"
|
@change="changeBasicStyle('radiusColumnBar')"
|
class="radius-class"
|
>
|
<el-radio value="rightAngle" :effect="themes">{{ t('chart.rightAngle') }}</el-radio>
|
<el-radio value="roundAngle" :effect="themes">{{ t('chart.roundAngle') }}</el-radio>
|
<el-radio
|
v-if="!props.chart.type.includes('-stack')"
|
label="topRoundAngle"
|
:effect="themes"
|
>{{ t('chart.topRoundAngle') }}</el-radio
|
>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item
|
:label="t('chart.orient')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('layout')"
|
>
|
<el-radio-group
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.layout"
|
@change="changeBasicStyle('layout')"
|
>
|
<el-radio :effect="themes" label="horizontal">{{ t('chart.horizontal') }}</el-radio>
|
<el-radio :effect="themes" label="vertical">{{ t('chart.vertical') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--flow map begin-->
|
<el-form-item
|
v-if="showProperty('heatMapStyle')"
|
:label="t('chart.type')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.heatMapType"
|
@change="changeBasicStyle('heatMapType')"
|
>
|
<el-option
|
v-for="item in heatMapTypeOptions"
|
:key="item.name"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<div class="map-style" v-if="showProperty('mapBaseStyle') || showProperty('heatMapStyle')">
|
<el-row style="flex: 1">
|
<el-col>
|
<el-form-item
|
:label="t('chart.map_style')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.mapStyle"
|
@change="changeBasicStyle('mapStyle')"
|
>
|
<el-option
|
v-for="item in mapStyleOptions"
|
:key="item.name"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row style="flex: 1" v-if="state.basicStyleForm.mapStyle === 'custom'">
|
<el-col>
|
<el-form-item
|
:label="t('chart.map_style_url')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-input
|
:effect="themes"
|
v-model="state.basicStyleForm.mapStyleUrl"
|
maxlength="50"
|
@change="changeBasicStyle('mapStyleUrl')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="alpha-setting" v-if="mapType !== 'tianditu'">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.chart_map') + ' ' + t('chart.map_pitch') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col>
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
:min="0"
|
:max="90"
|
v-model="state.miscForm.mapPitch"
|
@change="changeMisc('mapPitch')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="alpha-setting" v-if="showProperty('heatMapStyle')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.heatMapIntensity') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col>
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
:min="1"
|
:max="20"
|
v-model="state.basicStyleForm.heatMapIntensity"
|
@change="changeBasicStyle('heatMapIntensity')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="alpha-setting" v-if="showProperty('heatMapStyle')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.heatMapRadius') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col>
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
:min="1"
|
:max="40"
|
v-model="state.basicStyleForm.heatMapRadius"
|
@change="changeBasicStyle('heatMapRadius')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!--flow map end-->
|
<!--map start-->
|
<el-row :gutter="8">
|
<el-col :span="12" v-if="showProperty('areaBorderColor')">
|
<el-form-item
|
:label="t('chart.area_border_color')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-color-picker
|
:persistent="false"
|
v-model="state.basicStyleForm.areaBorderColor"
|
:effect="themes"
|
is-custom
|
show-alpha
|
:trigger-width="108"
|
class="color-picker-style"
|
:predefine="predefineColors"
|
@change="changeBasicStyle('areaBorderColor')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="8">
|
<el-col :span="12" v-if="showProperty('areaBaseColor')">
|
<el-form-item
|
:label="t('chart.area_base_color')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-color-picker
|
:persistent="false"
|
v-model="state.basicStyleForm.areaBaseColor"
|
is-custom
|
show-alpha
|
:effect="themes"
|
:trigger-width="108"
|
class="color-picker-style"
|
:predefine="predefineColors"
|
@change="changeBasicStyle('areaBaseColor')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('showLabel')">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.showLabel"
|
@change="changeBasicStyle('showLabel')"
|
>
|
{{ t('chart.show_label') }}
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('autoFit')">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.autoFit"
|
@change="changeBasicStyle('autoFit')"
|
>
|
{{ t('chart.auto_fit') }}
|
</el-checkbox>
|
</el-form-item>
|
<div
|
class="alpha-setting"
|
v-if="showProperty('zoomLevel') && state.basicStyleForm.autoFit === false"
|
>
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.zoom_level') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col>
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
:min="1"
|
:max="18"
|
:step="0.1"
|
v-model="state.basicStyleForm.zoomLevel"
|
@change="changeBasicStyle('zoomLevel')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<template v-if="showProperty('mapCenter') && state.basicStyleForm.autoFit === false">
|
<el-row :gutter="8">
|
<el-col :span="12">
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
:label="t('chart.central_point') + ' ' + t('chart.longitude')"
|
>
|
<el-input-number
|
controls-position="right"
|
:min="-180"
|
:max="180"
|
:effect="props.themes"
|
v-model.number="state.basicStyleForm.mapCenter.longitude"
|
@change="changeBasicStyle('mapCenter.longitude')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
:label="t('chart.central_point') + ' ' + t('chart.latitude')"
|
>
|
<el-input-number
|
controls-position="right"
|
:min="-90"
|
:max="90"
|
:effect="props.themes"
|
v-model.number="state.basicStyleForm.mapCenter.latitude"
|
@change="changeBasicStyle('mapCenter.latitude')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('zoom')">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.showZoom"
|
@change="changeBasicStyle('showZoom')"
|
>
|
{{ t('chart.show_zoom') }}
|
</el-checkbox>
|
</el-form-item>
|
<div v-if="showProperty('zoom') && state.basicStyleForm.showZoom">
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
:label="t('chart.button_color')"
|
>
|
<el-color-picker
|
is-custom
|
class="color-picker-style"
|
v-model="state.basicStyleForm.zoomButtonColor"
|
:persistent="false"
|
:effect="themes"
|
:trigger-width="108"
|
:predefine="predefineColors"
|
@change="changeBasicStyle('zoomButtonColor')"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
:label="t('chart.button_background_color')"
|
>
|
<el-color-picker
|
is-custom
|
class="color-picker-style"
|
v-model="state.basicStyleForm.zoomBackground"
|
:persistent="false"
|
:effect="themes"
|
:trigger-width="108"
|
:predefine="predefineColors"
|
@change="changeBasicStyle('zoomBackground')"
|
/>
|
</el-form-item>
|
</div>
|
|
<!--map end-->
|
|
<!--table start-->
|
<el-row :gutter="8">
|
<el-col :span="12" v-if="showProperty('tableBorderColor')">
|
<el-form-item
|
:label="t('chart.table_border_color')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-color-picker
|
:persistent="false"
|
v-model="state.basicStyleForm.tableBorderColor"
|
:effect="themes"
|
is-custom
|
:trigger-width="mobileInPc ? 197 : 108"
|
color-format="rgb"
|
:predefine="predefineColors"
|
show-alpha
|
@change="changeBasicStyle('tableBorderColor')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" v-if="showProperty('tableScrollBarColor')">
|
<el-form-item
|
:label="t('chart.table_scroll_bar_color')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-color-picker
|
:persistent="false"
|
v-model="state.basicStyleForm.tableScrollBarColor"
|
class="color-picker-style"
|
:predefine="predefineColors"
|
:effect="themes"
|
is-custom
|
:trigger-width="mobileInPc ? 197 : 108"
|
color-format="rgb"
|
show-alpha
|
@change="changeBasicStyle('tableScrollBarColor')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item
|
v-if="showProperty('tablePageMode')"
|
:label="t('chart.table_page_mode')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-radio-group
|
:effect="themes"
|
v-model="state.basicStyleForm.tablePageMode"
|
@change="changeBasicStyle('tablePageMode', true)"
|
>
|
<el-radio :effect="themes" label="page">{{ t('chart.page_mode_page') }}</el-radio>
|
<el-radio :effect="themes" label="pull">{{ t('chart.page_mode_pull') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('tablePageMode') && state.basicStyleForm.tablePageMode !== 'pull'"
|
:label="t('chart.table_pager_style')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-radio-group
|
:effect="themes"
|
v-model="state.basicStyleForm.tablePageStyle"
|
@change="changeBasicStyle('tablePageStyle', false)"
|
>
|
<el-radio :effect="themes" label="simple">{{ t('chart.page_pager_simple') }}</el-radio>
|
<el-radio :effect="themes" label="general">{{ t('chart.page_pager_general') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="
|
showProperty('tablePageMode') &&
|
state.basicStyleForm.tablePageMode === 'page' &&
|
state.basicStyleForm.tablePageStyle === 'simple'
|
"
|
:label="t('chart.table_page_size')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.tablePageSize"
|
:placeholder="t('chart.table_page_size')"
|
@change="changeBasicStyle('tablePageSize', true)"
|
>
|
<el-option
|
v-for="item in pageSizeOptions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<!--table end-->
|
|
<!--table2 start-->
|
<el-form-item
|
:label="t('chart.table_column_width_config')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('tableColumnMode')"
|
>
|
<el-radio-group
|
v-model="state.basicStyleForm.tableColumnMode"
|
@change="changeBasicStyle('tableColumnMode')"
|
class="table-column-mode"
|
>
|
<el-radio value="adapt" :effect="themes">
|
{{ t('chart.table_column_adapt') }}
|
</el-radio>
|
<el-radio value="custom" :effect="themes">
|
{{ t('chart.table_column_fixed') }}
|
</el-radio>
|
<el-radio v-show="chart.type !== 'table-pivot'" label="field" :effect="themes">
|
{{ t('chart.table_column_custom') }}
|
</el-radio>
|
<el-radio v-show="chart.type === 'table-pivot'" label="colAdapt" :effect="themes">
|
{{ t('chart.table_column_col_adapt') }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('tableColumnMode') && state.basicStyleForm.tableColumnMode === 'custom'"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model.number="state.basicStyleForm.tableColumnWidth"
|
:min="10"
|
controls-position="right"
|
@change="changeBasicStyle('tableColumnWidth')"
|
/>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('tableColumnMode') && state.basicStyleForm.tableColumnMode === 'field'"
|
label=""
|
class="form-item table-field-width-config"
|
>
|
<el-select
|
v-model="state.fieldColumnWidth.fieldId"
|
:effect="themes"
|
:disabled="batchOptStatus"
|
@change="changeFieldColumn()"
|
>
|
<el-option
|
v-for="item in state.basicStyleForm.tableFieldWidth"
|
:key="item.fieldId"
|
:label="item.name"
|
:value="item.fieldId"
|
/>
|
</el-select>
|
<el-input
|
v-model.number="state.fieldColumnWidth.width"
|
type="number"
|
class="basic-input-number"
|
:effect="themes"
|
:disabled="batchOptStatus"
|
@change="changeFieldColumnWidth()"
|
>
|
<template #append>%</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item
|
:label="t('chart.table_row_header_width')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('tableRowHeaderMode') && state.basicStyleForm.tableLayoutMode === 'tree'"
|
>
|
<el-radio-group
|
v-model="state.basicStyleForm.tableRowHeaderMode"
|
@change="changeBasicStyle('tableRowHeaderMode')"
|
class="table-column-mode"
|
>
|
<el-radio value="adapt" :effect="themes">
|
{{ t('chart.table_row_header_adapt') }}
|
</el-radio>
|
<el-radio value="fixed" :effect="themes">
|
{{ t('chart.table_row_header_fixed') }}
|
</el-radio>
|
<el-radio label="percent" :effect="themes">
|
{{ t('chart.table_row_header_percent') }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
v-if="
|
showProperty('tableRowHeaderMode') &&
|
state.basicStyleForm.tableLayoutMode === 'tree' &&
|
state.basicStyleForm.tableRowHeaderMode !== 'adapt'
|
"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model.number="state.treeRowWidth"
|
:min="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 1 : 10"
|
:max="state.basicStyleForm.tableRowHeaderMode === 'percent' ? 80 : 100000"
|
controls-position="right"
|
@change="changeTreeRowWidth"
|
/>
|
</el-form-item>
|
<el-form-item v-if="showProperty('autoWrap')" class="form-item" :class="'form-item-' + themes">
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
:disabled="mergeCell"
|
v-model="state.basicStyleForm.autoWrap"
|
@change="changeBasicStyle('autoWrap')"
|
>
|
<span class="data-area-label">
|
<span style="margin-right: 4px">{{ t('chart.table_auto_break_line') }}</span>
|
<el-tooltip class="item" effect="dark" placement="bottom" v-if="mergeCell">
|
<template #content>
|
<div>{{ t('chart.merge_cells_break_line_tip') }}</div>
|
</template>
|
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
</el-icon>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" placement="bottom" v-else>
|
<template #content>
|
<div>{{ t('chart.table_break_line_tip') }}</div>
|
</template>
|
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
</el-icon>
|
</el-tooltip>
|
</span>
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('autoWrap') && state.basicStyleForm.autoWrap"
|
:label="t('chart.table_break_line_max_lines')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model="state.basicStyleForm.maxLines"
|
controls-position="right"
|
:show-input-controls="false"
|
:min="1"
|
:step="1"
|
:disabled="mergeCell"
|
:precision="0"
|
@change="changeBasicStyle('maxLines')"
|
/>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('showHoverStyle')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.showHoverStyle"
|
@change="changeBasicStyle('showHoverStyle')"
|
>
|
{{ t('chart.show_hover_style') }}
|
</el-checkbox>
|
</el-form-item>
|
<!--table2 end-->
|
<!--gauge start-->
|
<el-form-item
|
:label="t('chart.chart_style')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('gaugeStyle')"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.gaugeStyle"
|
@change="changeBasicStyle('gaugeStyle')"
|
>
|
<el-option
|
v-for="item in gaugeStyleOptions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('gaugeAxisLine')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-checkbox
|
v-model="state.basicStyleForm.gaugeAxisLine"
|
:effect="themes"
|
size="small"
|
@change="changeBasicStyle('gaugeAxisLine')"
|
>
|
{{ t('chart.gauge_axis_label') }}</el-checkbox
|
>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('gaugePercentLabel') && state.basicStyleForm.gaugeAxisLine"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-checkbox
|
v-model="state.basicStyleForm.gaugePercentLabel"
|
:effect="themes"
|
size="small"
|
@change="changeBasicStyle('gaugePercentLabel')"
|
>
|
{{ t('chart.gauge_percentage_tick') }}</el-checkbox
|
>
|
</el-form-item>
|
<!--gauge end-->
|
<!--bar start-->
|
<el-form-item
|
v-if="showProperty('barDefault')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.barDefault"
|
@change="changeBasicStyle('barDefault')"
|
>
|
{{ t('chart.adapt') }}
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('barDefault') && !state.basicStyleForm.barDefault"
|
:label="t('chart.bar_gap')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model="state.basicStyleForm.barGap"
|
controls-position="right"
|
:show-input-controls="false"
|
:min="0"
|
:max="5"
|
:step="0.1"
|
@change="changeBasicStyle('barGap')"
|
/>
|
</el-form-item>
|
<div class="alpha-setting" v-if="showProperty('columnWidthRatio')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.column_width_ratio') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col :span="13">
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
:min="1"
|
:max="100"
|
v-model="state.basicStyleForm.columnWidthRatio"
|
@change="changeBasicStyle('columnWidthRatio')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" style="padding-top: 2px">
|
<el-form-item class="form-item" :class="'form-item-' + themes">
|
<el-input
|
type="number"
|
:effect="themes"
|
v-model="state.basicStyleForm.columnWidthRatio"
|
:min="1"
|
:max="100"
|
class="basic-input-number"
|
:controls="false"
|
@change="onColumnWidthRatioChange"
|
>
|
<template #suffix> % </template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<!--bar end-->
|
<!--line area start-->
|
<el-row :gutter="8">
|
<el-col :span="12">
|
<el-form-item
|
:label="t('chart.line_width')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
v-if="showProperty('lineWidth')"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model="state.basicStyleForm.lineWidth"
|
:min="0"
|
:max="10"
|
controls-position="right"
|
@change="changeBasicStyle('lineWidth')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="8">
|
<el-col :span="12">
|
<el-form-item
|
:label="t('chart.line_symbol')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('lineSymbol')"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.lineSymbol"
|
:placeholder="t('chart.line_symbol')"
|
@change="changeBasicStyle('lineSymbol')"
|
>
|
<el-option
|
v-for="item in symbolOptions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item
|
:label="t('chart.line_symbol_size')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
v-if="showProperty('lineSymbolSize')"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model="state.basicStyleForm.lineSymbolSize"
|
:min="0"
|
:max="20"
|
controls-position="right"
|
@change="changeBasicStyle('lineSymbolSize')"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('lineSmooth')"
|
>
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.lineSmooth"
|
@change="changeBasicStyle('lineSmooth')"
|
>
|
{{ t('chart.line_smooth') }}
|
</el-checkbox>
|
</el-form-item>
|
<!--line area end-->
|
<!--radar begin-->
|
<el-form-item
|
:label="t('chart.shape')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('radarShape')"
|
>
|
<el-radio-group
|
:effect="themes"
|
v-model="state.basicStyleForm.radarShape"
|
@change="changeBasicStyle('radarShape')"
|
>
|
<el-radio :effect="themes" label="polygon">{{ t('chart.polygon') }}</el-radio>
|
<el-radio :effect="themes" label="circle">{{ t('chart.circle') }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item
|
class="form-item margin-bottom-8"
|
:class="'form-item-' + themes"
|
v-if="showProperty('radarShowPoint')"
|
>
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.radarShowPoint"
|
@change="changeBasicStyle('radarShowPoint')"
|
>
|
{{ $t('chart.radar_point') }}
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item
|
style="padding-left: 20px"
|
class="form-item margin-bottom-8"
|
:class="'form-item-' + themes"
|
:label="t('chart.radar_point_size')"
|
v-if="showProperty('radarPointSize')"
|
>
|
<el-input-number
|
style="width: 100%"
|
:effect="themes"
|
controls-position="right"
|
:min="0"
|
:max="30"
|
:disabled="!state.basicStyleForm.radarShowPoint"
|
v-model="state.basicStyleForm.radarPointSize"
|
@change="changeBasicStyle('radarPointSize')"
|
/>
|
</el-form-item>
|
<el-form-item
|
class="form-item margin-bottom-8"
|
:class="'form-item-' + themes"
|
v-if="showProperty('radarAreaColor')"
|
>
|
<el-checkbox
|
size="small"
|
:effect="themes"
|
v-model="state.basicStyleForm.radarAreaColor"
|
@change="changeBasicStyle('radarAreaColor')"
|
>
|
{{ $t('chart.radar_area_color') }}
|
</el-checkbox>
|
</el-form-item>
|
<!--radar end-->
|
<!--scatter start-->
|
<el-form-item
|
:label="t('chart.bubble_symbol')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('scatterSymbol')"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.scatterSymbol"
|
:placeholder="t('chart.line_symbol')"
|
@change="changeBasicStyle('scatterSymbol')"
|
>
|
<el-option
|
v-for="item in symbolOptions"
|
: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"
|
:class="'form-item-' + themes"
|
v-if="showProperty('scatterSymbolSize')"
|
>
|
<el-input-number
|
:effect="themes"
|
v-model="state.basicStyleForm.scatterSymbolSize"
|
controls-position="right"
|
:min="1"
|
:max="40"
|
@change="changeBasicStyle('scatterSymbolSize')"
|
/>
|
</el-form-item>
|
<!--scatter end-->
|
|
<!--symbol map start-->
|
<el-form-item
|
:label="t('chart.bubble_symbol')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-if="showProperty('mapSymbol')"
|
>
|
<el-select
|
:effect="themes"
|
v-model="state.basicStyleForm.mapSymbol"
|
:placeholder="t('chart.line_symbol')"
|
@change="changeBasicStyle('mapSymbol')"
|
>
|
<el-option
|
v-for="item in symbolOptions"
|
: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"
|
:class="'form-item-' + themes"
|
v-if="showProperty('mapSymbolSize')"
|
>
|
<el-input-number
|
:effect="themes"
|
controls-position="right"
|
v-model="state.basicStyleForm.mapSymbolSize"
|
:min="1"
|
:max="40"
|
@change="changeBasicStyle('mapSymbolSize')"
|
/>
|
</el-form-item>
|
<el-form-item
|
:label="t('chart.not_alpha')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
v-if="showProperty('mapSymbolOpacity')"
|
>
|
<el-input-number
|
:effect="themes"
|
controls-position="right"
|
v-model="state.basicStyleForm.mapSymbolOpacity"
|
:min="1"
|
:max="100"
|
@change="changeBasicStyle('mapSymbolOpacity')"
|
/>
|
</el-form-item>
|
<el-form-item
|
v-if="showProperty('mapSymbol') && state.basicStyleForm.mapSymbol !== 'marker'"
|
:label="t('visualization.border_color')"
|
class="form-item form-item-slider"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:effect="themes"
|
controls-position="right"
|
v-model="state.basicStyleForm.mapSymbolStrokeWidth"
|
:min="0"
|
:max="5"
|
@change="changeBasicStyle('mapSymbolStrokeWidth')"
|
/>
|
</el-form-item>
|
<!-- pie/rose start -->
|
|
<div v-show="showProperty('topN')" class="top-n-setting">
|
<el-form-item class="form-item" :class="'form-item-' + themes">
|
<el-checkbox
|
:effect="themes"
|
v-model="state.basicStyleForm.calcTopN"
|
@change="changeBasicStyle('calcTopN')"
|
>
|
{{ $t('chart.top_n_desc') }}
|
</el-checkbox>
|
</el-form-item>
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-show="state.basicStyleForm.calcTopN"
|
>
|
<span>{{ $t('chart.top_n_input_1') }}</span>
|
<el-input-number
|
v-model="state.basicStyleForm.topN"
|
controls-position="right"
|
size="small"
|
:min="1"
|
:max="100"
|
:precision="0"
|
:step-strictly="true"
|
:value-on-clear="5"
|
:effect="themes"
|
@change="changeBasicStyle('topN')"
|
/>
|
<span>{{ $t('chart.top_n_input_2') }}</span>
|
</el-form-item>
|
<el-form-item
|
class="form-item"
|
:class="'form-item-' + themes"
|
v-show="state.basicStyleForm.calcTopN"
|
>
|
<el-input
|
:effect="themes"
|
v-model="state.basicStyleForm.topNLabel"
|
size="small"
|
:maxlength="50"
|
@change="changeBasicStyle('topNLabel')"
|
/>
|
<template #label>
|
<div style="display: flex; align-items: center">
|
<span style="margin-right: 4px">{{ $t('chart.top_n_label') }}</span>
|
<el-tooltip effect="dark" placement="bottom">
|
<template #content>
|
<div>{{ t('chart.top_n_label_tip') }}</div>
|
</template>
|
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
</el-icon>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-form-item>
|
</div>
|
<div class="alpha-setting" v-if="showProperty('innerRadius')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.pie_inner_radius_percent') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col :span="13">
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
v-model="state.basicStyleForm.innerRadius"
|
:min="1"
|
:max="100"
|
@change="changeBasicStyle('innerRadius')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item class="form-item" :class="'form-item-' + themes">
|
<el-input
|
type="number"
|
:effect="themes"
|
v-model="state.basicStyleForm.innerRadius"
|
:min="1"
|
:max="100"
|
class="basic-input-number"
|
:controls="false"
|
@input="validateInput($event, 'innerRadius')"
|
@change="changeBasicStyle('innerRadius')"
|
@keydown="preventInvalidKeydown"
|
>
|
<template #suffix> % </template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<div class="alpha-setting" v-if="showProperty('radius')">
|
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
|
{{ t('chart.pie_outer_radius') }}
|
</label>
|
<el-row style="flex: 1" :gutter="8">
|
<el-col :span="13">
|
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
|
<el-slider
|
:effect="themes"
|
v-model="state.basicStyleForm.radius"
|
:min="1"
|
:max="100"
|
@change="changeBasicStyle('radius')"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item class="form-item" :class="'form-item-' + themes">
|
<el-input
|
type="number"
|
:effect="themes"
|
v-model="state.basicStyleForm.radius"
|
:min="1"
|
:max="100"
|
class="basic-input-number"
|
:controls="false"
|
@input="validateInput($event, 'radius')"
|
@change="changeBasicStyle('radius')"
|
@keydown="preventInvalidKeydown"
|
>
|
<template #suffix> % </template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- pie/rose end -->
|
<!-- circle-packing start -->
|
<div v-if="showProperty('circleBorderStyle')">
|
<div class="alpha-setting">
|
<el-row style="display: flex; width: 100%">
|
<el-col :span="10">
|
<el-form-item
|
:label="t('chart.circle_packing_border_color')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-color-picker
|
v-model="state.basicStyleForm.circleBorderColor"
|
class="color-picker-style"
|
:triggerWidth="65"
|
is-custom
|
show-alpha
|
:predefine="state.predefineColors"
|
@change="changeBasicStyle('circleBorderColor')"
|
>
|
</el-color-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="14">
|
<el-form-item
|
:label="t('chart.circle_packing_border_width')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:min="0"
|
:max="50"
|
:effect="themes"
|
controls-position="right"
|
v-model="state.basicStyleForm.circleBorderWidth"
|
class="color-picker-style"
|
@change="changeBasicStyle('circleBorderWidth')"
|
>
|
</el-input-number>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<el-row>
|
<el-form-item
|
style="width: 150px"
|
:label="t('chart.circle_packing_padding')"
|
class="form-item"
|
:class="'form-item-' + themes"
|
>
|
<el-input-number
|
:min="0"
|
:max="10"
|
:effect="themes"
|
controls-position="right"
|
v-model="state.basicStyleForm.circlePadding"
|
class="color-picker-style"
|
@change="changeBasicStyle('circlePadding')"
|
>
|
</el-input-number>
|
</el-form-item>
|
</el-row>
|
</div>
|
<!-- circle-packing end -->
|
</el-form>
|
</template>
|
<style scoped lang="less">
|
.color-picker-style {
|
cursor: pointer;
|
z-index: 1003;
|
}
|
|
.alpha-setting {
|
display: flex;
|
width: 100%;
|
|
.alpha-slider {
|
padding: 0 8px;
|
:deep(.ed-slider__button-wrapper) {
|
--ed-slider-button-wrapper-size: 36px;
|
--ed-slider-button-size: 16px;
|
}
|
}
|
|
.alpha-label {
|
padding-right: 8px;
|
font-size: 12px;
|
font-style: normal;
|
font-weight: 400;
|
height: 32px;
|
line-height: 32px;
|
display: inline-flex;
|
align-items: flex-start;
|
|
min-width: 56px;
|
|
&.dark {
|
color: #a6a6a6;
|
}
|
}
|
}
|
.table-field-width-config {
|
.ed-select {
|
width: 100px !important;
|
:deep(.ed-input__wrapper) {
|
border-radius: 4px 0 0 4px !important;
|
}
|
}
|
.ed-input-group {
|
width: 120px;
|
:deep(.ed-input__wrapper) {
|
border-radius: 0 !important;
|
}
|
:deep(.ed-input-group__append) {
|
padding: 0 8px;
|
}
|
}
|
}
|
.table-column-mode {
|
:deep(.ed-radio) {
|
margin-right: 8px !important;
|
}
|
}
|
.basic-input-number {
|
:deep(input) {
|
-webkit-appearance: none;
|
-moz-appearance: textfield;
|
|
&::-webkit-inner-spin-button,
|
&::-webkit-outer-spin-button {
|
-webkit-appearance: none;
|
}
|
}
|
}
|
.top-n-setting {
|
.ed-input-number {
|
width: 80px !important;
|
margin: 0 2px;
|
}
|
:deep(span) {
|
font-size: 12px;
|
}
|
}
|
.avatar-uploader-container {
|
:deep(.ed-upload--picture-card) {
|
background: #eff0f1;
|
border: 1px dashed #dee0e3;
|
border-radius: 4px;
|
|
.ed-icon {
|
color: #1f2329;
|
}
|
|
&:hover {
|
.ed-icon {
|
color: var(--ed-color-primary);
|
}
|
}
|
}
|
|
&.img-area_dark {
|
:deep(.ed-upload-list__item).is-ready {
|
border-color: #434343;
|
}
|
:deep(.ed-upload--picture-card) {
|
background: #373737;
|
border-color: #434343;
|
.ed-icon {
|
color: #ebebeb;
|
}
|
}
|
}
|
|
&.img-area_light {
|
:deep(.ed-upload-list__item).is-ready {
|
border-color: #dee0e3;
|
}
|
}
|
:deep(.ed-upload-list__item-preview) {
|
display: none !important;
|
}
|
:deep(.ed-upload-list__item-delete) {
|
margin-left: 0 !important;
|
}
|
:deep(.ed-upload-list__item-status-label) {
|
display: none !important;
|
}
|
:deep(.ed-icon--close-tip) {
|
display: none !important;
|
}
|
}
|
.avatar-uploader {
|
width: 90px;
|
height: 80px;
|
overflow: hidden;
|
}
|
.avatar-uploader {
|
width: 90px;
|
:deep(.ed-upload) {
|
width: 80px;
|
height: 80px;
|
line-height: 90px;
|
}
|
|
:deep(.ed-upload-list li) {
|
width: 80px !important;
|
height: 80px !important;
|
}
|
|
:deep(.ed-upload--picture-card) {
|
background: #eff0f1;
|
border: 1px dashed #dee0e3;
|
border-radius: 4px;
|
|
.ed-icon {
|
color: #1f2329;
|
}
|
|
&:hover {
|
.ed-icon {
|
color: var(--ed-color-primary);
|
}
|
}
|
}
|
}
|
.uploader {
|
:deep(.ed-form-item__content) {
|
justify-content: center;
|
}
|
}
|
.data-area-label {
|
text-align: left;
|
position: relative;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
}
|
.radius-class {
|
:deep(.ed-radio) {
|
margin-right: 30px !important;
|
}
|
.ed-radio:last-child {
|
margin-right: 0px !important;
|
}
|
}
|
</style>
|
