直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ref="fymapbox" style="height: 800px; width: 50%" class="fymp" id="main"></div>
</body>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.js.map"></script> -->
<script src="./echarts/dist/echarts.js"></script>
<script src="./echarts/map/js/china.js"></script>
<script>
// 每一小时获取一次
let yqTime = setInterval(function () {
let fyTime = new Date().valueOf();
}, 3600000);
const option = {
title: {
text: "最新疫情地图", //显示标题
textStyle: {
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
series: [{
name: "确诊人数", //鼠标移动提示文字
type: "map",
map: "china", //渲染中国地图
label: {
//控制显示对于地区的汉字
show: true,
color: "#545454", //控制地区名的字体颜色
fontSize: 10
},
itemStyle: {
areaColor: "#fff", //设置地图背景色
borderColor: "#33ccff", //设置地图边线颜色
},
roam: false, //支持滚轮放大缩小 以及拖拽
zoom: 1.2, //控制地图的放大和缩小
emphasis: {
//控制鼠标滑过之后的背景色和字体颜色
label: {
color: "#000",
fontSize: 12,
},
itemStyle: {
areaColor: "#33ccff",
borderColor: "#33ccff",
},
},
data: [],
}, ],
visualMap: [{
type: "piecewise",
show: true,
itemWidth: 10,
itemHeight: 10,
left: "left",
textGap: 1,
itemGap: 2,
pieces: [
//分段
{
min: 10000
},
{
min: 1000,
max: 9999
},
{
min: 100,
max: 999
},
{
min: 10,
max: 99
},
{
min: 0,
max: 9
},
{
min: 0,
max: 0
},
],
// orient:'horizontal', //修改横向显示 默认垂直显示
inRange: {
symbol: "rect", //显示数据方块小图标形状
color: ["#e2ecf5", "#ed4343"], // 显示颜色
},
}, ],
};
window.onload = function () {
var mychart = echarts.init(document.getElementById('main'));
$.ajax({
url: `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
success: function (res) {
console.log(res);
let list = res.data.list.map((item) => ({
name: item.name,
value: item.econNum,
}));
option.series[0].data = list; //将数据赋给series里面的data然后进行渲染
mychart.setOption(option);
}
});
};
</script>
<style>
.fymp {
background-color: #ffffff;
border: 1px solid #bbb;
border-radius: 10px;
}
.title {
font-weight: 600;
font-size: 0.5rem;
}
</style>
</style>
</html>
引入了两个文件echart.js和China.js，有需要的小伙伴可以自己下载引入哦，注意下载好了，记得改引入路径.
链接：https://pan.baidu.com/s/16lUZipa6ZD-EQ-Fpk6U-uQ
提取码：yytt