forked from github/dataease
fix(图表): 修复地图提示轮播时,中国地图无法轮播的问题,以及地图自定义区间样式优化
This commit is contained in:
parent
3644f4e0be
commit
22e3e1e974
@ -356,7 +356,6 @@ onMounted(() => {
|
|||||||
<el-input-number
|
<el-input-number
|
||||||
:effect="themes"
|
:effect="themes"
|
||||||
v-model="state.legendForm.miscForm.mapLegendNumber"
|
v-model="state.legendForm.miscForm.mapLegendNumber"
|
||||||
size="small"
|
|
||||||
:precision="0"
|
:precision="0"
|
||||||
:min="1"
|
:min="1"
|
||||||
:max="9"
|
:max="9"
|
||||||
@ -385,7 +384,6 @@ onMounted(() => {
|
|||||||
<el-input-number
|
<el-input-number
|
||||||
:effect="themes"
|
:effect="themes"
|
||||||
v-model="state.legendForm.miscForm.mapLegendCustomRange[index]"
|
v-model="state.legendForm.miscForm.mapLegendCustomRange[index]"
|
||||||
size="small"
|
|
||||||
clearable
|
clearable
|
||||||
:value-on-clear="mapLegendCustomRangeCacheList[index]"
|
:value-on-clear="mapLegendCustomRangeCacheList[index]"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
|
@ -296,8 +296,9 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
},
|
},
|
||||||
'l7plot-legend__category-marker': {
|
'l7plot-legend__category-marker': {
|
||||||
...LEGEND_SHAPE_STYLE_MAP[legend.icon],
|
...LEGEND_SHAPE_STYLE_MAP[legend.icon],
|
||||||
width: '8px',
|
width: '9px',
|
||||||
height: '8px'
|
height: '9px',
|
||||||
|
border: '0.01px solid #f4f4f4'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -311,9 +312,15 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
ranges.forEach((range, index) => {
|
ranges.forEach((range, index) => {
|
||||||
const tmpRange = [range[0]?.toFixed(0), range[1]?.toFixed(0)]
|
const tmpRange = [range[0]?.toFixed(0), range[1]?.toFixed(0)]
|
||||||
const colorIndex = index % colors.length
|
const colorIndex = index % colors.length
|
||||||
|
// 当区间第一个值小于最小值时,颜色取地图底色
|
||||||
|
const isLessThanMin = range[0] < ranges[0][0]
|
||||||
|
let rangeColor = colors[colorIndex]
|
||||||
|
if (isLessThanMin) {
|
||||||
|
rangeColor = hexColorToRGBA(basicStyle.areaBaseColor, basicStyle.alpha)
|
||||||
|
}
|
||||||
items.push({
|
items.push({
|
||||||
value: tmpRange,
|
value: tmpRange,
|
||||||
color: colors[colorIndex]
|
color: rangeColor
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
customLegend['items'] = items
|
customLegend['items'] = items
|
||||||
@ -332,6 +339,17 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
const c = findColorByValue(t.value, items)
|
const c = findColorByValue(t.value, items)
|
||||||
return c ? c : null
|
return c ? c : null
|
||||||
}
|
}
|
||||||
|
customLegend['domStyles'] = {
|
||||||
|
...customLegend['domStyles'],
|
||||||
|
'l7plot-legend l7plot-legend__category': {
|
||||||
|
'box-shadow': '0px 0px 0px 0px',
|
||||||
|
'background-color': 'var(--bgColor)',
|
||||||
|
padding: 0
|
||||||
|
},
|
||||||
|
'l7plot-legend__list-item': {
|
||||||
|
'margin-bottom': '3px'
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
customLegend['customContent'] = (_: string, items: CategoryLegendListItem[]) => {
|
customLegend['customContent'] = (_: string, items: CategoryLegendListItem[]) => {
|
||||||
const showItems = items?.length > 30 ? items.slice(0, 30) : items
|
const showItems = items?.length > 30 ? items.slice(0, 30) : items
|
||||||
@ -368,6 +386,11 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
return options
|
return options
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
||||||
|
chart.customAttr.basicStyle.areaBaseColor = '#f4f4f4'
|
||||||
|
return chart
|
||||||
|
}
|
||||||
|
|
||||||
protected setupOptions(
|
protected setupOptions(
|
||||||
chart: Chart,
|
chart: Chart,
|
||||||
options: ChoroplethOptions,
|
options: ChoroplethOptions,
|
||||||
|
@ -12,7 +12,7 @@ export const configCarouselTooltip = (chart, view, data, scene) => {
|
|||||||
?.filter(i => i.dimensionList?.length > 0)
|
?.filter(i => i.dimensionList?.length > 0)
|
||||||
.reduce((acc, current) => {
|
.reduce((acc, current) => {
|
||||||
const existingItem = acc.find(obj => {
|
const existingItem = acc.find(obj => {
|
||||||
if (obj.abbrev === 'China') {
|
if (!obj.abbrev || obj.abbrev === 'China') {
|
||||||
return obj.adcode === current.adcode
|
return obj.adcode === current.adcode
|
||||||
} else {
|
} else {
|
||||||
return obj.abbrev === current.abbrev
|
return obj.abbrev === current.abbrev
|
||||||
|
Loading…
Reference in New Issue
Block a user