热力图 (Heatmap) 通过色彩变化来显示数据，热力图适合用来交叉检查多变量的数据。显示是否有彼此相似的变量；以及检测彼此之间是否存在任何相关性。也可以展现随着时间的变化指标的发展。
热力图依赖颜色来表达数值，它比较适合用来显示广泛数值数据，因为要准确地指出色调之间的差异始终有难度，也较难从中提取特定数据点。
与折线图相比，当折线过多的时候，相互之间会受到影响。
热力图的数据构造有点小麻烦，热力点是以类似坐标形式存在的，要先构造出x轴和y轴的坐标，再将热力数据转换成坐标格式。
代码语言：javascript复制@app.route('/getjson9', methods=['GET'])
def getjson9():
# 千万不要先将内部的对象序列化成字符串，然后再序列化外边的对象。
# 再复杂的结构都可以表示为一个dict，
# 而之前不需要做任何序列化操作！！！
# 经过多轮测试，提前序列化会导致很多解析问题！！！
# where year>='2000' and year<='2010'
year = db.session.execute("select distinct year from economyinfo").fetchall()
# yearjson = json.dumps({'year': [x['year'] for x in year]}, ensure_ascii=True)
# yearjsonify = jsonify(year=[x['year'] for x in year])
yearlist = [x['year'] for x in year]
#print(yearlist)
yeardict = {element:i for i, element in enumerate(yearlist)}
# {'1950': 0, '1951': 1, '1952': 2, '1953': 3, '1954': 4, '1955': 5, '1956': 6, '1957': 7, '1958': 8, '1959': 9, '1960': 10,
# '1961': 11, '1962': 12, '1963': 13, '1964': 14, '1965': 15, '1966': 16, '1967': 17, '1968': 18, '1969': 19, '1970': 20,
# '1971': 21, '1972': 22, '1973': 23, '1974': 24, '1975': 25, '1976': 26, '1977': 27, '1978': 28, '1979': 29, '1980': 30,
# '1981': 31, '1982': 32, '1983': 33, '1984': 34, '1985': 35, '1986': 36, '1987': 37, '1988': 38, '1989': 39, '1990': 40,
# '1991': 41, '1992': 42, '1993': 43, '1994': 44, '1995': 45, '1996': 46, '1997': 47, '1998': 48, '1999': 49, '2000': 50,
# '2001': 51, '2002': 52, '2003': 53, '2004': 54, '2005': 55, '2006': 56, '2007': 57, '2008': 58, '2009': 59, '2010': 60}
# where region in ('北京市','天津市','河北省')
region = db.session.execute("select distinct region from economyinfo").fetchall()
# regionjsonify = jsonify(region=[x['region'] for x in region])
# regionjson = json.dumps({'region':[x['region'] for x in region]},ensure_ascii=True)
regionlist = [x['region'] for x in region]
#print(regionlist)
regiondict = {element:i for i, element in enumerate(regionlist)}
# {'北京市': 0, '天津市': 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}
# where region in ('北京市','天津市','河北省') and year>='2000' and year<='2010'
sql = "select year,region,GDP from economyinfo"
sql_data = pd.DataFrame(db.session.execute(sql).fetchall())
sql_data.columns = [i[0] for i in db.session.execute(sql).cursor.description]
# year region GDP
# 0 1950 北京市 -95.00
# 1 1950 天津市 -95.00
# 2 1950 河北省 -95.00
# 3 1950 山西省 -95.00
datadict = sql_data.to_dict('records')
# [{'year': '1950', 'region': '北京市', 'GDP': -95.0},
# {'year': '1950', 'region': '天津市', 'GDP': -95.0},
# ....
# {'year': '1950', 'region': '河北省', 'GDP': -95.0}]
datalist=[[yeardict[gdpdata['year']], regiondict[gdpdata['region']], gdpdata['GDP']] for gdpdata in datadict]
# [[0, 0, -95.0],
# [0, 1, -95.0],
# [0, 2, -95.0]
gdpdata = {}
gdpdata['region'] = regionlist
gdpdata['year'] = yearlist
gdpdata['data'] = datalist
response = jsonify(gdpdata)
#print(gdpdata)
response.status_code = 200 # or 400 or whatever
return jsonify(gdpdata)
@app.route('/echartdemo9')
def echartdemo9():
return render_template('echartdemo9.html')后端数据处理好了，前端代码直接套用就好了
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<!--script src="..staticjsecharts.min.js"></script-->
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.hideLoading();
$.ajax({
url:'/getjson9',
result:{},
type:'GET',
dataType:'json',
success:function(result){
//prettier-ignore
//result={
//'region': ['北京市', '天津市', '河北省'],
//'year': ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
//'data': [[0, 0, 3161.7], [0, 1, 1701.88], [0, 2, 5043.96], [1, 0, 3708.0], [1, 1, 1919.09], [1, 2, 5516.7629], [2, 0, 4315.0], [2, 1, 2150.76], [2, 2, 6018.2817], [3, 0, 5007.2], [3, 1, 2578.03],
// [3, 2, 6921.2895], [4, 0, 6033.2], [4, 1, 3110.97], [4, 2, 8477.63], [5, 0, 6969.5], [5, 1, 3905.64], [5, 2, 10012.11], [6, 0, 8117.8], [6, 1, 4462.74], [6, 2, 11467.6], [7, 0, 9846.8],
// [7, 1, 5252.76], [7, 2, 13607.32], [8, 0, 11115.0], [8, 1, 6719.01], [8, 2, 16011.97], [9, 0, 12153.0], [9, 1, 7521.85], [9, 2, 17235.48], [10, 0, 14113.6], [10, 1, 9224.46], [10, 2, 20394.26]
//]}
const hours = result.year;
// prettier-ignore
const days =result.region
// prettier-ignore
const data = result.data
.map(function (item) {
return [item[0], item[1], item[2] || '-'];
});
myChart.setOption(
(option = {
tooltip: {
position: 'top'
},
grid: {
height: '50%',
top: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
}
},
yAxis: {
type: 'category',
data: days,
axisLabel: {
inside: false,
textStyle: {
color: '#000',
fontSize:'7',
itemSize:''
}
},
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 50000,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [
{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
show: false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
);
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
</script>
</body>
</html>
