echarts-map 地圖打點小案例


背景:初用echarts看官網的實例,可能對初學者有難度,整理下,來個簡單的打點實例。

 //頁面上給echarts一個容器

var myChart0 = echarts.init(document.getElementById('map')); 

var geoCoordMap = { //這里放你打點的坐標信息,虛擬信息
    '青島':[119.84348,35.819467,'青島',12],
    '即墨市人民政府':[20.453685,36.395272,'即墨市人民政府',11],
    '市委政府':[120.19013,36.073168,'市委政府',11],
    '青島大學':[120.429622,36.377366,'青島大學',11],
    '青島北站':[120.380868,36.175683,'青島北站',11],
    '火車站':[120.409743,36.065352,'火車站',11],
    '嶗山':[120.633966,36.197331,'嶗山',11],
    '城陽區政府':[120.402787,36.313572,'城陽區政府',11],
    '快船客運中心': [120.322429,36.07961,'快船客運中心',11],
    '青島國際機場': [120.390628,36.273579,'青島國際機場',11],
    '膠州站': [120.00486,36.305696,'膠州站',11],
    '青島站': [120.319626,36.070333,'青島站',11],
    '萊西站': [120.523721,36.817047,'萊西站',11],
    '平度火車站': [119.892033,36.769939,'平度火車站',11],
    '萊西市政府': [120.52329,36.895417,'萊西市政府',11]
};

//下邊就是個普通的函數編程了,直接賦給變量。
var convertData = function(data) {
var res = [];
for (a in data) {
    res.push({
    name:a,value:data[a]
    });
          }
            return res;
     };
option0 = {
title:{
text: '打點',
x: '30%',
y:'0%',
textStyle:{
color: '#fff',
fontFamily: 'Microsoft YaHei'
}
},
    backgroundColor: '',
    tooltip : {
padding : 10,
backgroundColor : '#222',
borderColor : '#777',

borderWidth : 1,

//formatter有字符串模板,跟回調函數,這里的obj就是下邊series.data里的數據。

formatter : function(obj) { //
var value = obj.value;

return '<div style="border-bottom: 1px solid rgba(255,255,255,.3);'

                                +'font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'

+ '地點:'
+ value[2]
+ '<br>'
+ '人數:'
+ value[3]
+ '<br>';
}
},
    geo: {
        map: 'qingdao', //青島的地圖要准備好
        label: {
            emphasis: {
                show: false
            }
        },
        zoom:1.1,
        left:'33%',
        roam: false,
        itemStyle: {    //地圖顏色
            normal: {
                areaColor: '#5fc9f8',
                borderColor: '#9be4ff'
            },
            emphasis: {
                areaColor: '#43b9f6'
            }
        }
    },
    series : [
        {
            name: '重點人員監控',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(geoCoordMap),
            symbolSize: 10,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {    //打點的顏色
                normal: {
                    color: '#fecb2e',
                    shadowBlur: 10,
                    shadowColor: '#0d5ebd'
                }
            },
            zlevel: 1
        }
    ]
};
myChart0.setOption(option0);
$(window).resize(function() {
    myChart0.resize(); 

});

看下效果


個人觀點,歡迎指正

本人原創,未經允許,禁止轉載


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com