首页 前端知识 前端(html)用Echarts画热力图——json数据格式

前端(html)用Echarts画热力图——json数据格式

2024-02-02 09:02:28 前端知识 前端哥 314 586 我要收藏

一、官网下载echarts.js文件

1.1 Echart官网:下载 - Apache ECharts

52109329ff614d189429faacc4f7f5f4.jpeg

 1.2 将下载后的echarts.js文件拽到html文件同一目录下

0348df86f31c4c15b60955261c87ed91.jpeg

二、用Python实现数据文件格式转换(.xlsx—.json)

2.1 转换数据格式的原因

PM2.5监测数据:一个月30天,8:00——18:00监测。

数据是很多的,一个个输入不现实。需要把数据格式从excel转换成json格式。从而可以直接被html用“script”引用。

ad2b43ff8cd241fb9523619eb6611e68.jpeg

图2-1 监测数据excel表

2.2 Python进行格式转换

放在同级目录下,路径就写文件名即可。

99613414c5f5488182cd641ea542f434.jpeg

代码如下:

# 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文件是“键值对”形式。

运行结果:

d48267902098470391c63797d8e09db3.jpeg

只显示 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>

网页出图如下:

edc6704700c44d8b8ec38b497cd11074.png

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1095.html
标签
jsonpython
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!