echarts熱力地圖

時間 2019-12-08

標籤 echarts 熱力地圖简体版

原文原文鏈接

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>日誌分析</title>
    <div th:replace="head"></div>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords"
          content="Classic Weather Widget Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design">
</head>
<body>
<!--爲ECharts準備一個具有大小（寬高）的Dom-->
<div id="main" style="width: 1000px;height:600px;margin-left: 20px"></div>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    var geoCoordMap = {};
　　//後臺返回的數據
    var infoData = [];
    var option = {};
    $(function () {
        $.ajax({
            type: 'GET',
            url: 'admin/cityInfo',
            dataType: 'JSON',
            success: function (res) {
                if(res.code !="000"){
                    return;
                }
                geoCoordMap = res.data.cityInfo;
                infoData = res.data.cityLog;
                // 指定圖表的配置項和數據
                option = {
                    title: {
                        text: '主要訪問城市',
                        subtext: '',
                        //sublink: 'http://www.pm25.in',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    backgroundColor: '#404a59',
                    visualMap: {
                        min: 0,
                        max: 1000,
                        splitNumber: 5,
                        inRange: {
                            color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: [{
                        name: 'AQI',
                        type: 'heatmap',
                        coordinateSystem: 'geo',
                        data:convertData(infoData)

                    }]
                };
                // 使用剛指定的配置項和數據顯示圖表。
                myChart.setOption(option);
            }
        });
    })

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push(geoCoord.concat(data[i].value));
            }
        }
        return res;
    };



</script>
</body>
</html>

<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/heatmap.js/2.0.2/heatmap.min.js"></script>
<script th:src="@{/js/china.js}"></script>

china.js文件javascript

連接：https://pan.baidu.com/s/1ibRWTvWPc-MyASCmUvBlhw
提取碼：su7j
css

city經緯度 sqlhtml

連接：https://pan.baidu.com/s/1sez_HKyDYIJeAaqzzBgpgw
提取碼：g7tk java

city經緯度 jsonajax

連接：https://pan.baidu.com/s/1l_sjybO7-Vv1F7aXQAjo-g
提取碼：x26p
參考： https://blog.csdn.net/gongchengshiv/article/details/77775020sql