前端(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代码如下:
PM2.5浓度监测热力图
网页出图如下:
可以点右上角“SaveAsImage”保存图片到桌面。