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

Merge pull request #10156 from ulleo/area-color

Browse Source 
feat(图表): 折线图渐变色显示效果优化
This commit is contained in:
ulleo 2024-06-06 18:11:42 +08:00 committed by GitHub
commit 58a70085e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts
View File

@ -178,8 +178,12 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
let areaStyle
if (customAttr.basicStyle.gradient) {
const colorMap = new Map()
const yAxis = parseJson(chart.customStyle).yAxis
const axisValue = yAxis.axisValue
const start =
!axisValue?.auto && axisValue.min && axisValue.max ? axisValue.min / axisValue.max : 0
areaStyle = item => {
let ele
let ele: string
const key = `${item.field}-${item.category}`
if (colorMap.has(key)) {
ele = colorMap.get(key)
@ -189,9 +193,12 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
}
if (ele) {
return {
fill: setGradientColor(hexColorToRGBA(ele, alpha), true, 270)
fill: setGradientColor(hexColorToRGBA(ele, alpha), true, 270, start)
}
}
return {
fill: 'rgba(255,255,255,0)'
}
}
}
return {

13
core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
View File

@ -800,11 +800,20 @@ export function getLineDash(type) {
* @param rawColor 原始 RGBA 颜色
* @param show
* @param angle 渐变角度
* @param start 起始值
*/
export function setGradientColor(rawColor: string, show = false, angle = 0) {
export function setGradientColor(rawColor: string, show = false, angle = 0, start = 0) {
const item = rawColor.split(',')
item.splice(3, 1, '0.3)')
return show ? `l(${angle}) 0:${item.join(',')} 1:${rawColor}` : rawColor
let color: string
if (start == 0) {
color = `l(${angle}) 0:${item.join(',')} 1:${rawColor}`
} else if (start > 0) {
color = `l(${angle}) 0:rgba(255,255,255,0) ${start}:${item.join(',')} 1:${rawColor}`
} else {
color = `l(${angle}) 0:rgba(255,255,255,0) 0.1:${item.join(',')} 1:${rawColor}`
}
return show ? color : rawColor
}
export function transAxisPosition(position: string): string {