github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 19:42:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(视图): 尝试接入G2制作视图；增加水波图

Browse Source
This commit is contained in:
junjie 2021-09-13 11:03:42 +08:00
parent ad9f8b19f9
commit 97e289f4b8
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')">