dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #808 from dataease/pr@dev@feat_liquid

Browse Source 
feat(视图): 尝试接入G2制作视图；增加水波图
This commit is contained in:
XiaJunjie2020 2021-09-13 11:08:53 +08:00 committed by GitHub
commit d13812288f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/views/chart/chart/liquid/liquid.js
View File

@ -5,15 +5,7 @@ import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
export function baseLiquid(plot, container, chart) {
let value = 0
const colors = []
let max
let radius
let outlineBorder
let outlineDistance
let waveLength
let waveCount
let bgColor
let shape
let labelContent
let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title
if (chart.data) {
if (chart.data.series.length > 0) {
value = chart.data.series[0].data[0].value
@ -62,6 +54,22 @@ export function baseLiquid(plot, container, chart) {
if (customStyle.background) {
bgColor = customStyle.background.color.concat(digToHex(parseInt(customStyle.background.alpha)))
}
if (customStyle.text) {
const t = JSON.parse(JSON.stringify(customStyle.text))
if (t.show) {
title = {
formatter: () => { return chart.title },
style: ({ percent }) => ({
fontSize: parseInt(t.fontSize),
color: t.color,
fontWeight: t.isBolder ? 'bold' : 'normal',
fontStyle: t.isItalic ? 'italic' : 'normal'
})
}
} else {
title = false
}
}
}
// 开始渲染
if (plot) {
@ -87,6 +95,7 @@ export function baseLiquid(plot, container, chart) {
count: waveCount
},
statistic: {
title: title,
content: labelContent
}
})

4
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -24,14 +24,14 @@
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" @change="changeTitleStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
<el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid'" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>

2
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -503,7 +503,7 @@
<el-collapse-item v-show="view.type && view.type.includes('radar')" name="split" :title="$t('chart.split')">
<split-selector :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
</el-collapse-item>
<el-collapse-item v-show="view.type && view.type !== 'liquid'" name="title" :title="$t('chart.title')">
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
</el-collapse-item>
<el-collapse-item v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && chart.type !== 'treemap' && view.type !== 'liquid'" name="legend" :title="$t('chart.legend')">