一、官网下载echarts.js文件
1.1 Echart官网：下载 - Apache ECharts
1.2 将下载后的echarts.js文件拽到html文件同一目录下
二、用Python实现数据文件格式转换（.xlsx—.json）
2.1 转换数据格式的原因
PM2.5监测数据：一个月30天，8:00——18:00监测。
数据是很多的，一个个输入不现实。需要把数据格式从excel转换成json格式。从而可以直接被html用“script”引用。
图2-1 监测数据excel表
2.2 Python进行格式转换
放在同级目录下，路径就写文件名即可。
代码如下：
# coding: utf-8
import pandas as pd
df =pd.read_excel('date-hour-PM2.5.xlsx')
print(df.head())
data = df.to_json(orient='records')
import json
with open('date-hour-PM2.5.json','w') as f:
json.dump(data,f)orient ='records' 输出的json文件是“键值对”形式。
运行结果：
只显示 5 行是正常的，生成的“.json”文件会直接出现在左侧同级目录里。
三、html引用json格式的数据画图
用VS code、PhpStorm等编辑器均可。
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="echarts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PM2.5浓度监测热力图</title>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 700px;height: 750px;"></div>
<script type="text/javascript">
var myCharts = null;
var hours = ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'];
var days = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
'12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30'];
let jsonFiles = ['data_change.json'];
function getJsonData(path) {
var xmlhttp = new XMLHttpRequest();
var url = path;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText); // 这里便是获取到的 json 数据
initEchart(JSON.parse(myArr)); //
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction(arr) {
console.log(arr); // 这里控制台打印获取到的 json 数据
}
function initEchart(data) {
console.log(data, Object.prototype.toString.call(data))
if (!myCharts) {
//基于准备好的DOM，初始化ECharts实例
myCharts = echarts.init(document.getElementById('main'));
}
let mapData = [];
data.forEach( (y,i) => {
hours.forEach(x => {
mapData.push([x, days[i], y[x]])
})
})
console.log('mapData', mapData)
option = {
tooltip: {
position: 'top'
},
toolbox:{
show:true,
feature:{
mark : {show:true},
dataView:{show:true},
magicType:{show:true, type:['line','heatmap']},
restore:{},
saveAsImage:{}
}
},
title:{
text:'PM2.5浓度监测',
subtext:'热力图',
left:'center'
},
Animation: false,
grid: {
height: '50%', //控制热力图纵向宽度占比
top: '8%' //热力图距离上部百分比
},
xAxis: {
name:'小时（点）',
type: 'category',
data: hours, //小时作为横轴
splitArea: {
show: true
}
},
yAxis: {
name:'日期（天）',
type: 'category',
data: days, //星期作为纵轴
splitArea: {
show: true
}
},
visualMap: {
min: 80, //滑动条的最小值
max: 1165, //滑动条的最大值
calculable: true, //滑动条显示数值
orient: 'horizontal', //滑动条水平放置，默认竖直放置
left: 'center', //滑动条居中
bottom: '28%' //滑动条距离底部百分比距离
},
series: [
{
name: 'PM2.5浓度监测',
type: 'heatmap', //热力图
data: mapData,
label: {
show: true //热力图显示数值
},
emphasis: { //鼠标悬停在热力图块时突出显示
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myCharts.setOption(option)
}
getJsonData(jsonFiles[0])
</script>
</body>
</html>
网页出图如下：
可以点右上角“SaveAsImage”保存图片到桌面。
