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

fix(视图-地图): 手柄文字颜色没有跟随仪表板背景变化

Browse Source
This commit is contained in:
fit2cloud-chenyw 2022-10-06 15:53:30 +08:00
parent 168227b184
commit f735110794
2 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/views/chart/chart/map/map.js
View File

@ -1,5 +1,5 @@
// import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, reverseColor } from '../common/common'
import { componentStyle } from '../common/common'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
@ -81,10 +81,9 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
chart_option.visualMap.inRange.color = customAttr.color.colors
chart_option.visualMap.inRange.colorAlpha = customAttr.color.alpha / 100
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
const reverseValue = reverseColor(panelColor)
chart_option.visualMap.textStyle = { color: reverseValue }
if (themeStyle) {
chart_option.visualMap.textStyle = { color: themeStyle }
}
for (let i = 0; i < valueArr.length; i++) {
const y = valueArr[i]

50
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -82,6 +82,7 @@ import {
} from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import { reverseColor } from '../chart/common/common'
import { mapState } from 'vuex'
export default {
name: 'ChartComponent',
components: {
@ -148,7 +149,10 @@ export default {
computed: {
trackBarStyleTime() {
return this.trackBarStyle
}
},
...mapState([
'canvasStyleData'
])
},
watch: {
chart: {
@ -165,7 +169,7 @@ export default {
this.preDraw()
}
},
'themeStyle.commonBackground.color'(value, old) {
'themeStyle.backgroundColorSelect'(value, old) {
if (value !== old) {
this.preDraw()
}
@ -230,15 +234,7 @@ export default {
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.commonBackground) {
const viewBGColor = themeStyle.commonBackground.color
if (viewBGColor !== '#FFFFFF') {
const reverseValue = reverseColor(viewBGColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {
@ -247,6 +243,16 @@ export default {
} else {
this.buttonTextColor = null
}
} else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
const panelColor = this.canvasStyleData.panel.color
if (panelColor !== '#FFFFFF') {
const reverseValue = reverseColor(panelColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
} else {
this.buttonTextColor = null
}
}
},
@ -329,15 +335,7 @@ export default {
let themeStyle = null
if (this.themeStyle) {
themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
if (themeStyle && themeStyle.commonBackground) {
const viewBGColor = themeStyle.commonBackground.color
if (viewBGColor !== '#FFFFFF') {
const reverseValue = reverseColor(viewBGColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
}
if (themeStyle && themeStyle.backgroundColorSelect) {
const panelColor = themeStyle.color
if (panelColor !== '#FFFFFF') {
@ -346,9 +344,19 @@ export default {
} else {
this.buttonTextColor = null
}
} else if(this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
const panelColor = this.canvasStyleData.panel.color
if (panelColor !== '#FFFFFF') {
const reverseValue = reverseColor(panelColor)
this.buttonTextColor = reverseValue
} else {
this.buttonTextColor = null
}
} else {
this.buttonTextColor = null
}
}
const chart_option = baseMapOption(base_json, chart, themeStyle, curAreaCode)
const chart_option = baseMapOption(base_json, chart, this.buttonTextColor, curAreaCode)
this.myEcharts(chart_option)
const opt = this.myChart.getOption()
if (opt && opt.series) {