1.新建index.js
npm init -y
执行上述命令，极简初始化一个package.json文件。
2.安装cheerio
npm install --save cheerio
3.爬取网页源码中数据
//网络请求包requests
let requests = require('requests')
//文件操作包fs
let fs = require('fs')
//路径辅助
let path = require('path')
//js中通过div的id获取网页源码
const cheerio = require('cheerio')
requests('https://ncov.dxy.cn/ncovh5/view/pneumonia')
.on('data', function (chunk) {
//无window,初始化一个
let window = {}
//加载HTML,传入的chunk为请求网页源码
const $ = cheerio.load(chunk)
//eval(string),将string作为js代码执行
//$( selector, [context], [root] )
//运行id为getAreaStat这段html代码
eval($('#getAreaStat').html())
//__dirname当前目录，data.json文件名
fs.writeFile(path.resolve(__dirname, 'data.json'),
//写入内容为转化为json对象的window.getAreaStat
JSON.stringify(window.getAreaStat),
() => {
console.log('成功');
}
)
})node index.js
执行完上述命令，index.html同级目录下会出现一个data.json，备用
4.解析数据，交echarts显示
npm install --save echarts
安装后到node_modules中找到新安装好的echarts包，把echarts.min.js拿出来，在index.html中引入使用。还要拿其中map文件夹下的china.js，作为地图源。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>疫情</title>
<script src="js/echarts.min.js"></script>
<script src="map/china.js"></script>
</head>
<body>
<div id="main" style="width: 1800px;height:1200px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
//从json中map出自己需要的信息数组,交给data
fetch('data.json').then(res => res.json()).then(res => {
let data = res.map(r => {
return {
name: r.provinceShortName,
value: [r.currentConfirmedCount, r.confirmedCount, r.deadCount]
}
})
var option = {
title: {
text: 'ECharts'
},
//视觉映射显示
visualMap: {
//以value[0]为显示依据
dimension: 0
},
//提示
tooltip: {
//提示框内容
//当鼠标放上去时，会得到该省份对应的对象
formatter(data) {
return `
${data.data.name}<br>
当前确诊：${data.data.value[0]}<br>
累计确诊：${data.data.value[1]}<br>
累计死亡：${data.data.value[2]}<br>
`
},
//提示框背景颜色
backgroundColor: 'rgba(0,0,0,1)',
},
legend: {},
series: [{
name: '疫情地图',
type: 'map',
//对应引入的地图名
map: 'china',
//数据对象
data,
//地图上的小红点
showLegendSymbol: false
}]
};
myChart.setOption(option);
})
</script>
</body>
</html>至此完成。