diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index d4b03bd09f..f9c6b6bbbe 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -218,6 +218,7 @@ onMounted(() => {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index 1dad50e0e4..3e49631681 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -3,6 +3,9 @@ import { ElColorPicker, ElPopover } from 'element-plus-secondary'
import { computed, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_CASES, COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
+import GradientColorSelector from '@/views/chart/components/editor/editor-style/components/GradientColorSelector.vue'
+import { getMapColorCases, stepsColor } from '@/views/chart/components/js/util'
+
const { t } = useI18n()
const props = withDefaults(
@@ -13,6 +16,7 @@ const props = withDefaults(
customColor: any
colorIndex: number
}
+ propertyInner: Array
}>(),
{
themes: 'light'
@@ -41,30 +45,48 @@ const customColorPickerRef = ref>()
function selectColorCase(option) {
state.value.basicStyleForm.colorScheme = option.value
colorCaseSelectorRef.value?.hide()
- changeColorOption()
-}
-const changeColorOption = () => {
- const items = colorCases.filter(ele => {
- return ele.value === state.value.basicStyleForm.colorScheme
- })
- state.value.basicStyleForm.colors = [...items[0].colors]
-
- state.value.customColor = state.value.basicStyleForm.colors[0]
- state.value.colorIndex = 0
-
- changeBasicStyle()
+ changeColorOption(option)
}
+const changeColorOption = (option?) => {
+ let isGradient = option?.value?.endsWith('_split_gradient') || isColorGradient.value
+ const getColorItems = isGradient ? getMapColorCases(colorCases) : colorCases
+ const items = getColorItems.filter(ele => ele.value === state.value.basicStyleForm.colorScheme)
+
+ if (items.length > 0) {
+ state.value.basicStyleForm.colors = [...items[0].colors]
+ state.value.customColor = state.value.basicStyleForm.colors[0]
+ state.value.colorIndex = 0
+ changeBasicStyle()
+ }
+}
const resetCustomColor = () => {
changeColorOption()
}
const switchColorCase = () => {
- state.value.basicStyleForm.colors[state.value.colorIndex] = state.value.customColor
+ const { colorIndex, customColor, basicStyleForm } = state.value
+ const colors = basicStyleForm.colors
+
+ if (isColorGradient.value) {
+ let startColor = colorIndex === 0 ? customColor : colors[0]
+ let endColor = colorIndex === 0 ? colors[8] : customColor
+ basicStyleForm.colors = stepsColor(startColor, endColor, 9, 1)
+ } else {
+ colors[colorIndex] = customColor
+ }
changeBasicStyle()
}
-
+const isColorGradient = computed(() =>
+ state.value.basicStyleForm.colorScheme.endsWith('_split_gradient')
+)
+const showColorGradientIndex = index => {
+ return index === 0 || index === state.value.basicStyleForm.colors.length - 1
+}
const switchColor = (index, c) => {
+ if (isColorGradient.value && !showColorGradientIndex(index)) {
+ return
+ }
state.value.colorIndex = index
state.value.customColor = c
customColorPickerRef.value?.show()
@@ -81,6 +103,21 @@ function onPopoverShow() {
function onPopoverHide() {
_popoverShow.value = false
}
+const showProperty = prop => props.propertyInner?.includes(prop)
+const colorItemBorderColor = (index, state) => {
+ const isCurrentColorActive = state.colorIndex === index
+ if (isColorGradient.value) {
+ if (showColorGradientIndex(index)) {
+ // 渐变色的第一个和最后一个颜色
+ return isCurrentColorActive ? 'var(--ed-color-primary)' : 'rgb(230,230,230)'
+ } else {
+ // 渐变色中非边缘的颜色
+ return 'rgb(230,230,230,0.01)'
+ }
+ }
+ // 非渐变色情况
+ return isCurrentColorActive ? 'var(--ed-color-primary)' : ''
+}
@@ -90,6 +127,20 @@ function onPopoverHide() {
>
+
+
+
+ >
+
+
+
+
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { COLOR_PANEL, COLOR_CASES } from '@/views/chart/components/editor/util/chart'
+import { ElPopover } from 'element-plus-secondary'
+import { getMapColorCases } from '@/views/chart/components/js/util'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+ defineProps<{
+ themes?: EditorTheme
+ modelValue: {
+ basicStyleForm: ChartBasicStyle
+ customColor: any
+ colorIndex: number
+ }
+ propertyInner: Array
+ }>(),
+ {
+ themes: 'light'
+ }
+)
+const colorCases = JSON.parse(JSON.stringify(COLOR_CASES))
+const predefineColors = JSON.parse(JSON.stringify(COLOR_PANEL))
+
+const emits = defineEmits(['update:modelValue', 'selectColorCase'])
+const state = computed({
+ get() {
+ return props.modelValue
+ },
+ set(v) {
+ emits('update:modelValue', v)
+ }
+})
+
+const form = reactive({
+ value: null,
+ activeName: 'simple',
+ enableCustom: false,
+ tabPanes: [
+ {
+ label: t('chart.page_pager_general'),
+ name: 'simple',
+ data: JSON.parse(JSON.stringify(colorCases))
+ },
+ {
+ label: t('chart.gradient'),
+ name: 'split_gradient',
+ data: JSON.parse(JSON.stringify(getMapColorCases(colorCases)))
+ }
+ ]
+})
+const scrollToSelected = () => {
+ const index = form.activeName === 'simple' ? 0 : 1
+ const parents = document.getElementById('color-tab-content-' + index)
+ if (!parents) return
+ const items = parents.getElementsByClassName('color-div-base selected')
+ if (items && items.length) {
+ const top = items[0].offsetTop || 0
+ parents.scrollTo(0, top)
+ }
+}
+
+const handleClick = () => {
+ form.enableCustom = false
+ nextTick(() => {
+ scrollToSelected()
+ })
+ const widget = ref['de-color-picker']
+ if (!widget) return
+ if (Array.isArray(widget)) {
+ widget.forEach(item => {
+ item.triggerHide && item.triggerHide()
+ })
+ return
+ }
+ widget.triggerHide && widget.triggerHide()
+}
+
+const selectNode = option => {
+ state.value.basicStyleForm.colors = option.colors
+ state.value.basicStyleForm.colorScheme = option.value
+ emits('selectColorCase', option)
+}
+
+const colorCaseSelectorRef = ref>()
+
+const _popoverShow = ref(false)
+function onPopoverShow() {
+ _popoverShow.value = true
+}
+function onPopoverHide() {
+ _popoverShow.value = false
+}
+onMounted(() => {
+ form.activeName = state.value.basicStyleForm.colorScheme.endsWith('_split_gradient')
+ ? 'split_gradient'
+ : 'simple'
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
index 53093d01ba..8b8126763a 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts
@@ -33,6 +33,7 @@ export class Map extends L7PlotChartView {
properties: EditorProperty[] = [...MAP_EDITOR_PROPERTY, 'legend-selector']
propertyInner: EditorPropertyInner = {
...MAP_EDITOR_PROPERTY_INNER,
+ 'basic-style-selector': ['colors', 'alpha', 'areaBorderColor', 'zoom', 'gradient-color'],
'legend-selector': ['icon', 'fontSize', 'color']
}
axis = MAP_AXIS_TYPE
@@ -177,6 +178,7 @@ export class Map extends L7PlotChartView {
const colors = basicStyle.colors.map(item => hexColorToRGBA(item, basicStyle.alpha))
const { legend } = parseJson(chart.customStyle)
let data = []
+ data = sourceData
let colorScale = []
if (legend.show) {
let minValue = misc.mapLegendMin
@@ -196,7 +198,6 @@ export class Map extends L7PlotChartView {
// 定义最大值、最小值、区间数量和对应的颜色
colorScale = getDynamicColorScale(minValue, maxValue, mapLegendNumber, colors)
} else {
- data = sourceData
colorScale = colors
}
const areaMap = data.reduce((obj, value) => {
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 6100f516e1..f63422c944 100644
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@@ -592,3 +592,59 @@ export const setMapChartDefaultMaxAndMinValueByData = (
callback(maxResult, minResult)
}
}
+
+export const stepsColor = (start, end, steps, gamma) => {
+ let i
+ let j
+ let ms
+ let me
+ const output = []
+ const so = []
+ gamma = gamma || 1
+ const normalize = function (channel) {
+ return Math.pow(channel / 255, gamma)
+ }
+ start = parseColor(start).map(normalize)
+ end = parseColor(end).map(normalize)
+ for (i = 0; i < steps; i++) {
+ ms = steps - 1 === 0 ? 0 : i / (steps - 1)
+ me = 1 - ms
+ for (j = 0; j < 3; j++) {
+ so[j] = pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16))
+ }
+ output.push('#' + so.join(''))
+ }
+ function parseColor(hexStr) {
+ return hexStr.length === 4
+ ? hexStr
+ .substr(1)
+ .split('')
+ .map(function (s) {
+ return 0x11 * parseInt(s, 16)
+ })
+ : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {
+ return parseInt(s, 16)
+ })
+ }
+ function pad(s) {
+ return s.length === 1 ? '0' + s : s
+ }
+ return output
+}
+
+export const getMapColorCases = colorCases => {
+ const cloneColorCases = JSON.parse(JSON.stringify(colorCases))
+ return cloneColorCases.map(colorItem => {
+ const curColors = colorItem.colors
+ const len = curColors.length
+ const start = curColors[0]
+ const end = curColors[len - 1]
+ const itemResult = {
+ name: colorItem.name,
+ value: colorItem.value + '_split_gradient',
+ baseColors: [start, end],
+ colors: stepsColor(start, end, 9, 1)
+ }
+ return itemResult
+ })
+}