用echart玩點好玩的--酷炫熱力圖

lightTrace發表於2019-03-19

先bb兩句

首先承認酷炫是標題黨，哈哈哈，參考了echart的官網開發示例，對一些樣式做了自己的改動，變得稍微極客一點，另外在html中使用了ajax獲取現成json資料，如果你有介面的話可以直接請求介面！

上效果圖

在這裡插入圖片描述
其中氣泡的大小和顏色都是根據各省不同的人數來展示，顏色還可以你自己調整成你認為好看的，波紋是動態的輻射，感覺做的很low，直接用的官方文件調整的，應該有更帥的。

程式碼

地址：https://github.com/lightTrace/echart/tree/master/hotMap

程式碼所依賴的全部官方檔案都有的，可以在idea直接open in browser選擇瀏覽器直接開啟hotmap.html即可看到效果，直接開啟是不行的，因為加入了ajax呼叫，或者部署到nginx上面也行。

走過路過的點個讚唄

hotmap.html簡單說說

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts</title>
    <link rel="stylesheet" type="text/css"/>
    <script src="gf-js/jquery.min.js"></script>
    <script src="gf-js/echarts.js"></script>
    <script src="gf-js/china.js"></script>
    <style>#china-map {width:100%; height: 100%;margin: auto;}</style>
</head>
<body>

<div id="china-map"></div>

<script>
    var province = "河北省、山西省、遼寧省、吉林省、黑龍江省、江蘇省、浙江省、安徽省、福建省、江西省、山東省、河南省、湖北省、湖南省、廣東省、海南省、四川省、貴州省、雲南省 、陝西省 、甘肅省、青海省、臺灣省、西藏自治區、廣西壯族自治區、內蒙古自治區、寧夏回族自治區、新疆維吾爾自治區、北京市、上海市、天津市、重慶市、香港、澳門"
    var ajaxReqs = null;
    function reqs() {
        if(ajaxReqs !== null) {
            ajaxReqs.abort();
            ajaxReqs = null;
        }
        var data=[]
        var geoCoordMap={}
        var max = 0,
        min = 1000; // min,max為了自動計算出人數最多的省和最小的省從而自動分配顏色
        var maxSize4Pin = 55,
        minSize4Pin = 35;
        $.ajax({
            type : "GET",
            // url : "http://192.168.2.184:9001/collect/region",
            url:"./data.json",
            async: false,
            dataType : "json",
            cache:false,
            success : function (datas) {
                list = datas.data.list
                $.each(list, function (i, item) {
                        if(province.indexOf(item.region)!=-1)
                        {
                            if(max < item.activityNumber){
                                max = item.activityNumber
                            }
                            if(min > item.activityNumber){
                                min = item.activityNumber
                            }
                            data.push({
                                name: item.region,
                                value: item.activityNumber
                            })
                            var point = []
                            point.push(item.lng, item.lat)
                            geoCoordMap[item.region]=point
                        }
                });
            }
        });
        console.log(min)
        console.log(max)
    $('#china-map').width($('#china-map').width());
    $('#china-map').height($('#china-map').width());
    var myChart = echarts.init(document.getElementById('china-map'));
    var name_title = ''
    var subname = ''
    var nameColor = '#2880fc'
    var name_fontFamily = '宋體'
    var subname_fontSize = 15
    var name_fontSize = 25
    var mapName = 'china'
    /*獲取地圖資料*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        };
        option = {
            backgroundColor: 'rgba(29, 52, 108, 1)',
            title: {
                text: name_title,
                subtext: subname,
                x: 'left',
                y:'200px',
                textStyle: {
                    color: nameColor,
                    fontFamily: name_fontFamily,
                    fontSize: name_fontSize
                },
                subtextStyle:{
                    fontSize:subname_fontSize,
                    fontFamily:name_fontFamily
                }
            },
            visualMap: {
                show: false,
                min: min,
                max: max,
                left: 'left',
                top: 'bottom',
                color: '#b70d05',
                text: ['高', '低'], // 文字，預設為數值文字
                calculable: true,
                seriesIndex: [1],
                inRange: {
                    color: ['#00467F', '#A5CC82','#c3fc0a','#fca80d', '#cc0529'] // 地圖不同省份填充的顏色
                }
            },
            geo: {
                show: true,
                map: mapName,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                    }
                },
                roam: true,  //地圖是否可以縮放
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#00effc',
                    },
                    emphasis: {
                        areaColor: '#2B91B7',
                    }
                },
                regions: [
                    {
                        name: '南海諸島',
                        value: 0,
                        itemStyle: {
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false
                                }
                            }
                        }
                    }
                ]
            },
            series: [{
                name: '散點',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function(val) {
                    return 1;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#05C3F9'
                    }
                }
            },
                {
                    type: 'map',
                    map: mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //長寬比
                    showLegendSymbol: true, // 存在legend時顯示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                {
                    name: '點',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin', //氣泡
                    effectType: 'ripple',
                    animation: true,
                    rippleEffect: {
                        period: 5,
                        scale: 1.5,
                        brushType: 'stroke'
                    },
                    symbolSize: function(val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a * min;
                        b = maxSize4Pin - a * max;
                        return a * val[2] + b;
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter:'{@[2]}',  //這裡加這個是防止echart地圖載入資料載入氣泡的數值載入成緯度，這個bug很尷尬
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F62157', //標誌顏色
                        }
                    },
                    zlevel: 6,
                    data: convertData(data),
                },
            ]
        };
        myChart.setOption(option);
    }
    reqs();
    setInterval(reqs, 3000);
</script>

</body>
</html>

發現沒什麼好說的，程式碼很簡單，註釋也有，主要我寫的菜，請大家諒解，起碼提供了官方下載檔案，哈哈哈，後面學習下可能會做一點更酷的。

相關文章