echarts集成省份地图（散点图）通过echarts geoJson方式，以四川省地图标注城市散点为例
先看效果
2023-07-19 15.16.30.gif
cd-jietu1.png
概述
使用echarts vue3+ts封装地图组件,根据城市地理绘制绘制散点图
echarts绘制地图需要使用geoJson数据DataV.GeoAtlas地理小工具系列
具体截图如下:
ditu-02.png
vue3代码实现如下
代码例子使用vue3 + ts + setup语法
- 安装echarts依赖包；
npm install echarts --save - 引入echarts并获取四川省geoJson数据
import * as echarts from 'echarts'; //引入echarts
import sichuanJson from "./sichuan.json"; //引入四川省geoJson数据(也可通过服务器接口获取)
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, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
extraCssText: "z-index:100;", //修改标签大小样式等
},
},
geo:
{
map: 'sichuan',
type: 'map',
roam: false,
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
}
},
tooltip: { //设置鼠标移至城市板块选中视图配置选项
backgroundColor: ' rgba(3,21,42,0.80)', //设置地图高亮时城市视图背景色框
borderRadius: 0,
trigger: 'item',
formatter: (params: any) => {
return `<div class="map-charts-bar">
<span class="text">${params.name}</span>
</div>`
}
},
itemStyle: { //设置地图板块配置选项
areaColor: '#083D7E',
normal: {
// 图形的描边颜色
borderColor: '#55aaff',
// 描边线宽。
borderWidth: 1,
// 柱条的描边类型。
borderType: 'solid',
areaColor: '#083D7E',
label: {
// 显示省份下面市、州的名称
show: true,
textStyle: {
color: '#fff',
fontSize: 12,
fontWeight: 400
}
}
},
// 鼠标放上去后，样式改变
emphasis: {
// 图形的描边颜色
borderColor: '#1DF9FC',
borderWidth: '2',
// 阴影色
areaColor: '#3099E2',
label: {
show: true,
textStyle: {
color: '#fff',
fontSize: 10,
},
}
},
},
},
series:series
} as echarts.EChartsOption;
- 配置series
这里的series项根据散点需要多少个颜色标注样式配置数据源,我的例子中使用了三个散点标注颜色所以写了三个配置对象
const series = [
{
tooltip: {
backgroundColor: '',//这里设置鼠标移至城市板块后提示视图透明
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
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, //波纹圆环最大限制，值越大波纹越大 4
},
itemStyle: {
color: '#1DF9FC'
},
data: []
},
{
tooltip: {
backgroundColor: '',
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
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, //波纹圆环最大限制，值越大波纹越大 4
},
itemStyle: {
color: '#F8D44F'
},
data: []
},
{
tooltip: {
backgroundColor: '',
borderWidth: 0,
tooltip: {
trigger: 'item',
showDelay: 0,
hideDelay: 0,
enterable: true, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动
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, //波纹圆环最大限制，值越大波纹越大 4
},
itemStyle: {
color: '#FF4138'
},
data: []
}
]
- 通过props传入城市散点标注信息绘制对应ui
const props = defineProps<{
id: string, //组件地图id
list: CityInfo[][] //城市散点图列表数据
}>()
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);
})
//最后需要的地方组件中引入并传入城市散点数据源使用
<ExamMap id="sichuan" :list="cityList"></ExamMap>
