Echarts地圖展示及屬性分析

Echarts，一個效果非常棒的可視化庫，可以生產各種圖表，動態展示，附上官方網址：http://www.echartsjs.com/index.html

之前帶本科實習時有同學用過，狗哥的博客也用這個展示他的旅游足跡，所以在這次山西項目里我也拿來試了一下。類似於echarts這種庫，最好的學習方法就是按照官網的demo來做，所以我先找了一個符合我要求的demo將其實現，然后再分別掌握其中的重要屬性，最后按照自己的需求進行改動。

一、地圖展示

我看的主要是以下兩種：都在series里，位置在側欄標出來了

二、屬性設置

屬性是以鍵值對的形式調用的，大部分都很簡單，和樣式有關，一看就知道是干什么的，需要重點關注的是以下幾個：

tooltip：浮動提示框組件

legend：圖例

series：系列列表，每個系列通過 type 決定自己的圖表類型

其中，series里的label和tooltrip中都含有formatter屬性，這兩個是調整地圖所展示的點信息的關鍵，一定要理清楚formatter屬性中的參數含義 ，具體參見官方文檔的詳細介紹。注意分清 系列名 / 數據名 / 數據值 這三者對應的內容

 

這是我調整之后的效果：左邊是label，右邊是tooltip，其他的內容寫在代碼的注釋里了，可以往下看

有不會的一定記得查閱官方文檔，里面有不同屬性非常詳細的介紹

      

 內容我已經上傳到github了，歡迎大家查看和下載，覺得不錯的話可以關注我~

 地址：https://github.com/santana2000/sxWebGIS/tree/master/poi

三、代碼實現

var myChart = echarts.init(document.getElementById('sxmap'));

// 注意引入版本
// 注意不同版本使用差別

var data = [                        //元素為對象的數組
    {name: '長治', value: 41},
    {name: '大同', value: 58},
    {name: '臨汾', value: 47},
    {name: '太原', value: 39},
    {name: '陽泉', value: 31},
    {name: '晉城', value: 70},
    {name: '平遙', value: 20},
    {name: '呂梁', value: 10},
    ];

var geoCoordMap = {                 //對象
    '陽泉':[113.57,37.85],
    '大同':[113.3,40.12],
    '長治':[113.08,36.18],
    '臨汾':[111.5,36.08],
    '太原':[112.53,37.87],
    '晉城':[112.43,36.87],
    '平遙':[112.03,37.37],
    '呂梁':[112.53,37.37],
}

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;                                         // [113.57, 37.85, 31]
};

option = {
    backgroundColor: '#404a59',
    title: {
        text: '礦山災害點危險性展示',
        left: 'center',
        textStyle: {
            color: '#fff',
            fontSize:25
        }
    },
    tooltip: {           //提示框組件
        trigger: 'item',
        formatter:'{b} <br/> ',  //{c@[2]}
        show:false
    },

    legend: {            //圖例
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['危害性'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: "china",
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        center:[112.38,37.67],
        zoom:7,
        itemStyle: {
            normal: {
                areaColor: "#323c48",
                borderColor: "#000000"
            },
            emphasis: {
                areaColor: "#2a333d"
            }
        }
    },
    series: [{
        name: '危險指數：',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: convertData(data.sort(function (a, b) {
            return b.value - a.value;
        }).slice(0, 8)),    //選取從 start 到數組結尾的所有元素，該方法並不會修改數組，而是返回一個子數組
        symbolSize: function (val) {
            return val[2] / 2;        //res數組中的第三個元素
        },
        showEffectOn: 'render',
        rippleEffect: {
            brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
            normal: {
                formatter: '{b}:{@2}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            normal: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        zlevel: 1
    }
    ]
};

myChart.setOption(option);


/*
a(); 執行一次繪制地圖
$(window).resize(function() {   窗口縮放一次
    map.resize();               地圖畫布縮放一次
    a()                         地圖再繪制一次

    */

 

最后說兩個要注意的點：

 1. 看清楚當前的版本，現在更新到了4.x，有一些屬性在之前的版本上做了改動

 2. 引用時注意版本，可以看到bootcdn里可選的很多，自己測試時建議選完整版的