首先,需要准备好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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录