Django Echarts 中国地图可视化:全国平均气温展示
首先,需要准备好echarts依赖库和中国地图的JSON数据文件。可以从echarts官网下载,也可以使用CDN方式引入。
其次,在Django模版中引入echarts库和中国地图JSON数据文件。
然后,编写JavaScript代码,使用echarts提供的API绘制中国地图,并将平均气温数据与地图数据绑定在一起。
最后,在Django视图函数中获取平均气温数据,将数据传递给模版,渲染模版并展示可视化结果。
以下是示例代码:
模版代码:
{% extends 'base.html' %}
{% block content %}
<div id='main' style='height:600px;'></div>
{% endblock %}
{% block script %}
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js'></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.getJSON('/get_data/', function (data) {
myChart.hideLoading();
echarts.registerMap('china', data.map);
myChart.setOption({
title: {
text: '全国平均气温',
left: 'center',
top: 'top',
textStyle: {
color: '#333',
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c}℃'
},
visualMap: {
min: -10,
max: 30,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#ffffff', '#ff3333']
}
},
series: [
{
name: '全国平均气温',
type: 'map',
mapType: 'china',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: data.temp
}
]
});
});
</script>
{% endblock %}
视图函数代码:
from django.shortcuts import render
import json
def get_data(request):
# 获取平均气温数据
temp = {
'北京': 15,
'天津': 14,
'上海': 18,
'重庆': 20,
'河北': 12,
'河南': 14,
'云南': 18,
'辽宁': 12,
'黑龙江': 8,
'湖南': 16,
'安徽': 14,
'山东': 14,
'新疆': 5,
'江苏': 15,
'浙江': 17,
'江西': 16,
'湖北': 16,
'广西': 20,
'甘肃': 10,
'山西': 12,
'内蒙古': 6,
'陕西': 12,
'吉林': 8,
'福建': 18,
'贵州': 18,
'广东': 20,
'青海': 5,
'西藏': 1,
'四川': 20,
'宁夏': 8,
'海南': 22,
'台湾': 22,
'香港': 22,
'澳门': 22
}
# 读取中国地图JSON数据
with open('echarts-china-provinces-simple.json', 'r', encoding='utf-8') as f:
map_json = json.load(f)
data = {
'temp': [{'name': k, 'value': v} for k, v in temp.items()],
'map': map_json
}
# 返回JSON格式数据
return JsonResponse(data)
原文地址: https://www.cveoy.top/t/topic/m9EV 著作权归作者所有。请勿转载和采集!