深入浅出ECharts系列(一)地图+散点图

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15286383/article/details/51604041

深入浅出ECharts系列(一)

1.       目标

本次教程的目标是实现“微博签到点亮中国”散点图,实现结果如图:

QQ截图20160607100104.jpg

 

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项目,将下载的文件放到对应的位置:

QQ截图20160607101900.jpg

然后新建一个控制器和对应的视图,添加对这些文件的引用,同时引用最新版的JQuery插件,然后新增一个idmaindiv做为地图的容器来展现地图。如图:

QQ截图20160607141225.png

接着开始写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.       最终效果

QQ截图20160607142607.jpg

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


展开阅读全文

没有更多推荐了,返回首页