Echarts练习

      这两天简单学习了下Echarts，学习资料是官网和网络搜索，并写了一个简单的练习demo。

      源码地址：https://github.com/chengmingyueGLSK/footprint              求star   嘿嘿！！！

      先介绍下Echarts，Echarts是一个国产的优秀的纯Javascript的图表库，提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。更多资料官网：http://echarts.baidu.com/有详细介绍，这里就不多说了。

      好了，下面进入demo的介绍：

     

      

该demo是将去过的地方在地图上显示出来，并且按一架小飞机（就是那个黄色的小飞机）会按顺序‘飞’过；

另外还可以通过输入框来增加地方，这样你就能看到你留在祖国大好河山上的‘足迹’了，是不是很有意思。

第一步：页面布局

显而易见，分为上下两部份，上面是输入框，下面是id=‘main’的div，echarts要求给图表一个容器。

第二步：图表配置项

var option = {
			backgroundColor: '#999999',
			geo: {
				map: 'china',
				label: {
					emphasis: {
						show: false
					}
				},
				roam: true,
				itemStyle: {
					normal: {
						areaColor: '#323c48',
						borderColor: '#404a59'
					},
					emphasis: {
						areaColor: '#2a333d'
					}
				}
			},
			series: series
		};

这里主要是series(系列的配置)，我们要绘制的路径数据就是写在series里的，而且路径数据又是动态改变的，所以我们把series单独拿出来。

第三步：series生成

既然是绘制线路，那当然要选择type='lines'的series了。为了能看到效果，我们预先制定一组地方来显示路径，这样也模拟了从后台获取的初始数据（这个demo不涉及后台，至于为什么不涉及，当然是因为不了解后台嘛），同时也预先准备好这些地方的经纬度数据，Echarts地图绘制是基于经纬度的。

var addrData = ['盐城','南京','上海','北京','长沙','长春', '*'];
var geoCoordMap = {
        '盐城': [120.14887181793894,33.379861877120995],
        '南京': [118.77807440802562,32.05723550180587],
        '上海': [121.48789948569473,31.24916171001514],
        '北京': [116.39564503787867,39.92998577808024],
        '长沙': [112.9793527876505,28.21347823085322],
        '长春': [125.31364242720072,43.89833760709784],
        '*': [85.61489933833856,42.127000957642366],
    };

      好，现在我们开始生成series：

var series = [];
    series.push({
        type:'lines',
        polyline:true,
        effect: {
            show:true,
            period:6,
            trailLength:0.7,
            color:'#fff',
            symbolSize:3
        },
        lineStyle: {
            normal: {
                color:'#a6c84c',
                width:0,
                curveness:0.2
            }
        },
        data:convertData(addrData)
    }, {
        type:'lines',
        polyline:true,
        zlevel:2,
        effect: {
            show:true,
            period:6,
            trailLength:0,
            symbol:planePath,
            symbolSize:15
        },
        lineStyle: {
            normal: {
                color:'#a6c84c',
                width:1,
                opacity:0.4,
                curveness:0.2
            }
        },
        data:convertData(addrData)
    });

     关于线条样式的配置，官网有详细的说明，这里就不多说了，重点是data这一项，这是最重要了，我们先来看下官网对于配置这一项的要求：

    

      从第一张图上可以看到，data是一个数组，里面是一个对象，包含了name,coords,lineStyle和label,其中coords就是路径了，第二张图给出了关于coords的说明，这是一个二维数组，里面定义了每个每段路线的经纬度。

var convertData =function (data) {
        var res = [{
            coords: []
        }];
        for (vari =0;i < data.length;i++) {
            res[0].coords.push(geoCoordMap[data[i]]);
        }
        returnres;
    };

通过上面的代码，我们就将data项生成了，此时已经可以看到效果了，还差一个增加地方的功能，不急，慢慢来。

第五步：获取输入地名的经纬度

       还记得吗，前面我们说到Echarts绘制地图是基于经纬度的，那么我们在地图上增加地方时也需要经纬度，之前我们绘制的几个地方的经纬度是事先准备好了，动态增加地方肯定不能这么做，要能实时获取才行。怎么才能获取到呢，这里选用百度地图提供的开放API获取，我们用到的是其中的正地址编码接口（在百度地图官网上很容易找到，注意要申请ak才可以使用）:

'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address='; //百度地图正地址编码接口

      我们给按钮绑定点击事件，获取输入内容并访问接口获取经纬度：

$('.btn').click(function () {
        var addr =$('.form-control').val();
        if (addr) {
            $.getJSON(url +addr +'&callback=?',function (res) {
                if (res.status ===0) {
                    varloc =res.result.location
                    geoCoordMap[addr] = [loc.lng,loc.lat];
                    addrData.push(addr);
                    drawAddr();
                }
            })
        }
    });

         ！！！需要注意的是，这里采用了jquery的$.getJson的方法来解决跨域的问题，当然也可以用<script>标签加回调函数的方法也是可以的。好了，现在我们有经纬度，就可以绘制路线了。

别忘了，给star哦，谢谢小伙伴们！！！