深刻淺出ECharts系列（一）地圖+散點圖

深刻淺出ECharts系列（一）

1. 目標

本次教程的目標是實現「微博簽到點亮中國」散點圖，實現結果如圖：

 

 

     2. 準備工做

a)         首先下載ECharts插件，你能夠根據本身的實際需求選擇你想要下載的版本，也能夠本身定製相應功能的版本，下面附上插件的下載地址：

http://echarts.baidu.com/download.html

咱們下載完整版爲你們進行演示。

b)         由於本次教程涉及地圖，因此須要引入地圖資源，下面附上中國地圖JS地址：

http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js

咱們選擇中國地圖。

c)         下載微博簽到數據，用於數據展現，下面附上下載地址：

http://echarts.baidu.com/gallery/data/asset/data/weibo.json

將數據保存爲weibo.json便可。

 

 3. 正式開始

首先，我新建了一個MVC4項目，將下載的文件放到對應的位置：

 

而後新建一個控制器和對應的視圖，添加對這些文件的引用，同時引用最新版的JQuery插件，而後新增一個id爲main的div作爲地圖的容器來展示地圖。如圖：

 

接着開始寫JS腳原本實現咱們想要的效果：

經過 echarts.init方法初始化一個 echarts實例並經過 setOption方法生成散點圖

<script>   

//初始化

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

 

myChart.showLoading();//加載數據前顯示的動畫效果

 

   //讀取微博JSON數據

    $.getJSON('/Json/weibo.json', function (weiboData) {

        myChart.hideLoading();//加載數據完成後隱藏動畫

 

      //定義一個Data方法將讀取的微博數據根據經緯度組合成新的JSON，用於顯示

        Data = function (index) {

            data = weiboData[index];

            var px = data[0] / 1000;

            var py = data[1] / 1000;

            var res = [[px, py]];

 

            for (var i = 2; i < data.length; i += 2) {

                var dx = data[i] / 1000;

                var dy = data[i + 1] / 1000;

                var x = px + dx;

                var y = py + dy;

                res.push([x, y, 1]);

 

                px = x;

                py = y;

            }

            return res;

        };

     

      //設置參數

        myChart.setOption(

option = {

            backgroundColor: '#404a59',

            title: {         //標題組件

                text: '微博簽到數據點亮中國',

                subtext: 'From ThinkGIS',

                sublink: 'http://www.thinkgis.cn/public/sina',

                left: 'center',

                top: 'top',

                textStyle: {

                    color: '#fff'

                }

            },

            legend: {        //圖例組件

                left: 'left',

                data: ['強', '中', '弱'],

                textStyle: {

                    color: '#ccc'

                }

            },

            geo: {           //地理座標系組件

                name: '強',

                type: 'scatter',

                map: 'china',

                label: {

                    emphasis: {

                        show: false

                    }

                },

                itemStyle: {

                    normal: {

                        areaColor: '#323c48',

                        borderColor: '#111'

                    },

                    emphasis: {

                        areaColor: '#2a333d'

                    }

                }

            },

            series: [{              //系列列表

                name: '弱',

                type: 'scatter',

                coordinateSystem: 'geo',

                symbolSize: 1,

                large: true,

                itemStyle: {

                    normal: {

                        shadowBlur: 2,

                        shadowColor: 'rgba(37, 140, 249, 0.8)',

                        color: 'rgba(37, 140, 249, 0.8)'

                    }

                },

                data: Data(0)

            }, {

                name: '中',

                type: 'scatter',

                coordinateSystem: 'geo',

                symbolSize: 1,

                large: true,

                itemStyle: {

                    normal: {

                        shadowBlur: 2,

                        shadowColor: 'rgba(14, 241, 242, 0.8)',

                        color: 'rgba(14, 241, 242, 0.8)'

                    }

                },

                data: Data(1)

            }, {

                name: '強',

                type: 'scatter',

                coordinateSystem: 'geo',

                symbolSize: 1,

                large: true,

                itemStyle: {

                    normal: {

                        shadowBlur: 2,

                        shadowColor: 'rgba(255, 255, 255, 0.8)',

                        color: 'rgba(255, 255, 255, 0.8)'

                    }

                },

                data: Data(2)

            }]

        });

    });

      

</script>

 

具體參數含義可參考,再也不贅述：

http://echarts.baidu.com/option.html#title

 

4. 最終效果

 

更多精彩文章請關注 =》 我愛學框架