react ts Echart地图散点地图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6da58e529ad952da3f5dbf7af40e63e6.png)
项目引入Echart
npm install echarts --save
YunNan.json下载
http://datav.aliyun.com/portal/school/atlas/area_selector
index.tsx页面
import { useEffect } from "react"
import * as echarts from 'echarts'; //全局引入 ,可按需引入
import YunNan from "../../YunNan.json";
import "./map.css";
const seriesData = [
{ name: '昆明市', value: 245 },
{ name: '大理白族自治州', value: 100 },
{ name: '丽江市', value: 17 }
];
const Echarts = () => {
let myChart: string | echarts.ECharts | null | undefined;
useEffect(() => {
loadingChina()
}, [])
const loadingChina = () => {
mapOption("YunNan", YunNan) //初始化-创建地图
}
const mapOption = (mapName: string, data: any) => {
if (myChart !== null && myChart !== "" && myChart !== undefined) {
myChart.dispose();//销毁(如果存在需要销毁,点击时会创建新的图表对象)
}
myChart = echarts.init(document.querySelector('.map'));//初始化
echarts.registerMap(mapName, data)
const geoCoordMap = data.features.map((item: { properties: { name: any; center: any; }; }) => {
return {
name: item.properties.name,
value: item.properties.center
}
});
const convertData = (data: string | any[]) => {
const res = [];
for (let i = 0; i < data.length; i++) {
if (geoCoordMap.filter((item: { name: any; }) => item.name === data[i].name).length)
res.push({
name: data[i].name,
value: geoCoordMap.filter((item: { name: any; }) => item.name === data[i].name)[0].value.concat(data[i].value)
})
}
return res;
}
const option = {
title: {
top: 20,
text: '地图展示',
subtext: '',
x: 'center',
textStyle: {
color: '#FFF',
fontSize: "48px"
}
},
tooltip: {
trigger: 'item',
formatter(params: { name: any; value: any[]; }) {
return `${params.name}:${params.value[2]}`;
},
},
roam: true,
zoom: 1.5, //设置地图放大
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['xxx分布'],
textStyle: {
color: '#fff',
fontSize: 28
},
},
geo: {
map: mapName,
roam: true,
geoIndex: 1,
zoom: 1.2, //地图的比例
label: {
normal: {
show: true,
textStyle: {
color: '#FFFFFF', //字体颜色
fontSize: 28
}
},
emphasis: {
textStyle: {
color: '#FFFFFF', //选中后的字体颜色
fontSize: 28
}
}
},
itemStyle: {
normal: {
areaColor: 'rgb(119, 224, 242)', //地区填充颜色
borderColor: 'rgba(0, 162, 255, 0.8)',//边界线颜色
shadowColor: 'rgb(119, 224, 242)',//阴影颜色
shadowBlur: 20,//模糊大小
borderWidth: 2,
colorStops: [{
offset: 0, color: '#0AFBFF'
}, {
offset: 1, color: '#0157C9'
}],
},
emphasis: { //选中样式
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0AFBFF'
}, {
offset: 1, color: '#0157C9'
}],
global: false
},
}
},
},
series: [
{
name: 'xxx分布',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(seriesData),
symbolSize(val: number[]) {
return (val[2] / 100) * 15 + 5;
},
label: {
normal: {
show: true,
textStyle: {
fontSize: 28,
}
},
emphasis: {
show: true,
},
},
itemStyle: {
color: 'red',
normal: {
label: {
show: true,
fontSize: 28
},
borderWidth: 20,
},
emphasis: {
borderColor: '#fff',
borderWidth: 20,
fontSize: 28
},
},
},
{
name: 'xxx分布',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
seriesData
.sort((a, b) => {
return b.count - a.count;
})
.slice(0, 5),
),
symbolSize(val: number[]) {
return (val[2] / 100) * 15 + 5;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'left',
show: true,
},
},
itemStyle: {
normal: {
color: 'red',
shadowBlur: 100,
shadowColor: 'red',
fontSize: 28
},
},
zlevel: 1,
},
],
};
myChart.setOption(option); //绘图
myChart.getZr().on('click', function (params) {
const pixelPoint = [params.offsetX, params.offsetY];
const dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
});
}
return (
<div className="map" />
)
}
export default Echarts;
map.css页面
.map{
height: 100vh;
width: 100%;
}