2019-07-11 ECharts的使用

因为要使用到ECharts，所以进行了学习，并记录下来。
先看想要实现的效果：

1、将相关区域的数据展示到地图上的对应区域
2、实现一定的交互，比如点击柱状图显示详细信息
3、实现数据动态注入，比如选择特定时间段展示、点击某一区域进行下钻

首先，找到比较权威的参考资料：ECharts Documentation
然后，开始使用，从文档及网上查询可以了解到，ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
点击查看官方文档
点击下载两种方式实例 提取码： py52
注意，其中js引入数据的方式可以直接在本地打开，而JSON文件导入的方式需要在本地服务器中打开。（下载到的geoJson数据可以直接使用，也可以改名为 .json文件进行使用。）
使用的js文件不能把json文件拿来直接使用，因为它们格式有差别：
js的数据格式为：

构成地图的区块数据的主要属性有id、geometry、properties

JSON的数据格式为：

构成地图的区块数据的主要属性有type、geometry、properties

有了数据，就要使用ECharts画地图了，我们后面使用json格式的数据来进行绘图。
使用ECharts画地图，我们可以理解为ECharts是一个工具或我们可以用来调用的函数，以下代码展示了画地图所需要的最少的代码：（本例使用js格式的数据）

    var myChart = echarts.init(document.getElementById('map'));
    option = {

                        geo: {
                                    map: '北京',
                            },

    };
    myChart.setOption(option);

从上面代码中我们可以理清ECharts的使用逻辑：
1、我们要为ECharts准备好一个有高度和宽度的容器（现在可以是canvas，我们一般用div）
2、获取到准备好的容器，将它传入echarts.init()，将创建一个 ECharts 实例；文档
3、设置配置项，对于画地图，至少要设置的选项为geo中的map属性；
4、进行绘制，使用生成的ECharts 实例的setOption方法。

按照以上步骤，我们使用json格式的数据绘制地图：
1、准备好容器，假设id为map；
2、echarts.registerMap('xicheng',geoJson,{});
var myChart = echarts.init(document.getElementById('map'));
3、var option = { series: [ { type: 'map', mapType: 'xicheng', } ] };
4、var myChart = echarts.init(document.getElementById('map'));
实际可运行代码：

var option = {  
            series: [
                {
                    type: 'map',
                    mapType: 'xicheng',
                }                              
            ]
        };  
$(function(){
    $.get('./Echarts/sichuang_and_chongqing.geoJson',function(geoJson)
                                                                        {
                                                                            echarts.registerMap('xicheng',geoJson,{});
                                                                            var myChart = echarts.init(document.getElementById('map'));
                                                                            myChart.setOption(option);
                                                                        }
         ); 
});

大体的逻辑是一样的，但有些细节不一样。
第一个不一样在于使用了异步加载的方式加载数据；
第二个不一样在于第2步多了echarts.registerMap函数的调用，其实使用js文件的方式画地图也是用到了这个函数的，不过在js文件中已经调用过了，所以就不用我们来调用了。

地图上画柱状图