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

Merge pull request #6659 from ulleo/dev

Browse Source 
feat: antv 组合图
This commit is contained in:
ulleo 2023-11-13 15:21:51 +08:00 committed by GitHub
commit e3f5573238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 2648 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/frontend/src/views/chart/components/normal/LabelNormal.vue
View File

@ -203,7 +203,6 @@ export default {
}
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle)
console.log(customStyle)
if (customStyle.text) {
this.title_show = customStyle.text.show
this.title_class.fontSize = customStyle.text.fontSize + 'px'
@ -229,7 +228,6 @@ export default {
},
colorThreshold(valueColor, setBg) {
console.log(valueColor, setBg)
if (this.chart.senior) {
const senior = JSON.parse(this.chart.senior)
if (senior.threshold && senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {

1
core/frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -120,7 +120,6 @@
v-show="showProperty('customColor')"
class="custom-color-style"
>
aaa
<div
v-for="(item,index) in colorForm.seriesColors"
:key="index"

15
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/ColorSelector.vue
View File

@ -53,18 +53,27 @@
</el-popover>
</el-form-item>
<el-form-item
:label="$t('chart.gradient')"
class="form-item"
>
<el-checkbox
v-model="colorForm.gradient"
@change="changeColorCase"
/>
</el-form-item>
<!-- <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini"
@change="changeColorCase"/>
</el-form-item>-->
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '@/utils/map'
import {COLOR_PANEL, DEFAULT_COLOR_CASE} from '../../utils/map'
export default {
name: 'ColorSelector',

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>

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

@ -0,0 +1,292 @@
<template>
<div style="width: 100%">
<el-col>
<el-form
ref="sizeFormBar"
:model="sizeForm"
label-width="80px"
size="mini"
>
<el-divider
content-position="center"
class="divider-style"
>{{ $t('chart.chart_bar') }}
</el-divider>
<el-form-item
:label="$t('chart.adapt')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.barDefault"
@change="changeBarSizeCase('barDefault')"
>{{ $t('chart.adapt') }}
</el-checkbox>
</el-form-item>
<el-form-item
:label="$t('chart.bar_width')"
class="form-item form-item-slider"
>
<el-row>
<el-col :span="22">
<el-slider
v-model="sizeForm.barWidthPercent"
:disabled="sizeForm.barDefault"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="100"
@change="changeBarSizeCase('barWidthPercent')"
/>
</el-col>
<el-col :span="2">
<div style="height: 38px;display: flex;align-items: center;">
%
</div>
</el-col>
</el-row>
</el-form-item>
<!--line-begin-->
<el-divider
content-position="center"
class="divider-style"
>{{ $t('chart.chart_line') }}
</el-divider>
<el-form-item
:label="$t('chart.line_width')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.lineWidth"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="10"
@change="changeBarSizeCase('lineWidth')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.line_symbol')"
class="form-item"
>
<el-select
v-model="sizeForm.lineSymbol"
:placeholder="$t('chart.line_symbol')"
@change="changeBarSizeCase('lineSymbol')"
>
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.line_symbol_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.lineSymbolSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="0"
:max="20"
@change="changeBarSizeCase('lineSymbolSize')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.line_smooth')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.lineSmooth"
@change="changeBarSizeCase('lineSmooth')"
>{{ $t('chart.line_smooth') }}
</el-checkbox>
</el-form-item>
<!--line-end-->
<!--scatter-begin-->
<el-divider
content-position="center"
class="divider-style"
>{{ $t('chart.chart_scatter') }}
</el-divider>
<el-form-item
:label="$t('chart.bubble_symbol')"
class="form-item"
>
<el-select
v-model="sizeForm.scatterSymbol"
:placeholder="$t('chart.line_symbol')"
@change="changeBarSizeCase('scatterSymbol')"
>
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.bubble_size')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.scatterSymbolSize"
show-input
:show-input-controls="false"
input-size="mini"
:min="1"
:max="40"
@change="changeBarSizeCase('scatterSymbolSize')"
/>
</el-form-item>
<!--scatter-end-->
</el-form>
</el-col>
</div>
</template>
<script>
import {CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE} from '../../utils/map'
export default {
name: 'SizeSelector',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
},
},
data() {
return {
sizeForm: JSON.parse(JSON.stringify(DEFAULT_SIZE)),
lineSymbolOptions: [
// { name: this.$t('chart.line_symbol_none'), value: 'none' },
{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'}
],
fontSize: [],
fontFamily: CHART_FONT_FAMILY,
fontLetterSpace: CHART_FONT_LETTER_SPACE
}
},
watch: {
'chart': {
handler: function () {
this.initData()
}
}
},
mounted() {
this.init()
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
this.sizeForm = customAttr.size
this.sizeForm.barDefault = this.sizeForm.barDefault !== undefined ? this.sizeForm.barDefault : DEFAULT_SIZE.barDefault;
this.sizeForm.barWidthPercent = this.sizeForm.barWidthPercent !== undefined ? this.sizeForm.barWidthPercent : DEFAULT_SIZE.barWidthPercent;
this.sizeForm.lineWidth = this.sizeForm.lineWidth !== undefined ? this.sizeForm.lineWidth : DEFAULT_SIZE.lineWidth;
this.sizeForm.lineSymbol = this.sizeForm.lineSymbol !== undefined ? this.sizeForm.lineSymbol : DEFAULT_SIZE.lineSymbol;
this.sizeForm.lineSymbolSize = this.sizeForm.lineSymbolSize !== undefined ? this.sizeForm.lineSymbolSize : DEFAULT_SIZE.lineSymbolSize;
this.sizeForm.lineSmooth = this.sizeForm.lineSmooth !== undefined ? this.sizeForm.lineSmooth : DEFAULT_SIZE.lineSmooth;
this.sizeForm.scatterSymbol = this.sizeForm.scatterSymbol !== undefined ? this.sizeForm.scatterSymbol : DEFAULT_SIZE.scatterSymbol;
this.sizeForm.scatterSymbolSize = this.sizeForm.scatterSymbolSize !== undefined ? this.sizeForm.scatterSymbolSize : DEFAULT_SIZE.scatterSymbolSize;
}
}
},
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeBarSizeCase(modifyName) {
this.$emit('onSizeChange', this.sizeForm)
},
}
}
</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;
}
.el-divider--horizontal {
margin: 10px 0
}
.divider-style ::v-deep .el-divider__text {
color: #606266;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
}
</style>

130
extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/SizeSelectorAntV.vue
View File

@ -1,130 +0,0 @@
<template>
<div style="width: 100%">
<el-col>
<el-form ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.bubble_symbol')" class="form-item">
<el-select v-model="sizeForm.scatterSymbol" :placeholder="$t('chart.line_symbol')" @change="changeBarSizeCase">
<el-option
v-for="item in lineSymbolOptions"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.bubble_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.scatterSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="40" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.symbolOpacity" show-input :show-input-controls="false" input-size="mini" :min="1" :max="10" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item v-if="sizeForm.scatterSymbol && sizeForm.scatterSymbol !== 'marker'" :label="$t('plugin_view_chartmix.border')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.symbolStrokeWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="5" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_SIZE } from '@/utils/map'
export default {
name: 'SizeSelectorAntV',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
}
},
data() {
return {
sizeForm: JSON.parse(JSON.stringify(DEFAULT_SIZE)),
lineSymbolOptions: [
{ name: this.$t('plugin_view_chartmix.marker'), value: 'marker' },
{ 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('plugin_view_chartmix.pentagon'), value: 'pentagon' },
{ name: this.$t('plugin_view_chartmix.hexagon'), value: 'hexagon' },
{ name: this.$t('plugin_view_chartmix.octagon'), value: 'octogon' },
{ name: this.$t('plugin_view_chartmix.hexagram'), value: 'hexagram' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'rhombus' }
]
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
initData() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.size) {
this.sizeForm = customAttr.size
}
}
},
changeBarSizeCase() {
this.$emit('onSizeChange', this.sizeForm)
},
formatTooltip(val) {
return val / 10
}
}
}
</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;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
.el-divider--horizontal {
margin: 10px 0
}
.divider-style ::v-deep .el-divider__text{
color: #606266;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
}
</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>

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

