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

feat: AntV 组合图增加横轴、纵轴设置

Browse Source 
#6099
This commit is contained in:
ulleo 2023-11-13 15:20:03 +08:00
parent beafeb4f7a
commit 3878f8fde4
10 changed files with 2255 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/LegendSelectorAntV.vue Normal file
View File

@ -0,0 +1,248 @@
<template>
<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('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('icon')"
>
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</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('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('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('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('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('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>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_LEGEND_STYLE } from '../../utils/map'
export default {
name: 'LegendSelectorAntV',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)),
fontSize: [],
iconSymbolOptions: [
{ name: this.$t('chart.line_symbol_circle'), value: 'circle' },
{ name: this.$t('chart.line_symbol_rect'), value: 'square' },
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
],
isSetting: false,
predefineColors: COLOR_PANEL
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.legend) {
this.legendForm = customStyle.legend
}
}
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
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)
}
}
}
</script>
<style scoped>
.shape-item{
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.form-item ::v-deep .el-radio__label {
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style{
cursor: pointer;
z-index: 1003;
}
</style>

4
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TitleSelector.vue
View File

@ -235,6 +235,10 @@ export default {
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}

4
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelector.vue
View File

@ -125,6 +125,10 @@ export default {
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}

4
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/TooltipSelectorAntV.vue
View File

@ -206,6 +206,10 @@ export default {
.form-item ::v-deep .el-form-item__label{
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}

413
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/XAxisSelectorAntV.vue Normal file
View File

@ -0,0 +1,413 @@
<template>
<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('show')"
>{{ $t('chart.show') }}
</el-checkbox>
</el-form-item>
<div v-if="axisForm.show">
<el-form-item
:label="$t('chart.position')"
class="form-item"
>
<el-radio-group
v-model="axisForm.position"
size="mini"
@change="changeXAxisStyle('position')"
>
<div v-if="chart.type !== 'bidirectional-bar'">
<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>
</div>
<div v-else-if="chart.type === 'bidirectional-bar'">
<el-radio-button label="top">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_center') }}</el-radio-button>
</div>
</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('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('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('nameTextStyle')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-divider/>
<el-form-item
:label="$t('chart.axis_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.axisLine.show"
@change="changeXAxisStyle('axisLine')"
>{{ $t('chart.axis_show') }}
</el-checkbox>
</el-form-item>
<el-form-item
:label="$t('chart.grid_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.show"
@change="changeXAxisStyle('splitLine')"
>{{ $t('chart.grid_show') }}
</el-checkbox>
</el-form-item>
<span v-if="axisForm.splitLine.show">
<el-form-item
:label="$t('chart.grid_color')"
class="form-item"
>
<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.grid_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('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('axisLabel')"
>{{ $t('chart.axis_label_show') }}
</el-checkbox>
</el-form-item>
<span v-if="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('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('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('axisLabel')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<span v-if="chart.type && chart.type.includes('horizontal')">
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.type"
@change="changeXAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="type in typeList"
:key="type.value"
:label="$t('chart.' + type.name)"
:value="type.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'auto'"
:label="$t('chart.value_formatter_decimal_count')"
class="form-item"
>
<el-input-number
v-model="axisForm.axisLabelFormatter.decimalCount"
:precision="0"
:min="0"
:max="10"
size="mini"
@change="changeXAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'percent'"
:label="$t('chart.value_formatter_unit')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.unit"
:placeholder="$t('chart.pls_select_field')"
size="mini"
@change="changeXAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="item in unitList"
:key="item.value"
:label="$t('chart.' + item.name)"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_suffix')"
class="form-item"
>
<el-input
v-model="axisForm.axisLabelFormatter.suffix"
size="mini"
clearable
:placeholder="$t('commons.input_content')"
@change="changeXAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_thousand_separator')"
class="form-item"
>
<el-checkbox
v-model="axisForm.axisLabelFormatter.thousandSeparator"
@change="changeXAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
</span>
</span>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import {COLOR_PANEL, DEFAULT_XAXIS_STYLE} from '../../utils/map'
import {formatterType, unitList} from '../../utils/formatter'
export default {
name: 'XAxisSelectorAntV',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
}
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
'chart': {
handler: function () {
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.xAxis) {
this.axisForm = customStyle.xAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
}
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLabelFormatter))
}
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLine))
}
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeXAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
this.$message({
message: this.$t('chart.splitCount_less_100'),
type: 'error'
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeXAxisForm', this.axisForm)
},
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.form-item ::v-deep .el-radio__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.switch-style {
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
</style>

473
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue Normal file
View File

@ -0,0 +1,473 @@
<template>
<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('show')"
>{{ $t('chart.show') }}
</el-checkbox>
</el-form-item>
<div v-if="axisForm.show">
<el-form-item
: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('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('nameTextStyle')"
>
<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 class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.axis_value') }}</span>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div
slot="content"
v-html="$t('chart.axis_tip')"
/>
<i
class="el-icon-info"
style="cursor: pointer;"
/>
</el-tooltip>
</span>
</span>
<el-checkbox
v-model="axisForm.axisValue.auto"
@change="changeYAxisStyle('axisValue')"
>{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-if="!axisForm.axisValue.auto">
<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('axisValue')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.axis_value_split_count')"
class="form-item"
>
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.axis_value_split_count') }}</span>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div slot="content">
期望的坐标轴刻度数量，非最终结果。
</div>
<i
class="el-icon-info"
style="cursor: pointer;"
/>
</el-tooltip>
</span>
</span>
<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.axisLine.show"
@change="changeYAxisStyle('axisLine')"
>{{ $t('chart.axis_show') }}
</el-checkbox>
</el-form-item>
<el-form-item
:label="$t('chart.grid_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.show"
@change="changeYAxisStyle('splitLine')"
>{{ $t('chart.grid_show') }}
</el-checkbox>
</el-form-item>
<span v-if=" axisForm.splitLine.show">
<el-form-item
:label="$t('chart.grid_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.grid_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('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('axisLabel')"
>{{ $t('chart.axis_label_show') }}
</el-checkbox>
</el-form-item>
<span v-if=" 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('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('axisLabel')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<span v-if="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.type"
@change="changeYAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="type in typeList"
:key="type.value"
:label="$t('chart.' + type.name)"
:value="type.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'auto'"
:label="$t('chart.value_formatter_decimal_count')"
class="form-item"
>
<el-input-number
v-model="axisForm.axisLabelFormatter.decimalCount"
:precision="0"
:min="0"
:max="10"
size="mini"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'percent'"
:label="$t('chart.value_formatter_unit')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.unit"
:placeholder="$t('chart.pls_select_field')"
size="mini"
@change="changeYAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="item in unitList"
:key="item.value"
:label="$t('chart.' + item.name)"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_suffix')"
class="form-item"
>
<el-input
v-model="axisForm.axisLabelFormatter.suffix"
size="mini"
clearable
:placeholder="$t('commons.input_content')"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_thousand_separator')"
class="form-item"
>
<el-checkbox
v-model="axisForm.axisLabelFormatter.thousandSeparator"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
</span>
</span>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import {COLOR_PANEL, DEFAULT_YAXIS_EXT_STYLE} from '../../utils/map'
import {formatterType, unitList} from '../../utils/formatter'
export default {
name: 'YAxisExtSelectorAntV',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
'chart': {
handler: function () {
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
// if (!chart.customStyle.yAxisExt) {
// chart.customStyle.yAxisExt = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE))
// }
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.yAxisExt) {
this.axisForm = customStyle.yAxisExt
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.nameTextStyle))
}
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter))
}
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLine))
}
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
this.$message({
message: this.$t('chart.splitCount_less_100'),
type: 'error'
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisExtForm', this.axisForm)
},
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.form-item ::v-deep .el-radio__label {
font-size: 12px;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.switch-style {
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
</style>

473
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue Normal file
View File

@ -0,0 +1,473 @@
<template>
<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('show')"
>{{ $t('chart.show') }}
</el-checkbox>
</el-form-item>
<div v-if="axisForm.show">
<el-form-item
: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('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('nameTextStyle')"
>
<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 class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.axis_value') }}</span>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div
slot="content"
v-html="$t('chart.axis_tip')"
/>
<i
class="el-icon-info"
style="cursor: pointer;"
/>
</el-tooltip>
</span>
</span>
<el-checkbox
v-model="axisForm.axisValue.auto"
@change="changeYAxisStyle('axisValue')"
>{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-if="!axisForm.axisValue.auto">
<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('axisValue')"
/>
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.axis_value_split_count') }}</span>
<el-tooltip
class="item"
effect="dark"
placement="bottom"
>
<div slot="content">
期望的坐标轴刻度数量，非最终结果。
</div>
<i
class="el-icon-info"
style="cursor: pointer;"
/>
</el-tooltip>
</span>
</span>
<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.axisLine.show"
@change="changeYAxisStyle('axisLine')"
>{{ $t('chart.axis_show') }}
</el-checkbox>
</el-form-item>
<el-form-item
:label="$t('chart.grid_show')"
class="form-item"
>
<el-checkbox
v-model="axisForm.splitLine.show"
@change="changeYAxisStyle('splitLine')"
>{{ $t('chart.grid_show') }}
</el-checkbox>
</el-form-item>
<span v-if=" axisForm.splitLine.show">
<el-form-item
:label="$t('chart.grid_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.grid_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>
</span>
<el-divider/>
<el-form-item
: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-if="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('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('axisLabel')"
>
<el-option
v-for="option in fontSize"
:key="option.value"
:label="option.name"
:value="option.value"
/>
</el-select>
</el-form-item>
<span v-if="chart.type && !chart.type.includes('horizontal') && chart.type !== 'waterfall'">
<el-form-item
:label="$t('chart.value_formatter_type')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.type"
@change="changeYAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="type in typeList"
:key="type.value"
:label="$t('chart.' + type.name)"
:value="type.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'auto'"
:label="$t('chart.value_formatter_decimal_count')"
class="form-item"
>
<el-input-number
v-model="axisForm.axisLabelFormatter.decimalCount"
:precision="0"
:min="0"
:max="10"
size="mini"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
v-if="axisForm.axisLabelFormatter.type !== 'percent'"
:label="$t('chart.value_formatter_unit')"
class="form-item"
>
<el-select
v-model="axisForm.axisLabelFormatter.unit"
:placeholder="$t('chart.pls_select_field')"
size="mini"
@change="changeYAxisStyle('axisLabelFormatter')"
>
<el-option
v-for="item in unitList"
:key="item.value"
:label="$t('chart.' + item.name)"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_suffix')"
class="form-item"
>
<el-input
v-model="axisForm.axisLabelFormatter.suffix"
size="mini"
clearable
:placeholder="$t('commons.input_content')"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.value_formatter_thousand_separator')"
class="form-item"
>
<el-checkbox
v-model="axisForm.axisLabelFormatter.thousandSeparator"
@change="changeYAxisStyle('axisLabelFormatter')"
/>
</el-form-item>
</span>
</span>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import {COLOR_PANEL, DEFAULT_YAXIS_STYLE} from '../../utils/map'
import {formatterType, unitList} from '../../utils/formatter'
export default {
name: 'YAxisSelectorAntV',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function () {
return []
}
}
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false,
fontSize: [],
predefineColors: COLOR_PANEL,
typeList: formatterType,
unitList: unitList
}
},
watch: {
'chart': {
handler: function () {
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
let customStyle = null
if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
customStyle = JSON.parse(JSON.stringify(chart.customStyle))
} else {
customStyle = JSON.parse(chart.customStyle)
}
if (customStyle.yAxis) {
this.axisForm = customStyle.yAxis
if (!this.axisForm.splitLine) {
this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
}
if (!this.axisForm.nameTextStyle) {
this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
}
if (!this.axisForm.axisValue) {
this.axisForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisValue))
}
if (!this.axisForm.axisLabelFormatter) {
this.axisForm.axisLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLabelFormatter))
}
if (!this.axisForm.axisLine) {
this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLine))
}
}
}
},
init() {
const arr = []
for (let i = 6; i <= 40; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
if (this.axisForm.axisValue.splitCount && (parseInt(this.axisForm.axisValue.splitCount) > 100 || parseInt(this.axisForm.axisValue.splitCount) < 0)) {
this.$message({
message: this.$t('chart.splitCount_less_100'),
type: 'error'
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 10px 0
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.form-item ::v-deep .el-checkbox__label {
font-size: 12px;
}
.form-item ::v-deep .el-radio__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.switch-style {
position: absolute;
right: 10px;
margin-top: -4px;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
</style>

112
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js
View File

@ -388,9 +388,9 @@ export function hexColorToRGBA(hex, alpha) {
}
export const DEFAULT_YAXIS_EXT_STYLE = {
export const DEFAULT_YAXIS_STYLE = {
show: true,
position: 'right',
position: 'left',
name: '',
nameTextStyle: {
color: '#333333',
@ -403,6 +403,14 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
rotate: 0,
formatter: '{value}'
},
axisLine: {
show: false,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
},
splitLine: {
show: true,
lineStyle: {
@ -417,6 +425,59 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
max: null,
split: null,
splitCount: null
},
axisLabelFormatter: {
type: 'auto', // auto,value,percent
unit: 1, // 换算单位
suffix: '', // 单位后缀
decimalCount: 2, // 小数位数
thousandSeparator: true// 千分符
}
}
export const DEFAULT_YAXIS_EXT_STYLE = {
show: true,
position: 'right',
name: '',
nameTextStyle: {
color: '#333333',
fontSize: 12
},
axisLabel: {
show: true,
color: '#333333',
fontSize: '12',
rotate: 0,
formatter: '{value}'
},
axisLine: {
show: false,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
},
axisValue: {
auto: true,
min: null,
max: null,
split: null,
splitCount: null
},
axisLabelFormatter: {
type: 'auto', // auto,value,percent
unit: 1, // 换算单位
suffix: '', // 单位后缀
decimalCount: 2, // 小数位数
thousandSeparator: true// 千分符
}
}
@ -497,53 +558,6 @@ export const DEFAULT_XAXIS_STYLE = {
}
}
export const DEFAULT_YAXIS_STYLE = {
show: true,
position: 'left',
name: '',
nameTextStyle: {
color: '#333333',
fontSize: 12
},
axisLabel: {
show: true,
color: '#333333',
fontSize: '12',
rotate: 0,
formatter: '{value}'
},
axisLine: {
show: false,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#cccccc',
width: 1,
style: 'solid'
}
},
axisValue: {
auto: true,
min: null,
max: null,
split: null,
splitCount: null
},
axisLabelFormatter: {
type: 'auto', // auto,value,percent
unit: 1, // 换算单位
suffix: '', // 单位后缀
decimalCount: 2, // 小数位数
thousandSeparator: true// 千分符
}
}
export function transAxisPosition(chart, axis) {
if (chart.type.includes('horizontal')) {
switch (axis.position) {

404
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
View File

@ -37,17 +37,15 @@ import {uuid, hexColorToRGBA, setGradientColor} from '../../../utils/chartmix'
import ViewTrackBar from '../../../components/views/ViewTrackBar'
import {getRemark} from "../../../components/views/utils";
import {
DEFAULT_TITLE_STYLE,
DEFAULT_XAXIS_STYLE,
DEFAULT_YAXIS_STYLE,
transAxisPosition,
getLineDash, DEFAULT_COLOR_CASE
getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
} from '../../../utils/map';
import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
import _ from 'lodash';
import {clear} from 'size-sensor'
import {valueFormatter} from '../../../utils/formatter'
import fa from "element-ui/src/locale/lang/fa";
export default {
name: 'ChartComponent',
@ -302,6 +300,12 @@ export default {
}
}
const xAxis = this.getXAxis(this.chart);
const yAxis = this.getYAxis(this.chart);
const yAxisExt = this.getYAxisExt(this.chart);
const names = [];
let _data = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@ -354,11 +358,10 @@ export default {
alias: t.name,
},
},
yAxis: {
position: 'left',
},
color: color,
label: _labelSetting,
xAxis: xAxis,
yAxis: yAxis,
}
}
return this.setSizeSetting(setting);
@ -414,11 +417,10 @@ export default {
alias: t.name,
},
},
yAxis: {
position: 'right',
},
color: color,
label: _labelSetting,
xAxis: false,
yAxis: yAxisExt,
}
}
return this.setSizeSetting(setting);
@ -481,9 +483,297 @@ export default {
params.annotations = this.getAnalyse(this.chart);
params.legend = this.getLegend(this.chart);
console.log(params)
return params;
},
getXAxis(chart) {
let axis = {}
let customStyle
if (chart.customStyle) {
customStyle = JSON.parse(chart.customStyle)
// legend
if (customStyle.xAxis) {
const a = JSON.parse(JSON.stringify(customStyle.xAxis))
if (a.show) {
const title = (a.name && a.name !== '') ? {
text: a.name,
style: {
fill: a.nameTextStyle.color,
fontSize: parseInt(a.nameTextStyle.fontSize)
},
spacing: 8
} : null
const grid = a.splitLine.show ? {
line: {
style: {
stroke: a.splitLine.lineStyle.color,
lineWidth: parseInt(a.splitLine.lineStyle.width)
}
}
} : null
const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
const axisLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color,
lineWidth: parseInt(axisCfg.lineStyle.width)
}
} : null
const tickLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color
}
} : null
const rotate = parseInt(a.axisLabel.rotate)
const label = a.axisLabel.show ? {
rotate: rotate * Math.PI / 180,
style: {
textAlign: rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center',
fill: a.axisLabel.color,
fontSize: parseInt(a.axisLabel.fontSize)
},
formatter: function (value) {
if (chart.type.includes('horizontal')) {
if (!a.axisLabelFormatter) {
return valueFormatter(value, formatterItem)
} else {
return valueFormatter(value, a.axisLabelFormatter)
}
} else {
return value
}
}
} : null
axis = {
position: transAxisPosition(chart, a),
title: title,
grid: grid,
label: label,
line: axisLine,
tickLine: tickLine
}
// 轴值设置
delete axis.minLimit
delete axis.maxLimit
delete axis.tickCount
} else {
axis = false
}
}
}
return axis
},
getYAxis(chart) {
let axis = {}
let customStyle
if (chart.customStyle) {
customStyle = JSON.parse(chart.customStyle)
// legend
if (customStyle.yAxis) {
const a = JSON.parse(JSON.stringify(customStyle.yAxis))
if (a.show) {
const title = (a.name && a.name !== '') ? {
text: a.name,
style: {
fill: a.nameTextStyle.color,
fontSize: parseInt(a.nameTextStyle.fontSize)
},
spacing: 8
} : null
const grid = a.splitLine.show ? {
line: {
style: {
stroke: a.splitLine.lineStyle.color,
lineWidth: parseInt(a.splitLine.lineStyle.width)
}
}
} : null
const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_STYLE.axisLine
const axisLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color,
lineWidth: parseInt(axisCfg.lineStyle.width)
}
} : null
const tickLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color
}
} : null
const label = a.axisLabel.show ? {
rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
style: {
fill: a.axisLabel.color,
fontSize: parseInt(a.axisLabel.fontSize)
},
formatter: function (value) {
if (chart.type === 'waterfall') {
return value
} else {
if (!chart.type.includes('horizontal')) {
if (!a.axisLabelFormatter) {
return valueFormatter(value, formatterItem)
} else {
return valueFormatter(value, a.axisLabelFormatter)
}
} else {
return value
}
}
}
} : null
axis = {
position: 'left',
title: title,
grid: grid,
label: label,
line: axisLine,
tickLine: tickLine
}
// 轴值设置
delete axis.minLimit
delete axis.maxLimit
delete axis.tickCount
const axisValue = a.axisValue
if (axisValue && !axisValue.auto) {
const yAxisSeriesMaxList = []
const maxList = []
chart.data.data.forEach(ele => {
maxList.push(ele.value)
})
yAxisSeriesMaxList.push(Math.max.apply(null, maxList))
if (yAxisSeriesMaxList.length > 0 && !isNaN(axisValue.max)) {
const max = Math.max.apply(null, yAxisSeriesMaxList)
if (max <= parseFloat(axisValue.max)) {
axisValue.max && (axis.maxLimit = axis.max = parseFloat(axisValue.max))
}
}
const yAxisSeriesMinList = []
const minList = []
chart.data.data.forEach(ele => {
minList.push(ele.value)
})
yAxisSeriesMinList.push(Math.min.apply(null, minList))
if (yAxisSeriesMinList.length > 0 && !isNaN(axisValue.min)) {
const min = Math.min.apply(null, yAxisSeriesMinList)
if (min >= parseFloat(axisValue.min)) {
axisValue.min && (axis.minLimit = axis.min = parseFloat(axisValue.min))
}
}
axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
}
} else {
axis = false
}
}
} else {
return {position: 'left'}
}
return axis
},
// yAxisExt
getYAxisExt(chart) {
let axis = {}
let customStyle
if (chart.customStyle) {
customStyle = JSON.parse(chart.customStyle)
// legend
if (customStyle.yAxisExt) {
const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
if (a.show) {
const title = (a.name && a.name !== '') ? {
text: a.name,
style: {
fill: a.nameTextStyle.color,
fontSize: parseInt(a.nameTextStyle.fontSize)
},
spacing: 8
} : null
const grid = a.splitLine.show ? {
line: {
style: {
stroke: a.splitLine.lineStyle.color,
lineWidth: parseInt(a.splitLine.lineStyle.width)
}
}
} : null
const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine
const axisLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color,
lineWidth: parseInt(axisCfg.lineStyle.width)
}
} : null
const tickLine = axisCfg.show ? {
style: {
stroke: axisCfg.lineStyle.color
}
} : null
const label = a.axisLabel.show ? {
rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180,
style: {
fill: a.axisLabel.color,
fontSize: parseInt(a.axisLabel.fontSize)
},
formatter: function (value) {
if (chart.type === 'waterfall') {
return value
} else {
if (!chart.type.includes('horizontal')) {
if (!a.axisLabelFormatter) {
return valueFormatter(value, formatterItem)
} else {
return valueFormatter(value, a.axisLabelFormatter)
}
} else {
return value
}
}
}
} : null
axis = {
position: 'right',
title: title,
grid: grid,
label: label,
line: axisLine,
tickLine: tickLine
}
// 轴值设置
delete axis.minLimit
delete axis.maxLimit
delete axis.tickCount
const axisValue = a.axisValue
if (axisValue && !axisValue.auto) {
axisValue.min && (axis.minLimit = parseFloat(axisValue.min))
axisValue.max && (axis.maxLimit = parseFloat(axisValue.max))
axisValue.splitCount && (axis.tickCount = parseFloat(axisValue.splitCount))
}
} else {
axis = false
}
}
} else {
return {position: 'right'}
}
return axis
},
setSizeSetting(setting) {
let customAttr = undefined;
if (this.chart.customAttr) {
@ -592,6 +882,102 @@ export default {
return assistLine
},
getLegend(chart) {
let legend = {}
let customStyle
if (chart.customStyle) {
customStyle = JSON.parse(chart.customStyle)
// legend
if (customStyle.legend) {
const l = JSON.parse(JSON.stringify(customStyle.legend))
if (l.show) {
let offsetX, offsetY, position
const orient = l.orient
const legendSymbol = l.icon
// fix position
if (l.hPosition === 'center') {
position = l.vPosition === 'center' ? 'top' : l.vPosition
} else if (l.vPosition === 'center') {
position = l.hPosition === 'center' ? 'left' : l.hPosition
} else {
if (orient === 'horizontal') {
position = l.vPosition + '-' + l.hPosition
} else {
position = l.hPosition + '-' + l.vPosition
}
}
// fix offset
if (orient === 'horizontal') {
if (l.hPosition === 'left') {
offsetX = 16
} else if (l.hPosition === 'right') {
offsetX = -16
} else {
offsetX = 0
}
if (l.vPosition === 'top') {
offsetY = 0
} else if (l.vPosition === 'bottom') {
if (chart.drill) {
offsetY = -16
} else {
offsetY = -4
}
} else {
offsetY = 0
}
} else {
if (l.hPosition === 'left') {
offsetX = 10
} else if (l.hPosition === 'right') {
offsetX = -10
} else {
offsetX = 0
}
if (l.vPosition === 'top') {
offsetY = 0
} else if (l.vPosition === 'bottom') {
if (chart.drill) {
offsetY = -22
} else {
offsetY = -10
}
} else {
offsetY = 0
}
}
legend = {
layout: orient,
position: position,
offsetX: offsetX,
offsetY: offsetY,
marker: {
symbol: legendSymbol
},
radio: false, // 柱状图图例的聚焦功能，默认先关掉
itemName: {
formatter: (text, item, index) => {
if (chart.type !== 'bidirectional-bar') {
return text
}
const yaxis = JSON.parse(chart.yaxis)[0]
const yaxisExt = JSON.parse(chart.yaxisExt)[0]
if (index === 0) {
return yaxis.name
}
return yaxisExt.name
}
}
}
} else {
legend = false
}
}
}
return legend
},
getSlider(chart) {
let senior = {}
let cfg = false

296
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/style.vue
View File

@ -8,15 +8,15 @@
<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')">
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange"/>
</el-collapse-item>
<el-collapse-item name="size" :title="$t('chart.size')">
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
<size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange"/>
</el-collapse-item>
<el-collapse-item name="label" :title="$t('chart.label')" >
<el-collapse-item name="label" :title="$t('chart.label')">
<label-selector
:param="param"
class="attr-selector"
@ -29,7 +29,7 @@
/>
</el-collapse-item>
<el-collapse-item name="tooltip" :title="$t('chart.tooltip')" >
<el-collapse-item name="tooltip" :title="$t('chart.tooltip')">
<tooltip-selector-ant-v
:param="param"
class="attr-selector"
@ -48,7 +48,32 @@
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<el-collapse-item v-if="view.type" name="XAxis" :title="$t('chart.xAxis')">
<XAxisSelectorAntV
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
</el-collapse-item>
<el-collapse-item v-if="view.type" name="YAxis" :title="$t('chart.yAxis')">
<YAxisSelectorAntV
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
</el-collapse-item>
<el-collapse-item v-if="view.type" name="YAxisExt" :title="$t('chart.yAxis_ext')">
<YAxisExtSelectorAntV
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisExtForm="onChangeYAxisExtForm"
/>
</el-collapse-item>
<el-collapse-item v-if="view.type" name="title" :title="$t('chart.title')">
<title-selector
:param="param"
class="attr-selector"
@ -57,129 +82,164 @@
/>
</el-collapse-item>
<!-- <el-collapse-item v-if="view.type" name="legend" :title="$t('chart.legend')">
<legend-selector
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
</el-collapse-item>-->
</el-collapse>
</el-row>
</div>
</template>
<script>
import ColorSelector from '../../../components/selector/ColorSelector'
import TitleSelector from '../../../components/selector/TitleSelector'
import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
import LabelSelector from '../../../components/selector/LabelSelector.vue'
import SizeSelector from '../../../components/selector/SizeSelector.vue'
import messages from '@/de-base/lang/messages'
export default {
components: {
ColorSelector,
TitleSelector,
TooltipSelectorAntV,
LabelSelector,
SizeSelector
},
data() {
return {
attrActiveNames: [],
styleActiveNames: [],
}
},
props: {
import ColorSelector from '../../../components/selector/ColorSelector'
import TitleSelector from '../../../components/selector/TitleSelector'
import TooltipSelectorAntV from '../../../components/selector/TooltipSelectorAntV'
import LabelSelector from '../../../components/selector/LabelSelector.vue'
import SizeSelector from '../../../components/selector/SizeSelector.vue'
import LegendSelector from '../../../components/selector/LegendSelectorAntV.vue'
import XAxisSelectorAntV from '../../../components/selector/XAxisSelectorAntV.vue'
import YAxisSelectorAntV from '../../../components/selector/YAxisSelectorAntV.vue'
import YAxisExtSelectorAntV from '../../../components/selector/YAxisExtSelectorAntV.vue'
import messages from '@/de-base/lang/messages'
obj: {
type: Object,
default: () => {}
}
},
computed: {
param() {
return this.obj.param
},
view() {
return this.obj.view
},
chart() {
return this.obj.chart
},
dimensionData() {
return this.obj.dimensionData
},
quotaData() {
return this.obj.quotaData
}
},
created() {
this.$emit('on-add-languages', messages)
},
methods: {
onColorChange(val) {
this.view.customAttr.color = val
this.calcStyle()
},
onSizeChange(val) {
this.view.customAttr.size = val
this.calcStyle()
},
onRefreshViewFields(val) {
this.view.viewFields = val
// this.calcStyle()
this.calcData()
},
onLabelChange(val) {
this.view.customAttr.label = val
this.calcStyle()
},
onTooltipChange(val) {
this.view.customAttr.tooltip = val
this.calcStyle()
},
onTextChange(val) {
this.view.customStyle.text = val
this.view.title = val.title
this.calcStyle()
},
onChangeBaseMapForm(val) {
this.view.customStyle.baseMapStyle = val
this.calcStyle()
},
onChangeBackgroundForm(val) {
this.view.customStyle.background = val
this.calcStyle()
},
onLegendChange(val) {
this.view.customStyle.legend = val
this.calcStyle()
},
calcStyle() {
this.$emit('plugin-call-back', {
eventName: 'plugins-calc-style',
eventParam: this.view
})
},
calcData(cache) {
this.$emit('plugin-call-back', {
eventName: 'calc-data',
eventParam: {
cache
}
})
},
export default {
components: {
ColorSelector,
TitleSelector,
TooltipSelectorAntV,
LabelSelector,
SizeSelector,
LegendSelector,
XAxisSelectorAntV,
YAxisSelectorAntV,
YAxisExtSelectorAntV
},
data() {
return {
attrActiveNames: [],
styleActiveNames: [],
}
},
props: {
obj: {
type: Object,
default: () => {
}
}
},
computed: {
param() {
return this.obj.param
},
view() {
return this.obj.view
},
chart() {
return this.obj.chart
},
dimensionData() {
return this.obj.dimensionData
},
quotaData() {
return this.obj.quotaData
}
},
created() {
this.$emit('on-add-languages', messages)
},
methods: {
onColorChange(val) {
this.view.customAttr.color = val
this.calcStyle()
},
onSizeChange(val) {
this.view.customAttr.size = val
this.calcStyle()
},
onRefreshViewFields(val) {
this.view.viewFields = val
// this.calcStyle()
this.calcData()
},
onLabelChange(val) {
this.view.customAttr.label = val
this.calcStyle()
},
onTooltipChange(val) {
this.view.customAttr.tooltip = val
this.calcStyle()
},
onTextChange(val) {
this.view.customStyle.text = val
this.view.title = val.title
this.calcStyle()
},
onChangeXAxisForm(val) {
this.view.customStyle.xAxis = val
this.calcStyle()
},
onChangeYAxisForm(val) {
this.view.customStyle.yAxis = val
this.calcStyle()
},
onChangeYAxisExtForm(val) {
this.view.customStyle.yAxisExt = val
this.calcStyle()
},
onChangeBaseMapForm(val) {
this.view.customStyle.baseMapStyle = val
this.calcStyle()
},
onChangeBackgroundForm(val) {
this.view.customStyle.background = val
this.calcStyle()
},
onLegendChange(val) {
this.view.customStyle.legend = val
this.calcStyle()
},
calcStyle() {
this.$emit('plugin-call-back', {
eventName: 'plugins-calc-style',
eventParam: this.view
})
},
calcData(cache) {
this.$emit('plugin-call-back', {
eventName: 'calc-data',
eventParam: {
cache
}
})
},
}
}
</script>
<style lang="scss" scoped>
.padding-lr {
padding: 0 6px;
}
span {
font-size: 12px;
}
.el-radio {
margin: 5px;
}
.radio-span > > > .el-radio__label {
margin-left: 2px;
}
.padding-lr {
padding: 0 6px;
}
span {
font-size: 12px;
}
.el-radio {
margin: 5px;
}
.radio-span > > > .el-radio__label {
margin-left: 2px;
}
</style>