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

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