@ -63,6 +63,12 @@ export function hexColorToRGBA(hex, alpha) {
}
}
export function setGradientColor(rawColor, show = false, angle = 0) {
const item = rawColor.split(',')
item.splice(3, 1, '0.3)')
return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
}

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

@ -12,53 +12,14 @@ export const DEFAULT_COLOR_CASE = {
}
export const DEFAULT_SIZE = {
barDefault: true,
barWidth: 40,
barGap: 0.4,
barWidthPercent: 50,
lineWidth: 2,
lineType: 'solid',
lineSymbol: 'marker',
lineSymbol: 'circle',
lineSymbolSize: 4,
lineSmooth: true,
lineArea: false,
pieInnerRadius: 0,
pieOuterRadius: 80,
pieRoseType: 'radius',
pieRoseRadius: 5,
funnelWidth: 80,
radarShape: 'polygon',
radarSize: 80,
tableTitleFontSize: 12,
tableItemFontSize: 12,
tableTitleHeight: 36,
tableItemHeight: 36,
tablePageSize: '20',
tableColumnMode: 'custom',
tableColumnWidth: 100,
tableHeaderAlign: 'left',
tableItemAlign: 'right',
gaugeMin: 0,
gaugeMax: 100,
gaugeStartAngle: 225,
gaugeEndAngle: -45,
dimensionFontSize: 18,
quotaFontSize: 18,
spaceSplit: 10,
dimensionShow: true,
quotaShow: true,
scatterSymbol: 'marker',
scatterSymbol: 'circle',
scatterSymbolSize: 15,
symbolOpacity: 5,
symbolStrokeWidth: 1,
treemapWidth: 80,
treemapHeight: 80,
liquidMax: 100,
liquidSize: 80,
liquidOutlineBorder: 4,
liquidOutlineDistance: 8,
liquidWaveLength: 128,
liquidWaveCount: 3,
liquidShape: 'circle',
tablePageMode: 'page'
}
export const COLOR_PANEL = [
'#ff4500',
@ -73,6 +34,27 @@ export const COLOR_PANEL = [
'#FFFFFF'
]
export const CHART_FONT_FAMILY = [
{ name: '微软雅黑', value: 'Microsoft YaHei' },
{ name: '宋体', value: 'SimSun' },
{ name: '黑体', value: 'SimHei' },
{ name: '楷体', value: 'KaiTi' }
]
export const CHART_FONT_LETTER_SPACE = [
{ name: '0px', value: '0' },
{ name: '1px', value: '1' },
{ name: '2px', value: '2' },
{ name: '3px', value: '3' },
{ name: '4px', value: '4' },
{ name: '5px', value: '5' },
{ name: '6px', value: '6' },
{ name: '7px', value: '7' },
{ name: '8px', value: '8' },
{ name: '9px', value: '9' },
{ name: '10px', value: '10' }
]
export const DEFAULT_LABEL = {
show: true,
position: 'middle',
@ -406,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',
@ -421,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: {
@ -435,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// 千分符
}
}
@ -515,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) {

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

@ -33,15 +33,14 @@
<script>
import {Mix} from '@antv/g2plot'
import {uuid, hexColorToRGBA} from '../../../utils/chartmix'
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
getLineDash, DEFAULT_COLOR_CASE, formatterItem, DEFAULT_YAXIS_EXT_STYLE
} from '../../../utils/map';
import ChartTitleUpdate from '../../../components/views/ChartTitleUpdate';
import _ from 'lodash';
@ -276,7 +275,9 @@ export default {
let yaxisCount = yaxisList.length;
let customAttr = undefined;
let gradient = false;
let colors = undefined;
let alpha = DEFAULT_COLOR_CASE.alpha;
let labelSetting = undefined;
let labelPosition = 'middle';
if (this.chart.customAttr) {
@ -284,6 +285,8 @@ export default {
if (customAttr) {
if (customAttr.color) {
colors = customAttr.color.colors;
alpha = customAttr.color.alpha;
gradient = customAttr.color.gradient;
}
if (customAttr.label) {
labelSetting = customAttr.label.show ? {
@ -297,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) => {
@ -322,7 +331,12 @@ export default {
}
}
return {
let color = colors && _index < colors.length ? hexColorToRGBA(colors[_index], alpha) : undefined;
if (color && gradient) {
color = setGradientColor(color, true, 270)
}
const setting = {
type: _chartType,
name: t.name,
options: {
@ -344,13 +358,13 @@ export default {
alias: t.name,
},
},
yAxis: {
position: 'left',
},
color: colors && _index < colors.length ? colors[_index] : undefined,
color: color,
label: _labelSetting,
xAxis: xAxis,
yAxis: yAxis,
}
}
return this.setSizeSetting(setting);
}) : [];
let _dataExt = this.chart.data && this.chart.data.data && this.chart.data.data.length > 0 ? _.map(_.filter(this.chart.data.data, (c, _index) => {
@ -366,7 +380,6 @@ export default {
names.push(t.name);
const _chartType = this.getChartType(yaxisExtList[_index].chartType);
if (_labelSetting) {
@ -377,7 +390,12 @@ export default {
}
}
return {
let color = colors && (yaxisCount + _index) < colors.length ? hexColorToRGBA(colors[yaxisCount + _index], alpha) : undefined;
if (color && gradient) {
color = setGradientColor(color, true, 270)
}
const setting = {
type: _chartType,
name: t.name,
options: {
@ -399,13 +417,13 @@ export default {
alias: t.name,
},
},
yAxis: {
position: 'right',
},
color: colors && (yaxisCount + _index) < colors.length ? colors[yaxisCount + _index] : undefined,
color: color,
label: _labelSetting,
xAxis: false,
yAxis: yAxisExt,
}
}
return this.setSizeSetting(setting);
}) : [];
@ -465,9 +483,332 @@ 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) {
customAttr = JSON.parse(this.chart.customAttr);
}
if (customAttr && customAttr.size) {
setting.options.columnWidthRatio = undefined;
setting.options.smooth = undefined;
setting.options.point = undefined;
setting.options.lineStyle = undefined;
setting.options.size = undefined;
setting.options.shape = undefined;
if (setting.type === 'column' && !customAttr.size.barDefault) {
setting.options.columnWidthRatio = customAttr.size.barWidthPercent / 100.0
}
if (setting.type === 'line') {
setting.options.smooth = customAttr.size.lineSmooth
setting.options.point = {
size: parseInt(customAttr.size.lineSymbolSize),
shape: customAttr.size.lineSymbol
}
setting.options.lineStyle = {
lineWidth: parseInt(customAttr.size.lineWidth)
}
}
if (setting.type === 'scatter') {
setting.options.size = parseInt(customAttr.size.scatterSymbolSize)
setting.options.shape = customAttr.size.scatterSymbol
}
}
return setting;
},
getAnalyse(chart) {
let senior = {}
const assistLine = []
@ -541,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

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

@ -8,11 +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"/>
</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"
@ -25,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"
@ -44,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"
@ -53,123 +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 messages from '@/de-base/lang/messages'
export default {
components: {
ColorSelector,
TitleSelector,
TooltipSelectorAntV,
LabelSelector
},
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()
},
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>