fix: 中国地图组件支持配置是否显示海南群岛

This commit is contained in:
tnt group 2022-09-05 17:44:40 +08:00
parent 0193431c6d
commit a5dcc3d360
4 changed files with 25742 additions and 3 deletions

View File

@ -36,7 +36,7 @@ export const option = {
{ {
name: '地图', name: '地图',
type: 'map', type: 'map',
map: 'china', map: 'chinaWithoutHainanIsLands',
zoom: 1, //缩放 zoom: 1, //缩放
itemStyle: { itemStyle: {
// 背景色 // 背景色
@ -49,7 +49,8 @@ export const option = {
}, },
color: '#ffffff', color: '#ffffff',
borderColor: '#75ecaa', borderColor: '#75ecaa',
borderWidth: 1 borderWidth: 1,
showHainanIsLands: true // 是否显示海南群岛
}, },
label: { label: {
show: true, show: true,

View File

@ -43,6 +43,11 @@
></n-input-number> ></n-input-number>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<SettingItemBox name="其他">
<SettingItem>
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示海南群岛</n-checkbox>
</SettingItem>
</SettingItemBox>
</CollapseItem> </CollapseItem>
<CollapseItem name="标记" :expanded="true"> <CollapseItem name="标记" :expanded="true">
<SettingItemBox name="样式"> <SettingItemBox name="样式">

View File

@ -14,8 +14,8 @@ import { useChartDataFetch } from '@/hooks'
import { mergeTheme } from '@/packages/public/chart' import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { isPreview } from '@/utils' import { isPreview } from '@/utils'
import dataJson from './data.json'
import mapJson from './map.json' import mapJson from './map.json'
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
const props = defineProps({ const props = defineProps({
@ -45,6 +45,7 @@ use([
]) ])
registerMap('china', { geoJSON: mapJson as any, specialAreas: {} }) registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
registerMap('chinaWithoutHainanIsLands', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
const option = reactive({ const option = reactive({
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes) value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@ -58,6 +59,27 @@ const dataSetHandle = (dataset: any) => {
}) })
} }
const mapTypeHandle = (config: boolean) => {
// props.chartConfig.option.series.forEach((item: any) => {
// if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
// else if (item.type === 'map' && dataset.point) item.data = dataset.map
// option.value = props.chartConfig.option
// })
props.chartConfig.option.series[1].map = config ? 'china' : 'chinaWithoutHainanIsLands'
option.value = props.chartConfig.option
}
watch(
() => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
newData => {
mapTypeHandle(newData)
},
{
deep: true,
immediate: true
}
)
watch( watch(
() => props.chartConfig.option.dataset, () => props.chartConfig.option.dataset,
newData => { newData => {

File diff suppressed because it is too large Load Diff