echarts熱力地圖

本文轉載自查看原文 2019-06-14 16:56 1080

<!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文件

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

city經緯度 sql

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

city經緯度 json

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue 使用 Echarts 顯示熱力地圖信息 echarts地圖可視化大屏熱力圖在Arcgis地圖上繪制Echarts熱力圖(Heatmap) react項目結合echarts,百度地圖實現熱力圖 echarts畫熱力圖如何在vue項目中使用echarts和高德地圖繪制折線和熱力圖 ECharts-熱力圖實例 tableau繪制熱力地圖 echarts 地圖 echarts地圖