echarts集成省份地圖（散點圖）通過echarts geoJson方式锦庸，以四川省地圖標(biāo)注城市散點為例
先看效果
2023-07-19 15.16.30.gif
cd-jietu1.png
概述
使用echarts vue3+ts封裝地圖組件,根據(jù)城市地理繪制繪制散點圖
echarts繪制地圖需要使用geoJson數(shù)據(jù)DataV.GeoAtlas地理小工具系列
具體截圖如下:
ditu-02.png
vue3代碼實現(xiàn)如下
代碼例子使用vue3 + ts + setup語法
- 安裝echarts依賴包希俩；
npm install echarts --save - 引入echarts并獲取四川省geoJson數(shù)據(jù)
import * as echarts from 'echarts'; //引入echarts
import sichuanJson from "./sichuan.json"; //引入四川省geoJson數(shù)據(jù)(也可通過服務(wù)器接口獲取)
echarts.registerMap('sichuan', sichuanJson as any); //注冊繪制四川省地圖
- 實例化echarts對象
const chartRef = ref<echarts.ECharts>() //定義ref
onMounted(() => {
chartRef.value = echarts.init(document.getElementById(props.id) as HTMLElement);//實力化對象
chartRef.value?.setOption(option);
})
- 配置option
let option = {
width: '833px',
height: '523px',
tooltip: {
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠標(biāo)是否可進入提示框浮層中，默認為false嗜逻，如需詳情內(nèi)交互，如添加鏈接扯罐，按鈕陆赋，可設(shè)置為 true
transitionDuration: 0, //提示框浮層的移動動畫過渡時間，單位是 s鸠信，設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動
extraCssText: "z-index:100;", //修改標(biāo)簽大小樣式等
},
},
geo:
{
map: 'sichuan',
type: 'map',
roam: false,
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
}
},
tooltip: { //設(shè)置鼠標(biāo)移至城市板塊選中視圖配置選項
backgroundColor: ' rgba(3,21,42,0.80)', //設(shè)置地圖高亮?xí)r城市視圖背景色框
borderRadius: 0,
trigger: 'item',
formatter: (params: any) => {
return `<div class="map-charts-bar">
<span class="text">${params.name}</span>
</div>`
}
},
itemStyle: { //設(shè)置地圖板塊配置選項
areaColor: '#083D7E',
normal: {
// 圖形的描邊顏色
borderColor: '#55aaff',
// 描邊線寬纵寝。
borderWidth: 1,
// 柱條的描邊類型。
borderType: 'solid',
areaColor: '#083D7E',
label: {
// 顯示省份下面市星立、州的名稱
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 400
}
}
},
// 鼠標(biāo)放上去后爽茴，樣式改變
emphasis: {
// 圖形的描邊顏色
borderColor: '#1DF9FC',
borderWidth: '2',
// 陰影色
areaColor: '#3099E2',
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 10,
},
}
},
},
},
series:series
} as echarts.EChartsOption;
- 配置series
這里的series項根據(jù)散點需要多少個顏色標(biāo)注樣式配置數(shù)據(jù)源,我的例子中使用了三個散點標(biāo)注顏色所以寫了三個配置對象
const series = [
{
tooltip: {
backgroundColor: '',//這里設(shè)置鼠標(biāo)移至城市板塊后提示視圖透明
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠標(biāo)是否可進入提示框浮層中，默認為false绰垂，如需詳情內(nèi)交互室奏，如添加鏈接，按鈕劲装，可設(shè)置為 true
transitionDuration: 0, //提示框浮層的移動動畫過渡時間胧沫，單位是 s，設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動
extraCssText: "z-index:999;", //修改標(biāo)簽大小樣式等
},
formatter: (params: { data: CityInfo }) => {
return mapFormatter(params)
}
},
type: "effectScatter", //effectScatter 特效散點圖
coordinateSystem: "geo",
rippleEffect: {
period: 4, //動畫時間占业，值越小速度越快
brushType: "stroke", //波紋繪制方式 stroke, fill
scale: 4, //波紋圓環(huán)最大限制绒怨，值越大波紋越大 4
},
itemStyle: {
color: '#1DF9FC'
},
data: []
},
{
tooltip: {
backgroundColor: '',
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠標(biāo)是否可進入提示框浮層中，默認為false谦疾，如需詳情內(nèi)交互南蹂，如添加鏈接，按鈕念恍，可設(shè)置為 true
transitionDuration: 0, //提示框浮層的移動動畫過渡時間六剥，單位是 s晚顷，設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動
extraCssText: "z-index:999;", //修改標(biāo)簽大小樣式等
},
formatter: (params: { data: CityInfo }) => {
return mapFormatter(params)
}
},
type: "effectScatter", //effectScatter 特效散點圖
coordinateSystem: "geo",
rippleEffect: {
period: 4, //動畫時間，值越小速度越快
brushType: "stroke", //波紋繪制方式 stroke, fill
scale: 4, //波紋圓環(huán)最大限制仗考，值越大波紋越大 4
},
itemStyle: {
color: '#F8D44F'
},
data: []
},
{
tooltip: {
backgroundColor: '',
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠標(biāo)是否可進入提示框浮層中音同，默認為false，如需詳情內(nèi)交互秃嗜，如添加鏈接权均，按鈕，可設(shè)置為 true
transitionDuration: 0, //提示框浮層的移動動畫過渡時間锅锨，單位是 s叽赊，設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動
extraCssText: "z-index:999;", //將散點等級提高也可修改樣式等
},
formatter: (params: { data: CityInfo }) => {
return mapFormatter(params)
}
},
type: "effectScatter", //effectScatter 特效散點圖
coordinateSystem: "geo",
rippleEffect: {
period: 4, //動畫時間，值越小速度越快
brushType: "stroke", //波紋繪制方式 stroke, fill
scale: 4, //波紋圓環(huán)最大限制必搞，值越大波紋越大 4
},
itemStyle: {
color: '#FF4138'
},
data: []
}
]
- 通過props傳入城市散點標(biāo)注信息繪制對應(yīng)ui
const props = defineProps<{
id: string, //組件地圖id
list: CityInfo[][] //城市散點圖列表數(shù)據(jù)
}>()
watch(() => props.list, () => {
(option.series as echarts.SeriesOption[])[0].data = props.list[1];
(option.series as echarts.SeriesOption[])[1].data = props.list[2];
(option.series as echarts.SeriesOption[])[2].data = props.list[3];
chartRef.value?.setOption(option);
})
//最后需要的地方組件中引入并傳入城市散點數(shù)據(jù)源使用
<ExamMap id="sichuan" :list="cityList"></ExamMap>
