mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-02 11:48:36 +08:00
perf: 优化新地图组件
This commit is contained in:
奔跑的面条
parent
3b8280ed3a
commit
3af6bf3a4f
@ -14,6 +14,7 @@ export const scrollBoardUrl = '/mock/scrollBoard'
|
||||
export const radarUrl = '/mock/radarData'
|
||||
export const heatMapUrl = '/mock/heatMapData'
|
||||
export const scatterBasicUrl = '/mock/scatterBasic'
|
||||
export const mapUrl = '/mock/map'
|
||||
|
||||
const mockObject: MockMethod[] = [
|
||||
{
|
||||
@ -73,6 +74,11 @@ const mockObject: MockMethod[] = [
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchScatterBasic
|
||||
},
|
||||
{
|
||||
url: mapUrl,
|
||||
method: RequestHttpEnum.GET,
|
||||
response: () => test.fetchMap
|
||||
},
|
||||
]
|
||||
|
||||
export default mockObject
|
||||
|
||||
79
src/api/mock/map.json
Normal file
79
src/api/mock/map.json
Normal file
@ -0,0 +1,79 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.405285, 39.904989, 200]
|
||||
},
|
||||
{
|
||||
"name": "郑州",
|
||||
"value": [113.665412, 34.757975, 888]
|
||||
},
|
||||
{
|
||||
"name": "青海",
|
||||
"value": [101.778916, 36.623178, 666]
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": [106.278179, 38.46637, 66]
|
||||
},
|
||||
{
|
||||
"name": "哈尔滨市",
|
||||
"value": [126.642464, 45.756967, 101]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": "@integer(0, 1000)"
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": "@integer(0, 1000)"
|
||||
}
|
||||
],
|
||||
"pieces": [
|
||||
{ "gte": 1000, "label": ">1000" },
|
||||
{ "gte": 600, "lte": 999, "label": "600-999" },
|
||||
{ "gte": 200, "lte": 599, "label": "200-599" },
|
||||
{ "gte": 50, "lte": 199, "label": "49-199" },
|
||||
{ "gte": 10, "lte": 49, "label": "10-49" },
|
||||
{ "lte": 9, "label": "<9" }
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import heatmapJson from './heatMapData.json'
|
||||
import scatterJson from './scatter.json'
|
||||
import mapJson from './map.json'
|
||||
|
||||
export default {
|
||||
// 单图表
|
||||
@ -198,5 +199,12 @@ export default {
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: scatterJson
|
||||
},
|
||||
// 中国地图
|
||||
fetchMap: {
|
||||
code: 0,
|
||||
status: 200,
|
||||
msg: '请求成功',
|
||||
data: mapJson
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 103 KiB |
@ -230,15 +230,15 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="视觉映射">
|
||||
<setting-item-box name="控制块">
|
||||
<setting-item name="放置方向">
|
||||
<n-select v-model:value="visualMap.orient" size="small" :options="axisConfig.visualMap.orient"></n-select>
|
||||
</setting-item>
|
||||
<setting-item name="宽度">
|
||||
<n-input-number v-model:value="visualMap.temWidth" size="small"></n-input-number>
|
||||
<n-input-number v-model:value="visualMap.itemWidth" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="高度">
|
||||
<n-input-number v-model:value="visualMap.itemHeight" size="small"></n-input-number>
|
||||
<n-input-number v-model:value="visualMap.itemHeight" :min="5" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="反转">
|
||||
<n-space>
|
||||
@ -252,14 +252,6 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<global-setting-position :targetData="visualMap"></global-setting-position>
|
||||
<!-- <setting-item-box name="位置">
|
||||
<setting-item name="距离底部">
|
||||
<n-input-number v-model:value="visualMap.bottom" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="距离左侧">
|
||||
<n-input-number v-model:value="visualMap.left" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box> -->
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapConfig } from './index'
|
||||
import { MapBaseConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
@ -10,7 +10,7 @@ export const option = {
|
||||
dataset: dataJson,
|
||||
mapRegion: {
|
||||
adcode: 'china',
|
||||
showHainanIsLands:true
|
||||
showHainanIsLands: true
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
@ -18,170 +18,135 @@ export const option = {
|
||||
},
|
||||
visualMap: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
pieces: [
|
||||
{ gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: "600-999个" },
|
||||
{ gte: 200, lte: 599, label: "200-599个" },
|
||||
{ gte: 50, lte: 199, label: "49-199个" },
|
||||
{ gte: 10, lte: 49, label: "10-49个" },
|
||||
{ lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
{ gte: 1000, label: '>1000' }, // 不指定 max，表示 max 为无限大（Infinity）。
|
||||
{ gte: 600, lte: 999, label: '600-999' },
|
||||
{ gte: 200, lte: 599, label: '200-599' },
|
||||
{ gte: 50, lte: 199, label: '49-199' },
|
||||
{ gte: 10, lte: 49, label: '10-49' },
|
||||
{ lte: 9, label: '<9' } // 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
],
|
||||
inRange: {
|
||||
// 渐变颜色，从小到大
|
||||
color: [
|
||||
"#c3d7df",
|
||||
"#5cb3cc",
|
||||
"#8abcd1",
|
||||
"#66a9c9",
|
||||
"#2f90b9",
|
||||
"#1781b5",
|
||||
],
|
||||
color: ['#c3d7df', '#5cb3cc', '#8abcd1', '#66a9c9', '#2f90b9', '#1781b5']
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
show:false,
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: "china",
|
||||
map: 'china',
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
// aspectScale: 1,
|
||||
zoom: 1,
|
||||
zoom: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 4,
|
||||
legendHoverLink: true,
|
||||
showEffectOn: "render",
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
scale: 6,
|
||||
color: "#FFFFFF",
|
||||
brushType: "fill",
|
||||
color: '#FFFFFF',
|
||||
brushType: 'fill'
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
// formatter: function (params:any) {
|
||||
// console.log(params);
|
||||
// if (params.data) {
|
||||
// return params.name + "：" + params.data["value"][2];
|
||||
// }
|
||||
// },
|
||||
// formatter:"{a}: {b}<br />{c}: {d}",
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
// formatter: (param: any) => {
|
||||
// return param.name.slice(0, 2);
|
||||
// },
|
||||
formatter: '{b}',
|
||||
// formatter: '{a}: {b}<br />{c}: {d}{e}',
|
||||
fontSize: 11,
|
||||
offset: [0, 2],
|
||||
position: "bottom",
|
||||
textBorderColor: "#fff",
|
||||
textShadowColor: "#000",
|
||||
position: 'bottom',
|
||||
textBorderColor: '#fff',
|
||||
textShadowColor: '#000',
|
||||
textShadowBlur: 10,
|
||||
textBorderWidth: 0,
|
||||
color: "#FFF",
|
||||
show: true,
|
||||
color: '#FFF',
|
||||
show: true
|
||||
},
|
||||
// colorBy: "data",
|
||||
itemStyle: {
|
||||
color: "#FFFFFF",
|
||||
borderColor: "rgba(225,255,255,2)",
|
||||
color: '#FFFFFF',
|
||||
borderColor: 'rgba(225,255,255,2)',
|
||||
borderWidth: 4,
|
||||
shadowColor: "#E1FFFF",
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#E1FFFF',
|
||||
shadowBlur: 10
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '区域',
|
||||
type: "map",
|
||||
map: "china",
|
||||
// aspectScale: 1,
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
data: [],
|
||||
selectedMode: false, //是否允许选中多个区域
|
||||
selectedMode: false,
|
||||
zoom: 1,
|
||||
geoIndex: 1,
|
||||
tooltip: {
|
||||
show: true,
|
||||
backgroundColor: "rgba(0,0,0,.6)",
|
||||
borderColor: "rgba(147, 235, 248, .8)",
|
||||
backgroundColor: 'rgba(0,0,0,.6)',
|
||||
borderColor: 'rgba(147, 235, 248, .8)',
|
||||
textStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
color: '#FFF'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
color: "#fff",
|
||||
// formatter: function (val:any) {
|
||||
// // console.log(val)
|
||||
// if (val.data !== undefined) {
|
||||
// return val.name.slice(0, 2);
|
||||
// } else {
|
||||
// return "";
|
||||
// }
|
||||
// },
|
||||
rich: {},
|
||||
// emphasis: { show: false },
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
disabled:false,
|
||||
disabled: false,
|
||||
label: {
|
||||
color: "#fffFFF",
|
||||
color: '#fffFFF'
|
||||
},
|
||||
itemStyle:{
|
||||
areaColor: "#389BB7",
|
||||
shadowColor:"#389BB7",
|
||||
borderWidth: 1,
|
||||
itemStyle: {
|
||||
areaColor: '#389BB7',
|
||||
shadowColor: '#389BB7',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
// borderColor: "rgba(147, 235, 248, .8)",
|
||||
borderColor: '#93EBF8',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
|
||||
},
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false,
|
||||
globalCoord: false
|
||||
},
|
||||
shadowColor: "#80D9F842",
|
||||
shadowColor: '#80D9F842',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10,
|
||||
|
||||
},
|
||||
|
||||
shadowBlur: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
export const MapDefaultConfig = { ...option }
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapConfig.key
|
||||
public key: string = MapBaseConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = MapConfig
|
||||
public chartConfig = MapBaseConfig
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
||||
|
||||
@ -4,15 +4,13 @@
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="地图区域">
|
||||
<SettingItem name="默认中国">
|
||||
<n-select size="small" v-model:value="mapRegion.adcode" :options="mapRegionOptions" value-field="adcode" label-field="name"/>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="mapGeo.zoom"
|
||||
:min="1"
|
||||
<n-select
|
||||
size="small"
|
||||
placeholder="请输入地图大小"
|
||||
></n-input-number>
|
||||
v-model:value="mapRegion.adcode"
|
||||
:options="mapRegionOptions"
|
||||
value-field="adcode"
|
||||
label-field="name"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
@ -31,9 +29,8 @@
|
||||
v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="阴影" >
|
||||
<SettingItemBox name="阴影">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
@ -44,6 +41,7 @@
|
||||
<SettingItem name="模糊程度">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.shadowBlur"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="请输入模糊程度"
|
||||
></n-input-number>
|
||||
@ -63,7 +61,7 @@
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="聚焦 （预览可见）" >
|
||||
<SettingItemBox name="聚焦 （预览可见）">
|
||||
<setting-item name="禁用">
|
||||
<n-space>
|
||||
<n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
|
||||
@ -92,7 +90,11 @@
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="文字颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[1].emphasis.label.color"></n-color-picker>
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].emphasis.label.color"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
@ -112,8 +114,8 @@
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他" v-if="mapRegion.adcode==='china'">
|
||||
<SettingItem >
|
||||
<SettingItemBox name="其他" v-if="mapRegion.adcode === 'china'">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="mapRegion.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
@ -126,8 +128,8 @@
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="涟漪">
|
||||
<SettingItem name="涟漪大小">
|
||||
<n-input-number
|
||||
@ -141,10 +143,9 @@
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="涟漪的绘制方式">
|
||||
<n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions"/>
|
||||
|
||||
<n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
@ -153,46 +154,48 @@ import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
|
||||
const mapRegionOptions=ref([
|
||||
const mapRegionOptions = ref([
|
||||
{
|
||||
adcode:'china',
|
||||
name:'中国',
|
||||
adcode: 'china',
|
||||
name: '中国'
|
||||
}
|
||||
])
|
||||
|
||||
const rippleEffectOptions=ref([
|
||||
{
|
||||
value:'fill',
|
||||
label:'实心',
|
||||
},{
|
||||
value:'stroke',
|
||||
label:'空心',
|
||||
const rippleEffectOptions = ref([
|
||||
{
|
||||
value: 'fill',
|
||||
label: '实心'
|
||||
},
|
||||
{
|
||||
value: 'stroke',
|
||||
label: '空心'
|
||||
}
|
||||
])
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const initMapRegionOptions=()=>{
|
||||
mapChinaJson.features.forEach((element:any) => {
|
||||
if(element.properties.name){
|
||||
mapRegionOptions.value.push({...element.properties})
|
||||
|
||||
const initMapRegionOptions = () => {
|
||||
mapChinaJson.features.forEach((element: any) => {
|
||||
if (element.properties.name) {
|
||||
mapRegionOptions.value.push({ ...element.properties })
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
initMapRegionOptions()
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
|
||||
const mapRegion = computed(() => {
|
||||
return props.optionData.mapRegion
|
||||
})
|
||||
const mapGeo = computed(() => {
|
||||
return props.optionData.geo
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -2,29 +2,24 @@
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.405285, 39.904989, 200],
|
||||
"label":666
|
||||
"value": [116.405285, 39.904989, 200]
|
||||
},
|
||||
{
|
||||
"name": "郑州",
|
||||
"value": [113.665412, 34.757975,888],
|
||||
"label":666
|
||||
"value": [113.665412, 34.757975, 888]
|
||||
},
|
||||
{
|
||||
"name":"青海",
|
||||
"value":[101.778916, 36.623178,666],
|
||||
"label":666
|
||||
"name": "青海",
|
||||
"value": [101.778916, 36.623178, 666]
|
||||
},
|
||||
{
|
||||
"name":"宁夏回族自治区",
|
||||
"value":[106.278179, 38.46637,66],
|
||||
"label":666
|
||||
} ,
|
||||
"name": "宁夏回族自治区",
|
||||
"value": [106.278179, 38.46637, 66]
|
||||
},
|
||||
{
|
||||
"name":"哈尔滨市",
|
||||
"value":[126.642464, 45.756967,101],
|
||||
"label":666
|
||||
}
|
||||
"name": "哈尔滨市",
|
||||
"value": [126.642464, 45.756967, 101]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
@ -72,5 +67,13 @@
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 7
|
||||
}
|
||||
],
|
||||
"pieces": [
|
||||
{ "gte": 1000, "label": ">1000" },
|
||||
{ "gte": 600, "lte": 999, "label": "600-999" },
|
||||
{ "gte": 200, "lte": 599, "label": "200-599" },
|
||||
{ "gte": 50, "lte": 199, "label": "49-199" },
|
||||
{ "gte": 10, "lte": 49, "label": "10-49" },
|
||||
{ "lte": 9, "label": "<9" }
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/ind
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapConfig: ConfigType = {
|
||||
export const MapBaseConfig: ConfigType = {
|
||||
key: 'MapBase',
|
||||
chartKey: 'VMapBase',
|
||||
conKey: 'VCMapBase',
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch, ref, nextTick } from 'vue'
|
||||
import config, { includes, MapDefaultConfig } from './config'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use, registerMap, getMap } from 'echarts/core'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
@ -15,7 +15,6 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
|
||||
import {
|
||||
DatasetComponent,
|
||||
GridComponent,
|
||||
@ -24,6 +23,7 @@ import {
|
||||
GeoComponent,
|
||||
VisualMapComponent
|
||||
} from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
@ -58,15 +58,17 @@ const vChartRef = ref<typeof VChart>()
|
||||
|
||||
//动态获取json注册地图
|
||||
const getGeojson = (regionId: string) => {
|
||||
return new Promise<boolean>((resolve, reject) => {
|
||||
return new Promise<boolean>((resolve) => {
|
||||
import(`./mapGeojson/${regionId}.json`).then(data => {
|
||||
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
|
||||
resolve(true)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
// 进行更换初始化地图
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
@ -74,45 +76,25 @@ const registerMapInitAsync = async () => {
|
||||
vEchartsSetOption()
|
||||
}
|
||||
registerMapInitAsync()
|
||||
const updateOptions = async () => {
|
||||
|
||||
// 手动触发渲染
|
||||
const vEchartsSetOption = () => {
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
const vEchartsSetOption =()=>{
|
||||
vChartRef.value?.setOption(props.chartConfig.option)
|
||||
}
|
||||
const dataSetHandle = async (dataset: any) => {
|
||||
|
||||
// 更新数据处理
|
||||
const dataSetHandle = async (dataset: any) => {
|
||||
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
|
||||
else if (item.type === 'map' && dataset.map) item.data = dataset.map
|
||||
})
|
||||
updateOptions()
|
||||
}
|
||||
// 更换地图
|
||||
const mapGeoHandle = async (regionId: string) => {
|
||||
await getGeojson(regionId)
|
||||
props.chartConfig.option.geo.map = regionId
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = regionId
|
||||
})
|
||||
updateOptions()
|
||||
if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
|
||||
|
||||
isPreview() && vEchartsSetOption()
|
||||
}
|
||||
|
||||
//是否显示南海群岛
|
||||
const mapTypeHandle = async (show: boolean) => {
|
||||
if (show) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
vEchartsSetOption()
|
||||
}
|
||||
//层级发生变化
|
||||
const mapZoomHandle = async (newData: number) => {
|
||||
props.chartConfig.option.series[1].zoom = newData
|
||||
updateOptions()
|
||||
}
|
||||
|
||||
//监听数据发生变化
|
||||
//监听 dataset 数据发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
@ -123,31 +105,33 @@ watch(
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
//监听是否显示南海群岛
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.showHainanIsLands,
|
||||
newData => {
|
||||
mapTypeHandle(newData)
|
||||
async newData => {
|
||||
if (newData) {
|
||||
await getGeojson('china')
|
||||
} else {
|
||||
registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
}
|
||||
vEchartsSetOption()
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
//监听地图区域发生变化
|
||||
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.mapRegion.adcode,
|
||||
newData => {
|
||||
mapGeoHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
//监听大小发生变化
|
||||
watch(
|
||||
() => props.chartConfig.option.geo.zoom,
|
||||
newData => {
|
||||
mapZoomHandle(newData)
|
||||
async newData => {
|
||||
await getGeojson(newData)
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
})
|
||||
vEchartsSetOption()
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
@ -156,7 +140,6 @@ watch(
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
console.log('预览', newData)
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { MapChinaConfig } from './index'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = []
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
},
|
||||
geo: {
|
||||
show: false,
|
||||
type: 'map',
|
||||
roam: false,
|
||||
map: 'china'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbolSize: 6,
|
||||
zlevel: 1,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
color: '#00ECC8'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '地图',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zoom: 1, //缩放
|
||||
itemStyle: {
|
||||
// 背景色
|
||||
areaColor: 'rgba(117, 236, 170, 0.3)',
|
||||
emphasis: {
|
||||
areaColor: 'rgba(117, 236, 170, .8)',
|
||||
borderWidth: 1,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#75ecaa'
|
||||
},
|
||||
color: '#ffffff',
|
||||
borderColor: '#75ecaa',
|
||||
borderWidth: 1,
|
||||
showHainanIsLands: true // 是否显示南海群岛
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#ffffff'
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = MapChinaConfig.key
|
||||
public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
|
||||
public chartConfig = MapChinaConfig
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem name="地图" :expanded="true">
|
||||
<SettingItemBox name="省份" :alone="true">
|
||||
<SettingItem name="背景颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦颜色（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="聚焦阴影（预览可见）">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="边框">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="seriesList[1].itemStyle.borderColor"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="seriesList[1].itemStyle.borderWidth"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入边框大小"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="其他">
|
||||
<SettingItem>
|
||||
<n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示南海群岛</n-checkbox>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="标记" :expanded="true">
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@ -1,146 +0,0 @@
|
||||
{
|
||||
"point": [
|
||||
{
|
||||
"name": "北京",
|
||||
"value": [116.2, 39.56, 1000]
|
||||
}
|
||||
],
|
||||
"map": [
|
||||
{
|
||||
"name": "北京市",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"name": "天津市",
|
||||
"value": 99
|
||||
},
|
||||
{
|
||||
"name": "河北省",
|
||||
"value": 98
|
||||
},
|
||||
{
|
||||
"name": "山西省",
|
||||
"value": 97
|
||||
},
|
||||
{
|
||||
"name": "内蒙古自治区",
|
||||
"value": 96
|
||||
},
|
||||
{
|
||||
"name": "辽宁省",
|
||||
"value": 95
|
||||
},
|
||||
{
|
||||
"name": "吉林省",
|
||||
"value": 94
|
||||
},
|
||||
{
|
||||
"name": "黑龙江省",
|
||||
"value": 93
|
||||
},
|
||||
{
|
||||
"name": "上海市",
|
||||
"value": 92
|
||||
},
|
||||
{
|
||||
"name": "江苏省",
|
||||
"value": 91
|
||||
},
|
||||
{
|
||||
"name": "浙江省",
|
||||
"value": 90
|
||||
},
|
||||
{
|
||||
"name": "安徽省",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"name": "福建省",
|
||||
"value": 88
|
||||
},
|
||||
{
|
||||
"name": "江西省",
|
||||
"value": 87
|
||||
},
|
||||
{
|
||||
"name": "山东省",
|
||||
"value": 86
|
||||
},
|
||||
{
|
||||
"name": "河南省",
|
||||
"value": 85
|
||||
},
|
||||
{
|
||||
"name": "湖北省",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"name": "湖南省",
|
||||
"value": 83
|
||||
},
|
||||
{
|
||||
"name": "广东省",
|
||||
"value": 82
|
||||
},
|
||||
{
|
||||
"name": "广西壮族自治区",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"name": "海南省",
|
||||
"value": 80
|
||||
},
|
||||
{
|
||||
"name": "重庆市",
|
||||
"value": 79
|
||||
},
|
||||
{
|
||||
"name": "四川省",
|
||||
"value": 78
|
||||
},
|
||||
{
|
||||
"name": "贵州省",
|
||||
"value": 77
|
||||
},
|
||||
{
|
||||
"name": "云南省",
|
||||
"value": 76
|
||||
},
|
||||
{
|
||||
"name": "西藏自治区",
|
||||
"value": 75
|
||||
},
|
||||
{
|
||||
"name": "陕西省",
|
||||
"value": 74
|
||||
},
|
||||
{
|
||||
"name": "甘肃省",
|
||||
"value": 73
|
||||
},
|
||||
{
|
||||
"name": "青海省",
|
||||
"value": 72
|
||||
},
|
||||
{
|
||||
"name": "宁夏回族自治区",
|
||||
"value": 71
|
||||
},
|
||||
{
|
||||
"name": "新疆维吾尔自治区",
|
||||
"value": 70
|
||||
},
|
||||
{
|
||||
"name": "台湾省",
|
||||
"value": 69
|
||||
},
|
||||
{
|
||||
"name": "香港特别行政区",
|
||||
"value": 68
|
||||
},
|
||||
{
|
||||
"name": "澳门特别行政区",
|
||||
"value": 67
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import image from '@/assets/images/chart/charts/map.png'
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const MapChinaConfig: ConfigType = {
|
||||
key: 'MapChina',
|
||||
chartKey: 'VMapChina',
|
||||
conKey: 'VCMapChina',
|
||||
title: '地图',
|
||||
category: ChatCategoryEnum.MAP,
|
||||
categoryName: ChatCategoryEnumName.MAP,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image
|
||||
}
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import config, { includes } from './config'
|
||||
import VChart from 'vue-echarts'
|
||||
import { use, registerMap } from 'echarts/core'
|
||||
import { EffectScatterChart, MapChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import mapJson from './map.json'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
use([
|
||||
MapChart,
|
||||
DatasetComponent,
|
||||
CanvasRenderer,
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GeoComponent,
|
||||
EffectScatterChart
|
||||
])
|
||||
|
||||
registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
|
||||
const option = reactive({
|
||||
value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
const dataSetHandle = (dataset: any) => {
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
const mapTypeHandle = (show: boolean) => {
|
||||
show
|
||||
? registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
|
||||
: registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
|
||||
newData => {
|
||||
mapTypeHandle(newData)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
newData => {
|
||||
dataSetHandle(newData)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
dataSetHandle(newData)
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,4 +1,3 @@
|
||||
import { MapChinaConfig } from './MapChina/index'
|
||||
import { MapConfig } from './MapBase/index'
|
||||
import { MapBaseConfig } from './MapBase/index'
|
||||
|
||||
export default [MapChinaConfig,MapConfig]
|
||||
export default [ MapBaseConfig ]
|
||||
|
||||
@ -73,8 +73,8 @@ import {
|
||||
imageUrl,
|
||||
radarUrl,
|
||||
heatMapUrl,
|
||||
scatterBasicUrl
|
||||
|
||||
scatterBasicUrl,
|
||||
mapUrl
|
||||
} from '@/api/mock'
|
||||
|
||||
const { HelpOutlineIcon } = icon.ionicons5
|
||||
@ -116,6 +116,9 @@ const apiList = [
|
||||
{
|
||||
value: `【基础散点图】${scatterBasicUrl}`
|
||||
},
|
||||
{
|
||||
value: `【地图数据】${mapUrl}`
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user