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

Merge pull request #10636 from dataease/pr@dev-v2@chart-symbolic-map-style-fix

Browse Source 
fix(图表-符号地图): 符号地图适配大屏主题颜色
This commit is contained in:
jianneng-fit2cloud 2024-07-01 10:45:44 +08:00 committed by GitHub
commit c54d567a39
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue
View File

@ -370,7 +370,7 @@ onMounted(() => {
/>
</el-select>
</el-form-item>
<el-form-item v-if="showProperty('customContent')" class="form-item">
<el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
<template #label>
<span class="data-area-label">
<span>
@ -389,6 +389,7 @@ onMounted(() => {
<el-input
style="font-size: smaller; font-weight: normal"
v-model="state.labelForm.customContent"
:effect="themes"
type="textarea"
:autosize="{ minRows: 4, maxRows: 4 }"
:placeholder="defaultPlaceholder"

5
core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue
View File

@ -401,7 +401,6 @@ onMounted(() => {
label-position="top"
>
<el-form-item
v-if="props.chart.type !== 'symbolic-map'"
:label="t('chart.background') + t('chart.color')"
class="form-item"
:class="'form-item-' + themes"
@ -479,7 +478,7 @@ onMounted(() => {
/>
</el-select>
</el-form-item>
<el-form-item v-if="showProperty('customContent')" class="form-item">
<el-form-item v-if="showProperty('customContent')" :class="'form-item-' + themes">
<template #label>
<span class="data-area-label">
<span>
@ -497,6 +496,7 @@ onMounted(() => {
</template>
<el-input
style="font-size: smaller; font-weight: normal"
:effect="themes"
v-model="state.tooltipForm.customContent"
type="textarea"
:autosize="{ minRows: 4, maxRows: 4 }"
@ -811,6 +811,7 @@ onMounted(() => {
border-right: unset;
}
}
.series-select-option {
display: flex;
align-items: center;

29
core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
View File

@ -33,7 +33,14 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
...MAP_EDITOR_PROPERTY_INNER,
'basic-style-selector': ['colors', 'alpha', 'mapBaseStyle', 'symbolicMapStyle', 'zoom'],
'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
'tooltip-selector': ['color', 'fontSize', 'showFields', 'customContent', 'show']
'tooltip-selector': [
'color',
'fontSize',
'showFields',
'customContent',
'show',
'backgroundColor'
]
}
axis: AxisType[] = ['xAxis', 'xAxisExt', 'extBubble', 'filter', 'extLabel', 'extTooltip']
axisConfig: AxisConfig = {
@ -91,7 +98,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
const configList: L7Config[] = []
const symbolicLayer = this.buildSymbolicLayer(chart, basicStyle)
configList.push(symbolicLayer)
const tooltipLayer = this.buildTooltip(chart, symbolicLayer)
const tooltipLayer = this.buildTooltip(chart, container, symbolicLayer)
if (tooltipLayer) {
scene.addPopup(tooltipLayer)
}
@ -233,7 +240,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
* @param chart
* @param pointLayer
*/
buildTooltip = (chart, pointLayer) => {
buildTooltip = (chart, container, pointLayer) => {
const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null
if (customAttr?.tooltip?.show) {
const { tooltip } = deepCopy(customAttr)
@ -244,9 +251,19 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
...chart.xAxis.map(i => `${i.dataeaseName}@${i.name}`)
]
}
// 修改背景色
const style = document.createElement('style')
style.innerHTML = `
#${container} .l7-popup-content {
background-color: ${tooltip.backgroundColor} !important;
}
#${container} .l7-popup-tip {
border-top-color: ${tooltip.backgroundColor} !important;
}
`
document.head.appendChild(style)
const htmlPrefix = `<div style='font-size:${tooltip.fontSize}px;color:${tooltip.color}'>`
const htmlSuffix = '</div>'
return new LayerPopup({
items: [
{
@ -360,7 +377,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
setupDefaultOptions(chart: ChartObj): ChartObj {
chart.customAttr.label = {
...chart.customAttr.label,
show: true
show: false
}
chart.customAttr.basicStyle = {
...chart.customAttr.basicStyle,
@ -371,6 +388,6 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
}
protected setupOptions(chart: Chart, config: L7Config): L7Config {
return flow(this.configEmptyDataStrategy, this.configTooltip, this.configLabel)(chart, config)
return flow(this.configEmptyDataStrategy, this.configLabel)(chart, config)
}
}