前端（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-8import pandas as pddf =pd.read_excel('date-hour-PM2.5.xlsx')print(df.head())data = df.to_json(orient='records')import jsonwith open('date-hour-PM2.5.json','w') as f:json.dump(data,f)

orient =’records’ 输出的json文件是“键值对”形式。

运行结果：

只显示 5 行是正常的，生成的“.json”文件会直接出现在左侧同级目录里。

三、html引用json格式的数据画图

用VS code、PhpStorm等编辑器均可。

html代码如下：

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])

网页出图如下：

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