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

艺霖树洞

已于 2023-11-02 15:52:39 修改

阅读量1.6k

点赞数 1

文章标签： javascript echarts 前端 python json

于 2023-11-02 14:19:46 首次发布

本文链接：https://blog.csdn.net/pi_pi_lin/article/details/134175870

版权

一、官网下载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”保存图片到桌面。

艺霖树洞

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端（html）用Echarts画热力图——json数据格式

数据是很多的，一个个输入不现实。需要把数据格式从excel转换成json格式。从而可以直接被html用“script”引用。orient ='records' 输出的json文件是“键值对”形式。PM2.5监测数据：一个月30天，8:00——18:00监测。可以点右上角“SaveAsImage”保存图片到桌面。用VS code、PhpStorm等编辑器均可。放在同级目录下，路径就写文件名即可。”文件会直接出现在左侧同级目录里。图2-1 监测数据excel表。行是正常的，生成的“
复制链接

扫一扫