{{
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue
index 029b7d1f90..3211947e01 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue
@@ -2,7 +2,7 @@
import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
-import { PropType, reactive } from 'vue'
+import { computed, PropType, reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
import { fieldType } from '@/utils/attr'
@@ -34,30 +34,84 @@ const thresholdCondition = {
max: '1',
type: 'fixed'
}
-const valueOptions = [
- {
- label: '',
- options: [
+const valueOptions = computed(() => {
+ if (props.chart.type === 'symbolic-map') {
+ return [
{
- value: 'lt',
- label: t('chart.filter_lt')
+ label: '',
+ options: [
+ {
+ value: 'eq',
+ label: t('chart.filter_eq')
+ },
+ {
+ value: 'not_eq',
+ label: t('chart.filter_not_eq')
+ }
+ ]
},
{
- value: 'gt',
- label: t('chart.filter_gt')
- }
- ]
- },
- {
- label: '',
- options: [
+ label: '',
+ options: [
+ {
+ value: 'lt',
+ label: t('chart.filter_lt')
+ },
+ {
+ value: 'gt',
+ label: t('chart.filter_gt')
+ }
+ ]
+ },
{
- value: 'between',
- label: t('chart.filter_between')
+ label: '',
+ options: [
+ {
+ value: 'le',
+ label: t('chart.filter_le')
+ },
+ {
+ value: 'ge',
+ label: t('chart.filter_ge')
+ }
+ ]
+ },
+ {
+ label: '',
+ options: [
+ {
+ value: 'between',
+ label: t('chart.filter_between')
+ }
+ ]
}
]
}
-]
+ return [
+ {
+ label: '',
+ options: [
+ {
+ value: 'lt',
+ label: t('chart.filter_lt')
+ },
+ {
+ value: 'gt',
+ label: t('chart.filter_gt')
+ }
+ ]
+ },
+ {
+ label: '',
+ options: [
+ {
+ value: 'between',
+ label: t('chart.filter_between')
+ }
+ ]
+ }
+ ]
+})
const predefineColors = COLOR_PANEL
const state = reactive({
@@ -76,21 +130,32 @@ const init = () => {
}
const initOptions = (item, fieldObj) => {
if (fieldObj) {
- item.options = JSON.parse(JSON.stringify(valueOptions))
+ item.options = JSON.parse(JSON.stringify(valueOptions.value))
item.conditions &&
item.conditions.forEach(ele => {
ele.term = ''
})
}
}
+
+const isSymbolicMap = computed(() => {
+ return props.chart.type === 'symbolic-map'
+})
+
const initFields = () => {
let fields = []
- const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
- fields = [...yAxis]
+ if (isSymbolicMap.value) {
+ const extBubble = JSON.parse(JSON.stringify(props.chart.extBubble))
+ fields = [...extBubble]
+ } else {
+ const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+ fields = [...yAxis]
+ }
state.fields.splice(0, state.fields.length, ...fields)
// 字段不存在时
let change = false
state.thresholdArr.forEach(item => {
+ item.options = JSON.parse(JSON.stringify(valueOptions.value))
const fieldItemObj = state.fields.filter(ele => ele.id === item.fieldId)
if (fieldItemObj.length === 0) {
change = true
@@ -327,7 +392,10 @@ init()
-
+
{
'symbolic-style-selector',
'title-selector',
'label-selector',
- 'tooltip-selector'
+ 'tooltip-selector',
+ 'threshold'
]
propertyInner: EditorPropertyInner = {
...MAP_EDITOR_PROPERTY_INNER,
@@ -52,7 +59,8 @@ export class SymbolicMap extends L7ChartView {
'show',
'backgroundColor',
'carousel'
- ]
+ ],
+ threshold: ['lineThreshold']
}
axis: AxisType[] = ['xAxis', 'xAxisExt', 'extBubble', 'filter', 'extLabel', 'extTooltip']
axisConfig: AxisConfig = {
@@ -228,8 +236,18 @@ export class SymbolicMap extends L7ChartView {
// 存储已分配的颜色
const colorAssignments = new Map()
const sizeKey = extBubble.length > 0 ? extBubble[0].dataeaseName : ''
+
+ //todo 条件颜色
+ const { threshold } = parseJson(chart.senior)
+ let conditions = []
+ if (threshold.enable) {
+ conditions = threshold.lineThreshold ?? []
+ }
+ const extBubbleIds = chart.extBubble.map(i => i.id)
+ conditions = filter(conditions, c => extBubbleIds.includes(c.fieldId))
+
const data = chart.data?.tableRow
- ? chart.data.tableRow.map(item => {
+ ? chart.data.tableRow.map((item, index) => {
// 颜色标识
const identifier = item[xAxisExt[0]?.dataeaseName]
// 检查该标识是否已有颜色分配，如果没有则分配
@@ -239,6 +257,57 @@ export class SymbolicMap extends L7ChartView {
// 记录分配的颜色
colorAssignments.set(identifier, color)
}
+ if (conditions.length > 0) {
+ for (let i = 0; i < conditions.length; i++) {
+ const c = conditions[i]
+ const value = item[c.field.dataeaseName]
+ for (const t of c.conditions) {
+ const v = t.value
+
+ //保存一下颜色到map
+ const _color = getColorFormAlphaColor(t.color)
+
+ if (t.term === 'between') {
+ const start = parseFloat(t.min)
+ const end = parseFloat(t.max)
+ if (start <= value && value <= end) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('lt' === t.term) {
+ if (value < v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('le' === t.term) {
+ if (value <= v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('gt' === t.term) {
+ if (value > v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('ge' === t.term) {
+ if (value >= v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('eq' === t.term) {
+ if (value === v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ } else if ('not_eq' === t.term) {
+ if (value !== v) {
+ color = t.color
+ colorsWithAlpha[index] = hexColorToRGBA(_color, alpha)
+ }
+ }
+ }
+ }
+ }
return {
...item,
color,
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 97b6bfe098..9dfc5730ce 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -1373,7 +1373,8 @@ export const TOOLTIP_TPL =
export function getConditions(chart: Chart) {
const { threshold } = parseJson(chart.senior)
const annotations = []
- if (!threshold.enable || chart.type === 'area-stack') return annotations
+ if (!threshold.enable || chart.type === 'area-stack' || chart.type === 'symbolic-map')
+ return annotations
const conditions = threshold.lineThreshold ?? []
const yAxisIds = chart.yAxis.map(i => i.id)
for (const field of conditions) {
diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts
index 7096a52a3b..3f7f443833 100644
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@@ -999,6 +999,19 @@ export function isAlphaColor(color: string): boolean {
return false
}
+export function getColorFormAlphaColor(color: string): string {
+ if (isAlphaColor(color)) {
+ if (color.startsWith('#')) {
+ return color.slice(0, 7)
+ }
+ if (color.startsWith('rgb') || color.startsWith('RGB')) {
+ const list = color.split(',')
+ return list[0] + ',' + list[1] + ',' + list[2] + ')'
+ }
+ }
+ return color
+}
+
export function isTransparent(color: string): boolean {
if (!color?.trim()) {
return true