Echarts — 可视化练习（热力图heatmap）

Echarts — 可视化练习（热力图heatmap）

Echarts — 可视化练习（热力图heatmap）

不要强迫自己什么事情都要做对，因为有时候，犯错能让我们变得更好。不要尝试去弄清每件事，因为有时候一些事情不是用来理解的，而是要懂得接受它们。因为你自卑，所以你自尊心强，所以你多疑敏感，所以你缺乏安全感，所以你控制欲强，所以你占有欲强，所以你的小心思很多，所以你的烦恼也不少。

Flask

import pandas as pdfrom flask import Flask,render_templatefrom flask_sqlalchemy import SQLAlchemy# 创建并实例化Flask对象app = Flask(__name__)class Config(object): SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:123456@127.0.0.1:3306/visiable' SQLALCHEMY_TRACK_MODIFICATIONS = Trueapp.config.from_object(Config)# 视图@app.route('/')def index(): return render_template("heatmap01.html")# 运行if __name__ == '__main__': app.run(debug=True)

HTML

效果展示

heatmap样例展示

知识点小总结

个人理解：热力图就是以类似地图的样式，将数据的分布情况进行展示，可以直观的看出数据分分布密集程度以及数据种类的差异。既然是以地图的形式，那理论上就有经纬度。在这里，使用 X、Y 轴代替，同样都是使用坐标的形式定位。与其他图的不同处在于，横纵坐标均是类目，增加了splitArea属性进行区域划分。

visualMap: { min: 0, max: 10, calculable: true, orient: 'horizontal', // 热力分布标签布局 left: 'center', bottom: '15%'},

视觉映射组件中，定义组件允许的最大、最小值，calculable — 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。

data = [[0, 0, 5], [0, 1, 1], [0, 2, 0]...]// 转换提取数据总集 --- 遍历// || '-' 标记0// [0, 0, 5] =》 item data = data.map(function (item) { return [item[1], item[0], item[2] || '-']; });

data在进行转换提取时将每个item中的数据前两个换了位置，以对应x、y轴。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。