Echarts制作省份地圖

最近做項目要用到echarts制作省份氣泡地圖混萝,現(xiàn)在來分享一下

做地圖首先要有想要做那個地圖的json薄坏,這里給大家一個最全地圖json的鏈接
http://datav.aliyun.com/tools/atlas/#&lat=31.87755764334002&lng=104.150390625&zoom=3
里面有你所需要的各省級蚂子,市級地圖

在箭頭指向的地方搜索你需要的地圖板塊绅这,紅色框框里的json地址是你需要地圖板塊中的板塊赔桌,如果只需要地圖形狀的話可以選擇上面那個

下面我來貼一下代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="width: 800px;height: 800px;"></div>
    <!--你所需要的盒子大小-->
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<!--引入jquery和echarts的js-->
<script>
//這是你地圖上顯示的數(shù)據(jù)
    var dataJson=[
        {name: '上城區(qū)',value: 100 },{name: '下城區(qū)',value: 450 },  
        {name: '西湖區(qū)',value: 345 },{name: '拱墅區(qū)',value: 535 },  
        {name: '江干區(qū)',value: 320 },{name: '濱江區(qū)',value: 234 },  
        {name: '蕭山區(qū)',value: 189 },{name: '余杭區(qū)',value: 99 },  
        {name: '富陽區(qū)',value: 79 },{name: '臨安區(qū)',value: 190 },  
        {name: '桐廬縣',value: 390 },{name: '淳安縣',value: 360 },
        {name: '建德市',value: 269 },
    ];
//獲取杭州市的地圖信息
window.onload = function GetGeoMap() {
    var geoJson = null;
    var url = "js/full.json";
    MapChart.showLoading();
    $.get(url, null, function (ret) {
        geoJson = ret;
        loadMap(geoJson);
    });
}
//初始化地圖容器
var MapChart = echarts.init(document.getElementById('main'));
//設(shè)置地圖瓢剿。
var loadMap = function (geoJson) {
    echarts.registerMap('tianjin', geoJson);
    MapChart.hideLoading();
    var data = dataJson;
    //var xData = [];
    //for (var i = 0; i < data.length; i++) {
    //    xData.push(data[i].value);
    //}
    //氣泡點的位置
    var geoCoordMap = {
            '上城區(qū)':[120.171465,30.215236],
            '下城區(qū)':[120.172763,30.326271],
            '西湖區(qū)':[120.027376,30.132934],
            '拱墅區(qū)':[120.204053,30.374697],
            '江干區(qū)':[120.362633,30.276603],
            '濱江區(qū)':[120.198623,30.166615],
            '蕭山區(qū)':[120.150693,29.962932],
            '余杭區(qū)':[119.801737,30.421187],
            '富陽區(qū)':[119.949869,29.849871],
            '臨安區(qū)':[119.315101,30.231153],
            '桐廬縣':[119.585045,29.797437],
            '淳安縣':[118.624346,29.404177],
            '建德市':[119.279089,29.472284],
    }
    //計算氣泡大小的依賴
    //xData.sort(function (a, b) {
    //    return a - b;
    //});
    //var min = xData[0], max = xData[xData.length - 1];
   //var maxSize4Pin = 100, minSize4Pin = 20;

    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;
    };
    var option = {
        tooltip: {
            trigger: 'item',
            //鼠標放上去顯示的數(shù)據(jù)和文字
            formatter: function (params) {
                if (typeof (params.value)[2] == "undefined") {
                    return params.name + ' : ' + params.value;
                } else {
                    return params.name + ' : ' + params.value[2];
                }
            }
        },
        //在地圖旁顯示的數(shù)據(jù)
        visualMap: {
            show: false,
            type: 'piecewise',
            pieces: [
                { min: 600 },
                { min: 400, max: 599 },
                { min: 300, max: 399 },
                { min: 200, max: 299 },
                { min: 100, max: 199 },
                { min: 0, max: 99 },
                // {min:0,max: 2000},
                // {max:100}// 不指定 min悍手,表示 min 為無限大(-Infinity)帘睦。
            ],
            calculable: true,
            seriesIndex: [1],
            //顏色分類
            inRange: {
                color: ['#9fb5ea','#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', ]
            }
        },
        geo: {
            show: true,
            map: 'tianjin',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            //鼠標是否支持縮放
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                emphasis: {
                    areaColor: '#56ddff', //鼠標放上去的亮色
                }
            }
        },
        series: [
            {
                name: 'credit_pm2.5',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                //計算氣泡大小
                symbolSize: function (val) {
                    //根據(jù)數(shù)據(jù)調(diào)整氣泡大小
                    //var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    //var b = minSize4Pin - a * min;
                    //b = maxSize4Pin - a * max;
                    //return a * val[2] + b;

                    //自定義氣泡大小
                    return 5;
                },
                label: {
                    //鼠標放上去顯示的文字和數(shù)據(jù)
                    normal: {
                        formatter: '',
                        position: 'right',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        areaColor: '#FBE805',
                        // borderColor: '#FBE805',
                    },
                    emphasis: {
                        areaColor: '#FBE805'
                    }
                },

            },
            {
                type: 'map',
                map: 'tianjin',
                geoIndex: 0,
                aspectScale: 0.75, //長寬比
                showLegendSymbol: false, // 存在legend時顯示
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: '點',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                data: convertData(data),
                symbolSize: function (val) {
                    // var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    // var b = minSize4Pin - a * min;
                    // b = maxSize4Pin - a * max;
                    // return a * val[2] + b;//計算并返回氣泡大小
                    return 40;
                },
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            if (typeof (params.value)[2] == "undefined") {
                                return params.value;
                            } else {
                                return params.value[2];
                            }
                        },
                        textStyle: {
                            color: '#fff',//文字顏色
                            fontSize: 9,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#2080F7', //標志顏色
                    }
                },
                zlevel: 6,
               
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 1)),
                symbolSize: function (val) {
                    return 5;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '坦康',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        shadowBlur: 10,
                        shadowColor: '#dece00'
                    }
                },
                zlevel: 1
            },

        ]
    };

    MapChart.setOption(option);
}
</script>
</html>

最后效果如下圖:


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末竣付,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子滞欠,更是在濱河造成了極大的恐慌古胆,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件筛璧,死亡現(xiàn)場離奇詭異逸绎,居然都是意外死亡,警方通過查閱死者的電腦和手機夭谤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門棺牧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人朗儒,你說我怎么就攤上這事颊乘。” “怎么了采蚀?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵疲牵,是天一觀的道長。 經(jīng)常有香客問我榆鼠,道長纲爸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任妆够,我火速辦了婚禮识啦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘神妹。我一直安慰自己颓哮,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布鸵荠。 她就那樣靜靜地躺著冕茅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上姨伤,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天哨坪,我揣著相機與錄音,去河邊找鬼乍楚。 笑死当编,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的徒溪。 我是一名探鬼主播忿偷,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼臊泌!你這毒婦竟也來了鲤桥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤缺虐,失蹤者是張志新(化名)和其女友劉穎芜壁,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體高氮,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年顷牌,在試婚紗的時候發(fā)現(xiàn)自己被綠了剪芍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡窟蓝,死狀恐怖罪裹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情运挫,我是刑警寧澤状共,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站谁帕,受9級特大地震影響峡继,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜匈挖,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一碾牌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧儡循,春花似錦舶吗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春腹侣,著一層夾襖步出監(jiān)牢的瞬間呵扛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工筐带, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留今穿,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓伦籍,卻偏偏與公主長得像蓝晒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子帖鸦,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361