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

feat: 自定义颜色

Browse Source
This commit is contained in:
junjun 2022-05-23 11:15:44 +08:00
parent 09324a21d9
commit 3889eff052
7 changed files with 147 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import {
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseBarOptionAntV(plot, container, chart, action, isGroup, isStack) {
// theme
@ -98,6 +99,8 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
} else {
delete options.isStack
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -198,6 +201,8 @@ export function hBaseBarOptionAntV(plot, container, chart, action, isGroup, isSt
} else {
delete options.isStack
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

3
frontend/src/views/chart/chart/funnel/funnel_antv.js
View File

@ -1,5 +1,6 @@
import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
import { Funnel } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseFunnelOptionAntV(plot, container, chart, action) {
// theme
@ -62,6 +63,8 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
const s = JSON.parse(JSON.stringify(customAttr.size))
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

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

@ -10,6 +10,7 @@ import {
getSlider,
getAnalyse
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseLineOptionAntV(plot, container, chart, action) {
// theme
@ -90,6 +91,8 @@ export function baseLineOptionAntV(plot, container, chart, action) {
}
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -184,6 +187,8 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
}
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

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

@ -7,6 +7,7 @@ import {
} from '@/views/chart/chart/common/common_antv'
import { Pie, Rose } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function basePieOptionAntV(plot, container, chart, action) {
// theme
@ -84,6 +85,8 @@ export function basePieOptionAntV(plot, container, chart, action) {
options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
@ -165,6 +168,8 @@ export function basePieRoseOptionAntV(plot, container, chart, action) {
options.innerRadius = parseFloat(parseInt(s.pieInnerRadius) / 100)
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

4
frontend/src/views/chart/chart/radar/radar_antv.js
View File

@ -1,5 +1,6 @@
import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
import { Radar } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseRadarOptionAntV(plot, container, chart, action) {
// theme
@ -132,6 +133,9 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
options.xAxis = xAxis
options.yAxis = yAxis
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
plot.destroy()

3
frontend/src/views/chart/chart/scatter/scatter_antv.js
View File

@ -11,6 +11,7 @@ import {
} from '@/views/chart/chart/common/common_antv'
import { Scatter } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseScatterOptionAntV(plot, container, chart, action) {
// theme
@ -86,6 +87,8 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
options.shape = s.scatterSymbol
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {

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

@ -397,7 +397,7 @@ export const TYPE_CONFIGS = [
'color-selector',
'size-selector',
'label-selector',
'title-selector',
'title-selector'
]
},
@ -665,3 +665,124 @@ export function customSort(custom, data) {
return joinArr.concat(subArr)
}
export function customColor(custom, res, colors) {
const result = []
for (let i = 0; i < res.length; i++) {
const r = res[i]
let flag = false
for (let j = 0; j < custom.length; j++) {
const c = custom[j]
if (r.name === c.name) {
flag = true
result.push(c)
}
}
if (!flag) {
result.push(r)
}
}
return result
}
export function getColors(chart, colors, reset) {
// 自定义颜色，先按照没有设定的情况，并排好序，当做最终结果
let seriesColors = []
let series
if (chart.type.includes('stack')) {
if (chart.data) {
const data = chart.data.datas
const stackData = []
for (let i = 0; i < data.length; i++) {
const s = data[i]
stackData.push(s.category)
}
const sArr = stackData.filter(function(item, index, stackData) {
return stackData.indexOf(item, 0) === index
})
for (let i = 0; i < sArr.length; i++) {
const s = sArr[i]
seriesColors.push({
name: s,
color: colors[i % colors.length],
isCustom: false
})
}
}
} else if (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('scatter') || chart.type.includes('radar')) {
if (Object.prototype.toString.call(chart.yaxis) === '[object Array]') {
series = JSON.parse(JSON.stringify(chart.yaxis))
} else {
series = JSON.parse(chart.yaxis)
}
for (let i = 0; i < series.length; i++) {
const s = series[i]
seriesColors.push({
name: s.name,
color: colors[i % colors.length],
isCustom: false
})
}
} else {
if (chart.data) {
const data = chart.data.datas
// data 的维度值，需要根据自定义顺序排序
// let customSortData
// if (Object.prototype.toString.call(chart.customSort) === '[object Array]') {
// customSortData = JSON.parse(JSON.stringify(chart.customSort))
// } else {
// customSortData = JSON.parse(chart.customSort)
// }
// if (customSortData && customSortData.length > 0) {
// data = customSort(customSortData, data)
// }
for (let i = 0; i < data.length; i++) {
const s = data[i]
seriesColors.push({
name: s.field,
color: colors[i % colors.length],
isCustom: false
})
}
}
}
// 如果有自定义，则与上述中的结果合并。
// res，custom，以custom为准，去掉res中不存在的，并将custom中name一样的color赋值给res，不存在的name，即新增值，使用i % colors.length，从配色方案中选
if (!reset) {
let sc = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors
} else {
sc = JSON.parse(chart.customAttr).color.seriesColors
}
if (sc && sc.length > 0) {
seriesColors = customColor(sc, seriesColors)
}
// 根据isCustom字段，修正color
for (let i = 0; i < seriesColors.length; i++) {
if (!seriesColors[i].isCustom) {
seriesColors[i].color = colors[i % colors.length]
}
}
}
return seriesColors
}
export function antVCustomColor(chart) {
const colors = []
if (chart.customAttr) {
const customAttr = JSON.parse(chart.customAttr)
// color
if (customAttr.color) {
const c = JSON.parse(JSON.stringify(customAttr.color))
const customColors = getColors(chart, c.colors, false)
for (let i = 0; i < customColors.length; i++) {
colors.push(hexColorToRGBA(customColors[i].color, c.alpha))
}
}
}
return colors
}