Echarts地圖展現及屬性分析

Echarts，一個效果很是棒的可視化庫，能夠生產各類圖表，動態展現，附上官方網址：http://www.echartsjs.com/index.html

以前帶本科實習時有同窗用過，狗哥的博客也用這個展現他的旅遊足跡，因此在此次山西項目裏我也拿來試了一下。相似於echarts這種庫，最好的學習方法就是按照官網的demo來作，因此我先找了一個符合我要求的demo將其實現，而後再分別掌握其中的重要屬性，最後按照本身的需求進行改動。

1、地圖展現

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

2、屬性設置

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

tooltip：浮動提示框組件

legend：圖例

series：系列列表，每一個系列經過 type 決定本身的圖表類型

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

 

這是我調整以後的效果：左邊是label，右邊是tooltip，其餘的內容寫在代碼的註釋裏了，能夠往下看

有不會的必定記得查閱官方文檔，裏面有不一樣屬性很是詳細的介紹

      

 內容我已經上傳到github了，歡迎你們查看和下載，以爲不錯的話能夠關注我~

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

3、代碼實現

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裏可選的不少，本身測試時建議選完整版的