使用Echarts
官方地址
新版本注意
/*
原本用npm i echarts 下载 echarts 在他的包力会携带地图geojson可以理解为要把地图显示出来就需要有他的geojson(注册一下)
*/
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>小尤地图</title>
</head>
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
<body>
<div id="main" style="width: 1300px;height:600px;"></div>
</body>
<script src="1.js"></script>
</html>
1.js
/*
@1 这个是地图的数据 我把他下到本地了
@2 当然也可以用网络地址直接获取
地图选择器 https://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
*/
var ROOT_PATH = "./china.json";
// 固定步骤
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
//显示一个内置的加载动画
myChart.showLoading();
function render() {
return new Promise((resovle) => {
$.get(ROOT_PATH, function (usaJson) {
//隐藏一个内置的加载动画
myChart.hideLoading();
//算是注册一下地图 此处要和下面series.map值相同
echarts.registerMap('china', usaJson, {});
option = {
title: {
text: '中国疫情情况图',
left: 'center'
},
//提示框组件 鼠标放上去的提示框
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
//图例
visualMap: {
pieces: [
{ min: 40 },
{ min: 20, max: 40 },
{ min: 10, max: 20 },
{ min: 5, max: 10 },
{ min: 1, max: 5 },
{ max: 0 },
],
hoverLink: true,
},
//导出工具
toolbox: {
show: true,
left: 'left',
top: 'top',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
//内容主体
series: [
{
name: 'china',
//类型是map
type: 'map',
roam: true,
map: 'china',
//地图上每个区域的设置
label: {
show: true,
},
align: 'center',
//获得焦点时的样式设置
emphasis: {
itemStyle: {
areaColor: 'red'
}
},
zoom: 1.8,
top: 195,
//根据这个数据进行渲染
data:[]
}
]
};
resovle();
myChart.setOption(option);
});
})
}
// 请求疫情数据
axios.get('./zhongguo.json').then((res) => {
render().then(() => {
let renderData = res.data.data.areaTree.filter((item) => {
return item.name =='中国';
})
renderData = renderData[0].children.map((item) => {
return {
name: item.name ,
value: item.total.confirm - item.total.heal - item.total.dead || 0,
locationId: item.id
}
})
console.log(renderData);
option.series[0].data = renderData;
//重新渲染上去
myChart.setOption(option);
});
})
// 点击事件
myChart.on('click', function (params) {
console.log(params.data.locationId, option.series[0].data);
ROOT_PATH = `https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=${params.data.locationId}_full`;
update();
});
option && myChart.setOption(option);
