前端（html）用Echarts画热力图——json数据格式

一、官网下载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代码如下：

网页出图如下：

可以点右上角“SaveAsImage”保存图片到桌面。