echarts基本地圖

echarts基本地圖

var data = [
     {name: '杭州', value: 250}
];
var geoCoordMap = {
    '杭州':[120.19,30.26]
};

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: '#404a59',
    //標題
    title: {
        text: '測試',
        subtext: '',
        sublink: '',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    //鼠標懸浮顯示值
    tooltip : {
        trigger: 'item',
        show:false
    },

    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false//顯示區域位置
            }
        },
        roam: true,//縮放和平移
        itemStyle: {
            //常態
            normal: {
                areaColor: '#323c48',//地圖區域的顏色
                borderColor: '#111'//圖形的描邊顏色
            },
            //高亮狀態
            emphasis: {
                areaColor: '#2a333d'//圖形的顏色
            }
        }
    },
    series : [
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            //點大小
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',//繪製完成後顯示波紋
            rippleEffect: {
                period:1,//動畫速度
                scale:2,//波紋的範圍
                brushType: 'fill'//波紋樣式(fill填充型)
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',//圓顏色
                    shadowBlur: 10,
                    shadowColor: '#333'//陰影
                }
            },
            zlevel: 1
        }
    ]
};
發佈了47 篇原創文章 · 獲贊 50 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章