Echart绘制动态地图

利用Echart绘制的逐年LEED项目热图

前几日买回来《R语言数据可视化之美：专业图表绘制指南（增强版）》，看到作者张杰在“增强版特别说明”里专门提到了地图绘制时需严格执行各种规定，否则无法通过审核程序。我买到的是增强版，而该书这之前的版本中，作者为通过审核计没有收入地图绘制的内容。如早些时候的2019第23周：评《R语言数据可视化之美：专业图表绘制指南》文中就提到该书最新出版的版本中缺少了空间数据可视化部分内容。

《R语言数据可视化之美：专业图表绘制指南（增强版）》特别说明

说起来由于地图引发的各种争议也不在少数，也因此利用ECharts绘制地图应该是可以省去大家不少这方面的麻烦。 ECharts是最先由百度开发的使用 JavaScript 实现的开源可视化库，其功能强大、交互丰富，直观且好用。尽管百度公司在其它方面的口碑不怎么样，但Echart绝对算得上是Baidu的良心之作了。

比如在Python for Data Analysis和前面提到的《R语言数据可视化之美：专业图表绘制指南（增强版）》的教程中，介绍的都是R或者Python调用.shp格式的地图的方法。这些方法中首先能找到的合适的.shp文件本就不易，辛辛苦苦生成了地图也可能又不符合各种规定也说不定。反正我试过了.shp的方法后，再换到ECharts来生成地图后就再也不想去用.shp文件格式地图了。

ECharts绘制动态地图实例

如题图所示，仍然以国内的LEED认证项目统计数据为例，利用Echarts生成的动态地图以对比各省之间的项目数量，以及历年的认证项目数量增长趋势。
参照Echarts官方样例中地图，以及timeline 组件，就可以轻松得到上图中的效果了。
Echarts的官方教程宣称5 分钟上手 ECharts，事实上也确实如此。
在引入Echats之后，不管选用的是哪种类型的图标，首先第一步就是定制视图选项。包括标题、配色、字体、视觉映射、工具条、悬浮显示等等。

指定Echarts图表的配置项

配置好选项后，接下来指定数据及图标类型，就算大功告成了。

    $.get("leedcn.json", function (data) {
        /*
        将json文件导入，数据格式：
        timeline：[2005,2006,……2017,2018]        //LEED统计年份数组
        // 从2005-2018年，每年获认证的LEED项目数量数组
        yearseries：[[{name:"北京",value:2}, …{name:"西藏",value:0}],
                        ……
                     [{name:"北京",value:216}, …{name:"西藏",value:0}]]
        //从2005-2018年，累加的各省LEED项目数量数组
        totalseries：[[{name:"北京",value:2}, …{name:"西藏",value:0}],
                        ……
                     [{name:"北京",value:216}, …{name:"西藏",value:0}]]    
        */
       
        // 解析json文本赋值给object
        //cnDataset = eval('('+ data +')'); 
       cnDataset = eval(data);
        // 调用完成后将loading动画停止
        myChart.hideLoading();

    // debugger
    // 按年份将数据赋值给地图填色
    for (var n = 0; n < cnDataset.timeline.length; n++) {
            option.baseOption.timeline.data.push(cnDataset.timeline[n]);
            option.options.push({
                title: {
                    show: true,
                    'text': cnDataset.timeline[n] + ''
                },
                series: {
                    name: cnDataset.timeline[n],
                    type: 'map',
                    roam: false,
                    map: 'china',
                    data: cnDataset.totalseries[n],
                    }
            });
        }
        myChart.setOption(option);
        });

如代码中所示，Echarts图表中的图表类型和数据由series来指定，Echarts还支持多个series实现类似让Echarts几年前一举成名的百度人口迁徙大数据可视化之类的更加炫酷的效果。下图就是将饼图和堆叠面积图合体后的效果。但不论如何我始终觉得，利用ECharts来生成动态地图算得上是它的优势之一。

堆叠图与饼图的合体

map(white background).gif

本文中的完整代码参见LEED in China和LEED in China（version 2），最好的Echarts学习资源应该说是官方的教程和样例，所以感兴趣的同学不妨前往官网围观。Echarts的支持文档完整详细，还可以在Echarts官方样例上在线修改并实时查看效果，真的是非常方便了。
包括Plotly和R中gganimate等在内的工具包都可以实现动态图表，但各路大神们为Echarts开发了R语言和Python的API接口，由此也可见Echarts的江湖地位了。
地图就说到这了，等有空了再来试下把ECharts的动态网页插入的PPT中。

参考资料

1. Echart教程
2. "Life Expectancy and GDP"实例
3. "Air Quality - Baidu Map"实例
4. recharts: 百度ECharts 2的R语言接口
5. pyecharts - A Python Echarts Plotting Library
6. 如何用 R 绘制动态统计图？
7. Python 可视化神器-Plotly Express
8. Powerpoint的旧瓶装上ECharts的新酒，让你的年终总结PPT高大上起来——Web Viewer 与 WebBrowser对比