深入浅出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.       最终效果

更多精彩文章请关注 =》 我爱学框架