本文介绍了如何在React应用中利用ECharts库结合chinaJson和cityJson数据，实现中国地图上的散点图，以展示公司在全国各城市的药店分布。通过动态设置容器宽高解决尺寸问题，示例代码展示了如何配置ECharts option以展示所有数据和Top 5城市的散点，并提供数据接口和城市坐标信息。
先上最终效果图（显示公司在中国各个城市药店分布图）
我这边使用的技术栈是react，不熟悉的可走：https://zh-hans.reactjs.org/
首先使用npm安装echarts
cnpm install echarts --save除此之外，我还自己引用了两个json，分别是chainaJson（http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4，使用下面一个接口，能显示省区域线），
cityJson（包含300多个城市的名字，坐标等等，未找到连接，放在文末）
首先给定保存charts的容器，这里使用js动态赋值容器的宽高，解决只能使用px定义echarts大小的问题
<div className={styles.box} id="mainbox">
<div id="main" />
</div>
const w = document.getElementById('mainbox').clientWidth;
document.getElementById('main').style.width = w + 'px';
const h = document.getElementById('mainbox').clientHeight;
document.getElementById('main').style.height = h + 'px';
.box {
display: inline-block;
width: 60% !important;
height: 100%;
text-align: center;
vertical-align: top;
}按照绘制散点图（series为scatter）的option来绘制，不清楚细节查看文档（https://www.echartsjs.com/zh/option.html#title），代码如下
initMap = () => {
const that = this;
const myChart = echarts.init(document.getElementById('main'));
function convertData(data) {
const res = [];
for (let i = 0; i < data.length; i += 1) {
const geoCoord = cityJson[data[i].city_name.replace('市', '')];
if (geoCoord) {
res.push({
name: data[i].city_name,
value: [geoCoord.lon, geoCoord.lat].concat(data[i].count),
});
}
}
return res;
}
const option = {
// backgroundColor: '#064066',
tooltip: {
trigger: 'item',
formatter(params) {
return `${params.name}:${params.value[2]}`;
},
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['门店分布'],
textStyle: {
color: '#fff',
},
},
geo: {
map: 'china',
itemStyle: {
normal: {
areaColor: '#0064B3',
borderColor: '#0080B4',
},
emphasis: {
areaColor: '#83C9E9',
},
},
},
series: [
{
name: '门店分布',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(that.state.cityShops),
symbolSize(val) {
return val[2] / 10;
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
color: 'yellow',
emphasis: {
borderColor: '#fff',
borderWidth: 1,
},
},
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
that.state.cityShops
.sort((a, b) => {
return b.count - a.count;
})
.slice(0, 5),
),
symbolSize(val) {
return val[2] / 40;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10,
shadowColor: 'yellow',
},
},
zlevel: 1,
},
],
};
echarts.registerMap('china', chinaJson);
myChart.setOption(option);
};其中我的that.state.cityShops是后台接口获取的，举个例子
[
{city_name:'杭州',count:'10'},
{city_name:'苏州',count:'20'},
]这里绘制了两份散点图，一份是所有数据的散点分布，一份是top5城市的散点图并且展示这五个城市的名字。
以上就是所有了，如有问题，欢迎留言询问。
附上cityJson，这东西难找的一逼：
export default {
北京: {
name: '北京市',
province: '北京市',
lat: 39.9031324643,
lon: 116.4010433787,
x: 6763,
level: { range: 4, level: 1, name: '一线城市' },
y: 6381,
cityNo: 1,
},
上海: {
name: '上海市',
province: '上海市',
lat: 31.2319526784,
lon: 121.469443249,
x: 7779,
level: { range: 4, level: 1, name: '一线城市' },
y: 4409,
cityNo: 2,
},
广州: {
name: '广州市',
province: '广东省越秀区吉祥路79号',
lat: 23.1317146641,
lon: 113.2595185241,
x: 6173,
level: { range: 4, level: 1, name: '一线城市' },
y: 2560,
cityNo: 3,
},
深圳: {
name: '深圳市',
province: '广东省福田区新园路37号',
lat: 22.5455465546,
lon: 114.0527779134,
x: 6336,
level: { range: 4, level: 1, name: '一线城市' },
y: 2429,
cityNo: 4,
},
成都: {
name: '成都市',
province: '四川省锦江区红星路4段-88号-附1号',
lat: 30.6522796787,
lon: 104.0725574128,
x: 4387,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4304,
cityNo: 5,
},
杭州: {
name: '杭州市',
province: '浙江省拱墅区环城北路316号',
lat: 30.2753694112,
lon: 120.1509063337,
x: 7530,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4182,
cityNo: 6,
},
武汉: {
name: '武汉市',
province: '湖北省江岸区沿江大道188号',
lat: 30.5952548577,
lon: 114.2999398195,
x: 6384,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4231,
cityNo: 7,
},
重庆: {
name: '重庆市',
province: '重庆市',
lat: 29.565545745,
lon: 106.5483098308,
x: 4858,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4033,
cityNo: 8,
},
南京: {
name: '南京市',
province: '江苏省玄武区北京东路42-2号',
lat: 32.0604117958,
lon: 118.7911366424,
x: 7252,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4577,
cityNo: 9,
},
天津: {
name: '天津市',
province: '天津市',
lat: 39.0867706952,
lon: 117.196953841,
x: 6911,
level: { level: 2, range: 19, name: '新一线城市' },
y: 6191,
cityNo: 10,
},
苏州: {
name: '苏州市',
province: '江苏省姑苏区三香路128号',
lat: 31.2995181173,
lon: 120.5814069003,
x: 7605,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4417,
cityNo: 11,
},
西安: {
name: '西安市',
province: '陕西省未央区凤城八路109号',
lat: 34.3425923471,
lon: 108.9349972803,
x: 5362,
level: { level: 2, range: 19, name: '新一线城市' },
y: 5099,
cityNo: 12,
},
长沙: {
name: '长沙市',
province: '湖南省岳麓区俯前路208号',
lat: 28.2322704791,
lon: 112.9335552442,
x: 6113,
level: { level: 2, range: 19, name: '新一线城市' },
y: 3700,
cityNo: 13,
},
沈阳: {
name: '沈阳市',
province: '辽宁省沈河区市府大路243号',
lat: 41.8025810937,
lon: 123.4244498695,
x: 8014,
level: { level: 2, range: 19, name: '新一线城市' },
y: 6879,
cityNo: 14,
},
青岛: {
name: '青岛市',
province: '山东省市南区香港中路11号',
lat: 36.0658889754,
lon: 120.3780128118,
x: 7522,
level: { level: 2, range: 19, name: '新一线城市' },
y: 5504,
cityNo: 15,
},
郑州: {
name: '郑州市',
province: '河南省中原区中原西路233号',
lat: 34.7483926297,
lon: 113.6192610688,
x: 6253,
level: { level: 2, range: 19, name: '新一线城市' },
y: 5177,
cityNo: 16,
},
大连: {
name: '大连市',
province: '辽宁省西岗区人民广场1号',
lat: 38.9125572467,
lon: 121.6100242808,
x: 7722,
level: { level: 2, range: 19, name: '新一线城市' },
y: 6177,
cityNo: 17,
},
东莞: {
name: '东莞市',
province: '广东省东莞市鸿福路99号',
lat: 23.0236494965,
lon: 113.7466213637,
x: 6273,
level: { level: 2, range: 19, name: '新一线城市' },
y: 2535,
cityNo: 18,
},
宁波: {
name: '宁波市',
province: '浙江省江东区河清北路',
lat: 29.8630025108,
lon: 121.6178976436,
x: 7822,
level: { level: 2, range: 19, name: '新一线城市' },
y: 4102,
cityNo: 19,
},
厦门: {
name: '厦门市',
province: '福建省思明区湖滨北路61号',
lat: 24.4818403305,
lon: 118.0845569942,
x: 7159,
level: { level: 3, range: 49, name: '二线城市' },
y: 2871,
cityNo: 20,
},
福州: {
name: '福州市',
province: '福建省鼓楼区乌山路96号',
lat: 26.0772916987,
lon: 119.2921461622,
x: 7393,
level: { level: 3, range: 49, name: '二线城市' },
y: 3234,
cityNo: 21,
},
无锡: {
name: '无锡市',
province: '江苏省滨湖区观山路',
lat: 31.4949453558,
lon: 120.3069141161,
x: 7550,
level: { level: 3, range: 49, name: '二线城市' },
y: 4459,
cityNo: 22,
},
合肥: {
name: '合肥市',
province: '安徽省蜀山区东流路100号',
lat: 31.8223533535,
lon: 117.2216698776,
x: 6950,
level: { level: 3, range: 49, name: '二线城市' },
y: 4515,
cityNo: 23,
},
昆明: {
name: '昆明市',
province: '云南省五华区华山南路78',
lat: 25.0482091732,
lon: 102.7083355915,
x: 4032,
level: { level: 3, range: 49, name: '二线城市' },
y: 3068,
cityNo: 24,
},
哈尔滨: {
name: '哈尔滨市',
province: '黑龙江省松北区世纪大道1号',
lat: 45.8012488452,
lon: 126.528844686,
x: 8493,
level: { level: 3, range: 49, name: '二线城市' },
y: 7888,
cityNo: 25,
},
济南: {
name: '济南市',
province: '山东省历下区龙鼎大道1',
lat: 36.6498157915,
lon: 117.1140788117,
x: 6907,
level: { level: 3, range: 49, name: '二线城市' },
y: 5621,
cityNo: 26,
},
佛山: {
name: '佛山市',
province: '广东省禅城区岭南大道原大福路14号',
lat: 23.0243440777,
lon: 113.1164424334,
x: 6143,
level: { level: 3, range: 49, name: '二线城市' },
y: 2536,
cityNo: 27,
},
长春: {
name: '长春市',
province: '吉林省南关区人民大街10111号',
lat: 43.8137766729,
lon: 125.3171698527,
x: 8318,
level: { level: 3, range: 49, name: '二线城市' },
y: 7385,
cityNo: 28,
},
温州: {
name: '温州市',
province: '浙江省鹿城区绣山路321号',
lat: 27.9981181016,
lon: 120.6954644539,
x: 7659,
level: { level: 3, range: 49, name: '二线城市' },
y: 3674,
cityNo: 29,
},
石家庄: {
name: '石家庄市',
province: '河北省长安区中山东路216号',
lat: 38.0417654681,
lon: 114.5087442984,
x: 6419,
level: { level: 3, range: 49, name: '二线城市' },
y: 5940,
cityNo: 30,
},
南宁: {
name: '南宁市',
province: '广西壮族自治区青秀区嘉宾路1号-9楼',
lat: 22.8189749942,
lon: 108.3625136575,
x: 5162,
level: { level: 3, range: 49, name: '二线城市' },
y: 2510,
cityNo: 31,
},
常州: {
name: '常州市',
province: '江苏省新北区龙城大道1280号',
lat: 31.8117500319,
lon: 119.9705989619,
x: 7482,
level: { level: 3, range: 49, name: '二线城市' },
y: 4528,
cityNo: 32,
},
泉州: {
name: '泉州市',
province: '福建省丰泽区海星街',
lat: 24.8765003854,
lon: 118.6716271592,
x: 7276,
level: { level: 3, range: 49, name: '二线城市' },
y: 2962,
cityNo: 33,
},
南昌: {
name: '南昌市',
province: '江西省东湖区新府路118号',
lat: 28.6870805012,
lon: 115.8535540365,
x: 6693,
level: { level: 3, range: 49, name: '二线城市' },
y: 3803,
cityNo: 34,
},
贵阳: {
name: '贵阳市',
province: '贵州省乌当区林城东路7',
lat: 26.6511980693,
lon: 106.6267636888,
x: 4843,
level: { level: 3, range: 49, name: '二线城市' },
y: 3379,
cityNo: 35,
},
太原: {
name: '太原市',
province: '山西省杏花岭区新建路69',
lat: 37.8701144671,
lon: 112.5436500641,
x: 6056,
level: { level: 3, range: 49, name: '二线城市' },
y: 5901,
cityNo: 36,
},
烟台: {
name: '烟台市',
province: '山东省莱山区芙蓉路6号',
lat: 37.4626983218,
lon: 121.4425998653,
x: 7707,
level: { level: 3, range: 49, name: '二线城市' },
y: 5837,
cityNo: 37,
},
嘉兴: {
name: '嘉兴市',
province: '浙江省南湖区广场路1号',
lat: 30.7473763022,
lon: 120.7522394145,
x: 7644,
level: { level: 3, range: 49, name: '二线城市' },
y: 4293,
cityNo: 38,
},
南通: {
name: '南通市',
province: '江苏省崇川区世纪大道6号',
lat: 31.9830451593,
lon: 120.8905277439,
x: 7659,
level: { level: 3, range: 49, name: '二线城市' },
y: 4574,
cityNo: 39,
},
金华: {
name: '金华市',
province: '浙江省婺城区双龙南街801号',
lat: 29.0812504354,
lon: 119.6427761308,
x: 7440,
level: { level: 3, range: 49, name: '二线城市' },
y: 3910,
cityNo: 40,
},
珠海: {
name: '珠海市',
province: '广东省香洲区人民东路4号',
lat: 22.2738693728,
lon: 113.571087851,
x: 6237,
level: { level: 3, range: 49, name: '二线城市' },
y: 2368,
cityNo: 41,
},
惠州: {
name: '惠州市',
province: '广东省惠城区云山西路6号',
lat: 23.1131954052,
lon: 114.4120214806,
x: 6410,
level: { level: 3, range: 49, name: '二线城市' },
y: 2555,
cityNo: 42,
},
徐州: {
name: '徐州市',
province: '江苏省云龙区昆仑大道1号',
lat: 34.2082085551,
lon: 117.2786162205,
x: 6950,
level: { level: 3, range: 49, name: '二线城市' },
y: 5059,
cityNo: 43,
},
海口: {
name: '海口市',
province: '海南省龙华区港湾路',
lat: 20.0403154771,
lon: 110.31432196,
x: 5550,
level: { level: 3, range: 49, name: '二线城市' },
y: 1880,
cityNo: 44,
},
乌鲁木齐: {
name: '乌鲁木齐市',
province: '新疆维吾尔自治区水磨沟区',
lat: 43.8232927607,
lon: 87.6151718524,
x: 1697,
level: { level: 3, range: 49, name: '二线城市' },
y: 7700,
cityNo: 45,
},
绍兴: {
name: '绍兴市',
province: '浙江省越城区曲屯路286号',
lat: 30.0327950816,
lon: 120.5754158967,
x: 7616,
level: { level: 3, range: 49, name: '二线城市' },
y: 4131,
cityNo: 46,
},
中山: {
name: '中山市',
province: '广东省中山市松苑路1号',
lat: 22.5186232576,
lon: 113.3873460108,
x: 6199,
level: { level: 3, range: 49, name: '二线城市' },
y: 2423,
cityNo: 47,
},
台州: {
name: '台州市',
province: '浙江省椒江区白云山中路233号',
lat: 28.6588485244,
lon: 121.4166457076,
x: 7795,
level: { level: 3, range: 49, name: '二线城市' },
y: 3829,
cityNo: 48,
},
兰州: {
name: '兰州市',
province: '甘肃省城关区南滨河东路637号',
lat: 36.0615359884,
lon: 103.831940499,
x: 4418,
level: { level: 3, range: 49, name: '二线城市' },
y: 5540,
cityNo: 49,
},
潍坊: {
name: '潍坊市',
province: '山东省奎文区胜利东街178号',
lat: 36.7058334553,
lon: 119.1559731161,
x: 7288,
level: { level: 4, range:
最低0.47元/天 解锁文章
扫一扫
2468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
