import {
|
L7PlotChartView,
|
L7PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/l7plot'
|
import type { Choropleth, ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
|
import {
|
filterChartDataByRange,
|
filterEmptyMinValue,
|
flow,
|
getDynamicColorScale,
|
getGeoJsonFile,
|
getMaxAndMinValueByData,
|
hexColorToRGBA,
|
parseJson
|
} from '@/views/chart/components/js/util'
|
import {
|
handleGeoJson,
|
mapRendered,
|
mapRendering
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
import type { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
|
import { cloneDeep, defaultsDeep, isEmpty } from 'lodash-es'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { valueFormatter } from '../../../formatter'
|
import {
|
MAP_AXIS_TYPE,
|
MAP_EDITOR_PROPERTY,
|
MAP_EDITOR_PROPERTY_INNER,
|
MapMouseEvent
|
} from '@/views/chart/components/js/panel/charts/map/common'
|
import type { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
|
import createDom from '@antv/dom-util/esm/create-dom'
|
import {
|
CONTAINER_TPL,
|
ITEM_TPL,
|
LIST_CLASS
|
} from '@antv/l7plot-component/dist/esm/legend/category/constants'
|
import substitute from '@antv/util/esm/substitute'
|
import { configCarouselTooltip } from '@/views/chart/components/js/panel/charts/map/tooltip-carousel'
|
import { getCustomGeoArea } from '@/api/map'
|
import { centroid } from '@turf/centroid'
|
import { TextLayer } from '@antv/l7plot/dist/esm'
|
|
const { t } = useI18n()
|
|
/**
|
* 地图
|
*/
|
export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
properties: EditorProperty[] = [...MAP_EDITOR_PROPERTY, 'legend-selector']
|
propertyInner: EditorPropertyInner = {
|
...MAP_EDITOR_PROPERTY_INNER,
|
'basic-style-selector': [
|
'colors',
|
'alpha',
|
'areaBorderColor',
|
'areaBaseColor',
|
'zoom',
|
'gradient-color'
|
],
|
'legend-selector': ['icon', 'fontSize', 'color'],
|
'tooltip-selector': [...MAP_EDITOR_PROPERTY_INNER['tooltip-selector'], 'carousel']
|
}
|
axis = MAP_AXIS_TYPE
|
axisConfig: AxisConfig = {
|
xAxis: {
|
name: `${t('chart.area')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1
|
},
|
yAxis: {
|
name: `${t('chart.chart_data')} / ${t('chart.quota')}`,
|
type: 'q',
|
limit: 1
|
}
|
}
|
|
constructor() {
|
super('map', [])
|
}
|
|
async drawChart(drawOption: L7PlotDrawOptions<Choropleth>): Promise<Choropleth> {
|
const { chart, level, container, action, scope } = drawOption
|
const { areaId, gadmName } = drawOption
|
if (!areaId) {
|
return
|
}
|
chart.container = container
|
let sourceData = JSON.parse(JSON.stringify(chart.data?.data || []))
|
const { misc } = parseJson(chart.customAttr)
|
const { legend } = parseJson(chart.customStyle)
|
let geoJson = {} as FeatureCollection
|
// 自定义区域，去除非区域数据，优先级最高
|
let customSubArea: CustomGeoSubArea[] = []
|
if (areaId.startsWith('custom_')) {
|
customSubArea = (await getCustomGeoArea(areaId)).data || []
|
geoJson = cloneDeep(await getGeoJsonFile('156'))
|
const areaNameMap = geoJson.features.reduce((p, n) => {
|
p['156' + n.properties.adcode] = n.properties.name
|
return p
|
}, {})
|
const { areaMapping } = parseJson(chart.senior)
|
const areaMap = customSubArea.reduce((p, n) => {
|
const mappedName = areaMapping?.[areaId]?.[n.name]
|
if (mappedName) {
|
n.name = mappedName
|
}
|
p[n.name] = n
|
n.scopeArr = n.scope?.split(',') || []
|
return p
|
}, {})
|
const fakeData = []
|
sourceData.forEach(d => {
|
const area = areaMap[d.name]
|
if (area) {
|
area.scopeArr.forEach(adcode => {
|
fakeData.push({
|
...d,
|
name: areaNameMap[adcode],
|
field: areaNameMap[adcode],
|
scope: area.scopeArr,
|
areaName: d.name
|
})
|
})
|
}
|
})
|
sourceData = fakeData
|
} else {
|
if (scope) {
|
geoJson = cloneDeep(await getGeoJsonFile('156'))
|
geoJson.features = geoJson.features.filter(f => scope.includes('156' + f.properties.adcode))
|
} else {
|
geoJson = cloneDeep(await getGeoJsonFile(areaId))
|
}
|
}
|
if (areaId.startsWith('geo_') && geoJson?.features?.length) {
|
const levelNames = Object.keys(geoJson?.features[0]?.properties).filter(key =>
|
key.startsWith('NAME_')
|
)
|
const nameKey = levelNames[levelNames.length - 1]
|
geoJson.features.forEach(item => {
|
if (item.properties[nameKey]) {
|
item.properties['name'] = item.properties[nameKey]
|
}
|
})
|
if (areaId.length > 7) {
|
geoJson.features = geoJson.features.filter(f => {
|
const names = Object.keys(f.properties)
|
.filter(key => key.startsWith('NAME_'))
|
.map(key => f.properties[key])
|
.filter(Boolean)
|
.join('@')
|
if (isEmpty(names) || !gadmName) {
|
return true
|
}
|
return names.replace(/@[^@]*$/, '') === gadmName
|
})
|
}
|
}
|
let data = []
|
// 自定义图例
|
if (!misc.mapAutoLegend && legend.show) {
|
let minValue = misc.mapLegendMin
|
let maxValue = misc.mapLegendMax
|
let legendNumber = 9
|
if (misc.mapLegendRangeType === 'custom') {
|
maxValue = 0
|
minValue = 0
|
legendNumber = misc.mapLegendNumber
|
}
|
getMaxAndMinValueByData(sourceData, 'value', maxValue, minValue, (max, min) => {
|
maxValue = max
|
minValue = min
|
action({
|
from: 'map',
|
data: {
|
max: maxValue,
|
min: minValue ?? filterEmptyMinValue(sourceData, 'value'),
|
legendNumber: legendNumber
|
}
|
})
|
})
|
data = filterChartDataByRange(sourceData, maxValue, minValue)
|
if (chart.drill) {
|
getMaxAndMinValueByData(sourceData, 'value', 0, 0, (max, min) => {
|
data = filterChartDataByRange(sourceData, max, min)
|
})
|
}
|
} else {
|
data = sourceData
|
}
|
let options: ChoroplethOptions = {
|
preserveDrawingBuffer: true,
|
map: {
|
type: 'mapbox',
|
style: 'blank'
|
},
|
geoArea: {
|
type: 'geojson'
|
},
|
source: {
|
data: data,
|
joinBy: {
|
sourceField: 'name',
|
geoField: 'name',
|
geoData: geoJson
|
}
|
},
|
viewLevel: {
|
level,
|
adcode: 'all'
|
},
|
autoFit: true,
|
chinaBorder: false,
|
color: {
|
field: 'value'
|
},
|
style: {
|
opacity: 1,
|
lineWidth: 0.6,
|
lineOpacity: 1
|
},
|
label: {
|
field: '_DE_LABEL_',
|
style: {
|
textAnchor: 'center'
|
}
|
},
|
state: {
|
active: { stroke: 'green', lineWidth: 1 }
|
},
|
tooltip: {},
|
// 禁用线上地图数据
|
customFetchGeoData: () => null
|
}
|
const context: Record<string, any> = { drawOption, geoJson, customSubArea }
|
options = this.setupOptions(chart, options, context)
|
const { Choropleth } = await import('@antv/l7plot/dist/esm/plots/choropleth')
|
const view = new Choropleth(container, options)
|
this.configZoomButton(chart, view)
|
mapRendering(container)
|
view.once('loaded', () => {
|
mapRendered(container)
|
const { layers } = context
|
if (layers) {
|
layers.forEach(l => {
|
view.addLayer(l)
|
})
|
}
|
view.scene.map['keyboard'].disable()
|
view.on('fillAreaLayer:click', (ev: MapMouseEvent) => {
|
const evData = ev.feature.properties
|
if (areaId.startsWith('custom_')) {
|
evData.name = evData.areaName
|
evData.adcode = '156'
|
}
|
let adcode = evData.adcode
|
let names = ''
|
if (adcode + '' !== '156' && !areaId.startsWith('156')) {
|
adcode = 'geo_' + adcode
|
names = Object.keys(evData)
|
.filter(key => key.startsWith('NAME_'))
|
.map(key => evData[key])
|
.filter(Boolean)
|
.join('@')
|
}
|
action({
|
x: ev.x,
|
y: ev.y,
|
data: {
|
data: evData,
|
extra: { adcode, scope: evData.scope, gadmName: names }
|
}
|
})
|
})
|
chart.container = container
|
configCarouselTooltip(chart, view, data, null, customSubArea, drawOption)
|
})
|
return view
|
}
|
|
private configBasicStyle(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
const { areaId }: L7PlotDrawOptions<any> = context.drawOption
|
const geoJson: FeatureCollection = context.geoJson
|
const { basicStyle, label, misc } = parseJson(chart.customAttr)
|
const senior = parseJson(chart.senior)
|
const curAreaNameMapping = senior.areaMapping?.[areaId]
|
handleGeoJson(geoJson, curAreaNameMapping)
|
options.color = {
|
field: 'value',
|
value: [basicStyle.colors[0]],
|
scale: {
|
type: 'quantize',
|
unknown: basicStyle.areaBaseColor
|
}
|
}
|
if (!chart.data?.data?.length || !geoJson?.features?.length) {
|
options.label && (options.label.field = 'name')
|
return options
|
}
|
const sourceData = options.source.data
|
const colors = basicStyle.colors.map(item => hexColorToRGBA(item, basicStyle.alpha))
|
const { legend } = parseJson(chart.customStyle)
|
let data = sourceData
|
let colorScale = []
|
let minValue = misc.mapAutoLegend ? 0 : misc.mapLegendMin
|
let maxValue = misc.mapAutoLegend ? 0 : misc.mapLegendMax
|
let mapLegendNumber = misc.mapLegendNumber
|
if (legend.show) {
|
getMaxAndMinValueByData(sourceData, 'value', maxValue, minValue, (max, min) => {
|
maxValue = max
|
minValue = min
|
mapLegendNumber = 9
|
})
|
// 非自动，过滤数据
|
if (!misc.mapAutoLegend) {
|
data = filterChartDataByRange(sourceData, maxValue, minValue)
|
} else {
|
mapLegendNumber = 9
|
}
|
mapLegendNumber = misc.mapAutoLegend
|
? this.calculateAutoLegendNumber(sourceData)
|
: mapLegendNumber
|
// 定义最大值、最小值、区间数量和对应的颜色
|
colorScale = getDynamicColorScale(minValue, maxValue, mapLegendNumber, colors)
|
} else {
|
colorScale = colors
|
}
|
const areaMap = data.reduce((obj, value) => {
|
obj[value['field']] = value.value
|
return obj
|
}, {})
|
geoJson.features.forEach(item => {
|
const name = item.properties['name']
|
// trick, maybe move to configLabel, here for perf
|
if (label.show) {
|
const content = []
|
if (label.showDimension) {
|
content.push(name)
|
}
|
if (label.showQuota) {
|
;(areaMap[name] || areaMap[name] === 0) &&
|
content.push(valueFormatter(areaMap[name], label.quotaLabelFormatter))
|
}
|
item.properties['_DE_LABEL_'] = content.join('\n\n')
|
}
|
})
|
if (colorScale.length) {
|
options.color['value'] = colorScale.map(item =>
|
item.color && item.value ? new ColorWrapper(item.color, item.value) : new ColorWrapper(item)
|
)
|
if (colorScale[0].value && !misc.mapAutoLegend) {
|
options.color['scale']['domain'] = [
|
minValue ?? filterEmptyMinValue(sourceData, 'value'),
|
maxValue
|
]
|
}
|
}
|
return options
|
}
|
|
/**
|
* 自动图例数量计算
|
* 根据数据的最大值、最小值和数据条数动态确定合适的图例数量
|
* @param data 源数据
|
*/
|
private calculateAutoLegendNumber(data: any[]): number {
|
if (!data || data.length === 0) {
|
return 1
|
}
|
// 提取有效数值
|
const values = data
|
.map(item => parseFloat(item.value))
|
.filter(v => !isNaN(v) && v !== null && v !== undefined)
|
if (values.length === 0) {
|
return 1
|
}
|
// 计算最大值和最小值
|
const maxValue = Math.max(...values)
|
const minValue = Math.min(...values)
|
// 如果所有数据都相同，只需要 1 个图例
|
if (maxValue === minValue) {
|
return 1
|
}
|
// 根据数据条数和值范围计算合适的图例数量
|
const dataCount = values.length
|
// 基础图例数量：根据数据量决定
|
let legendNumber: number
|
if (dataCount <= 5) {
|
// 数据很少，每个数据一个图例
|
legendNumber = dataCount
|
} else if (dataCount <= 9) {
|
// 数据适中，按数据量
|
legendNumber = dataCount
|
} else {
|
// 数据较多，根据值范围平均分配，最多 9 个
|
// 计算每个区间的跨度
|
legendNumber = Math.max(9, Math.ceil(Math.sqrt(dataCount)))
|
}
|
// 确保图例数量在 1-9 之间
|
return Math.max(1, Math.min(9, legendNumber))
|
}
|
|
// 内部函数 创建自定义图例的内容
|
private createLegendCustomContent = showItems => {
|
const containerDom = createDom(CONTAINER_TPL) as HTMLElement
|
const listDom = containerDom.getElementsByClassName(LIST_CLASS)[0] as HTMLElement
|
showItems.forEach(item => {
|
let value = '-'
|
if (item.value !== '') {
|
if (Array.isArray(item.value)) {
|
const arr = item.value.every(Number.isNaN) ? item.color.value || [] : item.value
|
value = arr
|
.map(v => (Number.isNaN(v) || String(v) === 'NaN' ? 'NaN' : parseFloat(v).toFixed(0)))
|
.join('-')
|
} else {
|
const tmp = item.value as string
|
value = Number.isNaN(tmp) || tmp === 'NaN' ? 'NaN' : parseFloat(tmp).toFixed(0)
|
}
|
}
|
if (value && value !== '') {
|
const substituteObj = { ...item, value }
|
|
const domStr = substitute(ITEM_TPL, substituteObj)
|
const itemDom = createDom(domStr)
|
// 给 legend 形状用的
|
itemDom.style.setProperty('--bgColor', item.color)
|
listDom.appendChild(itemDom)
|
}
|
})
|
return listDom
|
}
|
|
private customConfigLegend(chart: Chart, options: ChoroplethOptions): ChoroplethOptions {
|
const { basicStyle, misc } = parseJson(chart.customAttr)
|
const colors = basicStyle.colors.map(item => hexColorToRGBA(item, basicStyle.alpha))
|
if (basicStyle.suspension === false && basicStyle.showZoom === undefined) {
|
return options
|
}
|
const { legend } = parseJson(chart.customStyle)
|
if (!legend.show) {
|
return options
|
}
|
const LEGEND_SHAPE_STYLE_MAP = {
|
circle: {
|
borderRadius: '50%'
|
},
|
square: {},
|
triangle: {
|
border: 'unset',
|
borderLeft: '5px solid transparent',
|
borderRight: '5px solid transparent',
|
borderBottom: '10px solid var(--bgColor)',
|
background: 'unset'
|
},
|
diamond: {
|
transform: 'rotate(45deg)'
|
}
|
}
|
const customLegend = {
|
position: 'bottomleft',
|
domStyles: {
|
'l7plot-legend__category-value': {
|
fontSize: legend.fontSize + 'px',
|
color: legend.color,
|
'font-family': chart.fontFamily ? chart.fontFamily : undefined
|
},
|
'l7plot-legend__category-marker': {
|
...LEGEND_SHAPE_STYLE_MAP[legend.icon],
|
width: legend.size + 'px',
|
height: legend.size + 'px',
|
...(legend.icon === 'triangle'
|
? {
|
...LEGEND_SHAPE_STYLE_MAP[legend.icon]['triangle'],
|
borderLeft: `${legend.size / 2}px solid transparent`,
|
borderRight: `${legend.size / 2}px solid transparent`,
|
borderBottom: `${legend.size}px solid var(--bgColor)`
|
}
|
: { border: '0.01px solid #f4f4f4' }),
|
...(legend.icon === 'diamond'
|
? {
|
transform: 'rotate(45deg)',
|
marginBottom: `${legend.size / 4}px`
|
}
|
: {})
|
}
|
}
|
}
|
// 不是自动图例、自定义图例区间、不是下钻时
|
if (!misc.mapAutoLegend && misc.mapLegendRangeType === 'custom' && !chart.drill) {
|
// 获取图例区间数据
|
const items = []
|
// 区间数组
|
const ranges = misc.mapLegendCustomRange
|
.slice(0, -1)
|
.map((item, index) => [item, misc.mapLegendCustomRange[index + 1]])
|
ranges.forEach((range, index) => {
|
const tmpRange = [range[0], range[1]]
|
const colorIndex = index % colors.length
|
// 当区间第一个值小于最小值时，颜色取地图底色
|
const isLessThanMin = range[0] < ranges[0][0] && range[1] < ranges[0][0]
|
let rangeColor = colors[colorIndex]
|
if (isLessThanMin) {
|
rangeColor = basicStyle.areaBaseColor
|
}
|
items.push({
|
value: tmpRange,
|
color: rangeColor
|
})
|
})
|
customLegend['customContent'] = () => {
|
if (items?.length) {
|
return this.createLegendCustomContent(items)
|
}
|
return ''
|
}
|
options.color['value'] = ({ value }) => {
|
const item = items.find(item => value >= item.value[0] && value <= item.value[1])
|
return item ? item.color : basicStyle.areaBaseColor
|
}
|
options.color.scale.domain = [ranges[0][0], ranges[ranges.length - 1][1]]
|
} else {
|
customLegend['customContent'] = (_: string, items: CategoryLegendListItem[]) => {
|
// 去重逻辑
|
const uniqueItems = items.reduce(
|
(acc, item) => {
|
const valueKey = JSON.stringify(item.value)
|
if (!acc.seen.has(valueKey)) {
|
acc.seen.add(valueKey)
|
acc.result.push(item)
|
}
|
return acc
|
},
|
{ seen: new Set(), result: [] }
|
).result
|
// 限制最多显示 30 个元素
|
const showItems = uniqueItems.length > 30 ? uniqueItems.slice(0, 30) : uniqueItems
|
if (showItems?.length) {
|
if (showItems.length === 1) {
|
const domain = options.color.scale.domain
|
if (domain) {
|
showItems[0].value = domain?.slice(0, 2)
|
} else {
|
const firstValue = showItems[0].value?.[0]
|
const secondValue = showItems[0].value?.[1]
|
if (
|
firstValue !== undefined &&
|
secondValue !== undefined &&
|
!Number.isNaN(firstValue) &&
|
!Number.isNaN(secondValue)
|
) {
|
showItems[0].value = [firstValue, secondValue]
|
} else {
|
const v = firstValue ?? secondValue
|
showItems[0].value = [v, v]
|
}
|
}
|
}
|
return this.createLegendCustomContent(showItems)
|
}
|
return ''
|
}
|
}
|
// 下钻时按照数据值计算图例
|
if (chart.drill) {
|
getMaxAndMinValueByData(options.source.data, 'value', 0, 0, (max, min) => {
|
options.color.scale.domain = [min, max]
|
})
|
}
|
defaultsDeep(options, { legend: customLegend })
|
return options
|
}
|
|
protected configCustomArea(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
const { drawOption, customSubArea, geoJson } = context
|
if (!drawOption.areaId.startsWith('custom_')) {
|
return options
|
}
|
const customAttr = parseJson(chart.customAttr)
|
const { label } = customAttr
|
const data = chart.data.data
|
const areaMap = data?.reduce((obj, value) => {
|
obj[value['field']] = value
|
return obj
|
}, {})
|
const geoJsonMap = geoJson.features.reduce((p, n) => {
|
if (n.properties['adcode']) {
|
p['156' + n.properties['adcode']] = n
|
}
|
return p
|
}, {})
|
customSubArea.forEach(area => {
|
const areaJsonArr = []
|
area.scopeArr?.forEach(adcode => {
|
const json = geoJsonMap[adcode]
|
json && areaJsonArr.push(json)
|
})
|
if (areaJsonArr.length) {
|
const areaJson: FeatureCollection = {
|
type: 'FeatureCollection',
|
features: areaJsonArr
|
}
|
const center = centroid(areaJson)
|
// 轮播用
|
area.centroid = [center.geometry.coordinates[0], center.geometry.coordinates[1]]
|
}
|
})
|
//处理label
|
options.label = {
|
visible: false
|
}
|
if (label.show) {
|
const labelLocation = []
|
customSubArea.forEach(area => {
|
if (area.centroid) {
|
const content = []
|
if (label.showDimension) {
|
content.push(area.name)
|
}
|
if (label.showQuota) {
|
;(areaMap[area.name] || areaMap[area.name] === 0) &&
|
content.push(valueFormatter(areaMap[area.name].value, label.quotaLabelFormatter))
|
}
|
labelLocation.push({
|
name: content.join('\n\n'),
|
x: area.centroid[0],
|
y: area.centroid[1]
|
})
|
}
|
})
|
const areaLabelLayer = new TextLayer({
|
name: 'areaLabelLayer',
|
source: {
|
data: labelLocation,
|
parser: {
|
type: 'json',
|
x: 'x',
|
y: 'y'
|
}
|
},
|
field: 'name',
|
style: {
|
fill: label.color,
|
fontSize: label.fontSize,
|
opacity: 1,
|
fontWeight: 'bold',
|
textAnchor: 'center',
|
textAllowOverlap: label.fullDisplay,
|
padding: !label.fullDisplay ? [2, 2] : undefined
|
}
|
})
|
context.layers = [areaLabelLayer]
|
}
|
// 处理tooltip
|
const subAreaMap = customSubArea.reduce((p, n) => {
|
n.scopeArr.forEach(a => {
|
p[a] = n.name
|
})
|
return p
|
}, {})
|
if (options.tooltip && options.tooltip.showComponent) {
|
options.tooltip.items = ['name', 'adcode', 'value']
|
options.tooltip.customTitle = ({ name, adcode }) => {
|
adcode = '156' + adcode
|
return subAreaMap[adcode] ?? name
|
}
|
const tooltip = customAttr.tooltip
|
const formatterMap = tooltip.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
options.tooltip.customItems = originalItem => {
|
const result = []
|
if (isEmpty(formatterMap)) {
|
return result
|
}
|
const head = originalItem.properties
|
if (!head) {
|
return result
|
}
|
const { adcode } = head
|
const areaName = subAreaMap['156' + adcode]
|
const valItem = areaMap[areaName]
|
if (!valItem) {
|
return result
|
}
|
const formatter = formatterMap[valItem.quotaList?.[0]?.id]
|
if (!isEmpty(formatter)) {
|
const originValue = parseFloat(valItem.value as string)
|
const value = valueFormatter(originValue, formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ ...valItem, name, value: `${value ?? ''}` })
|
}
|
valItem.dynamicTooltipValue?.forEach(item => {
|
const formatter = formatterMap[item.fieldId]
|
if (formatter) {
|
const value = valueFormatter(parseFloat(item.value), formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ color: 'grey', name, value: `${value ?? ''}` })
|
}
|
})
|
return result
|
}
|
}
|
return options
|
}
|
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
chart.customAttr.basicStyle.areaBaseColor = '#f4f4f4'
|
return chart
|
}
|
|
protected setupOptions(
|
chart: Chart,
|
options: ChoroplethOptions,
|
context: Record<string, any>
|
): ChoroplethOptions {
|
return flow(
|
this.configEmptyDataStrategy,
|
this.configLabel,
|
this.configStyle,
|
this.configTooltip,
|
this.configBasicStyle,
|
this.customConfigLegend,
|
this.configCustomArea
|
)(chart, options, context, this)
|
}
|
}
|
|
class ColorWrapper {
|
private color: string
|
value?: any
|
|
constructor(color: string, value?: any) {
|
this.color = color
|
if (value !== undefined) {
|
this.value = value
|
}
|
}
|
|
toString(): string {
|
return this.color
|
}
|
}
|
