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

feat: 新增渐变色AntV图库的所有柱状图、面积图、饼图、环形图、仪表盘

Browse Source
This commit is contained in:
dataeaseShu 2022-11-22 11:00:46 +08:00
parent abeb1911aa
commit 03634cd100
10 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lang/en.js
View File

@ -915,6 +915,7 @@ export default {
password_input_error: 'Original password input error'
},
chart: {
gradient: 'Gradient',
layer_controller: 'Quota switch',
suspension: 'Suspension',
chart_background: 'Component background',

1
frontend/src/lang/tw.js
View File

@ -915,6 +915,7 @@ export default {
password_input_error: '原始密碼輸入錯誤'
},
chart: {
gradient: '漸變',
layer_controller: '指標切換',
suspension: '懸浮',
chart_background: '組件背景',

1
frontend/src/lang/zh.js
View File

@ -914,6 +914,7 @@ export default {
password_input_error: '原始密码输入错误'
},
chart: {
gradient: '渐变',
layer_controller: '指标切换',
suspension: '悬浮',
chart_background: '组件背景',

10
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -103,6 +103,11 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
options.isPercent = chart.type === 'percentage-bar-stack'
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele) => {
return `l(270) 0:#ffffff00 1:${ele}`
})
}
// 开始渲染
if (plot) {
@ -199,6 +204,11 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
}
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele) => {
return `l(0) 0:#ffffff00 1:${ele}`
})
}
// 开始渲染
if (plot) {

1
frontend/src/views/chart/chart/chart.js
View File

@ -28,6 +28,7 @@ export const DEFAULT_COLOR_CASE = {
tableBorderColor: '#E6E7E4',
seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
areaBorderColor: '#303133',
gradient: false,
areaBaseColor: '#FFFFFF'
}

13
frontend/src/views/chart/chart/gauge/gauge_antv.js
View File

@ -124,6 +124,8 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
}
}
}
console.log('hasThreshold', hasThreshold)
if (hasThreshold) {
options.range = {
color: theme.styleSheet.paletteQualitative10,
@ -152,6 +154,17 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
}
}
if (customAttr.color.gradient) {
const colorList = (theme.styleSheet?.paletteQualitative10 || []).map((ele) => `l(0) 0:#ffffff00 1:${ele}`)
if (!options.range) {
options.range = {
color: colorList
}
} else {
options.range.color = colorList
}
}
// 开始渲染
if (plot) {
plot.destroy()

11
frontend/src/views/chart/chart/line/line_antv.js
View File

@ -178,6 +178,17 @@ export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
}
// custom color
options.color = antVCustomColor(chart)
const areaColors = [...options.color, ...options.color]
if (customAttr.color.gradient) {
options.areaStyle = () => {
const cr = areaColors.shift()
if (cr) {
return {
fill: `l(270) 0:#ffffff00 1:${cr}`
}
}
}
}
// 开始渲染
if (plot) {

12
frontend/src/views/chart/chart/pie/pie_antv.js
View File

@ -82,6 +82,12 @@ export function basePieOptionAntV(plot, container, chart, action) {
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele) => {
return `l(270) 0:#ffffff00 1:${ele}`
})
}
// 开始渲染
if (plot) {
plot.destroy()
@ -159,6 +165,12 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
// custom color
options.color = antVCustomColor(chart)
if (customAttr.color.gradient) {
options.color = options.color.map((ele) => {
return `l(270) 0:#ffffff00 1:${ele}`
})
}
// 开始渲染
if (plot) {
plot.destroy()

15
frontend/src/views/chart/chart/util.js
View File

@ -280,6 +280,7 @@ export const TYPE_CONFIGS = [
'color-selector': [
'value',
'custom',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -464,7 +465,8 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'alpha'
'alpha',
'gradient'
],
'size-selector-ant-v': [
'lineWidth',
@ -624,6 +626,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -703,6 +706,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -782,6 +786,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -861,6 +866,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1004,6 +1010,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1083,6 +1090,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1160,6 +1168,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1219,6 +1228,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1279,6 +1289,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1336,6 +1347,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [
@ -1396,6 +1408,7 @@ export const TYPE_CONFIGS = [
'value',
'colorPanel',
'customColor',
'gradient',
'alpha'
],
'size-selector-ant-v': [

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

@ -151,6 +151,17 @@
</el-popover>
</el-form-item>
<el-form-item
v-show="showProperty('gradient')"
:label="$t('chart.gradient')"
class="form-item"
>
<el-checkbox
v-model="colorForm.gradient"
@change="changeColorCase('gradient')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('quotaColor')"
:label="$t('chart.quota_color')"
@ -420,6 +431,7 @@ export default {
},
methods: {
gradientColorChange(colorDto) {
console.log('gradientColorChange')
const modifyNames = ['value', 'colors', 'seriesColors']
modifyNames.forEach(item => {
this.colorForm['modifyName'] = item