Echarts在数据新闻上的应用

作者：林峰 百度Echarts项目负责人

按理说作为一名百度的前端“攻城狮”与新闻媒体交集并不多，但因为数据新闻的日渐火热，而我恰好正专注于数据可视化的研发，于是报名参加了华媒基金会发起的数据新闻工作坊，幸运的成为了第一期的学员，回到了老家广州渡过了充实、快乐的一周，有幸认识了很多新闻领域的记者、编辑朋友，当然包括能有机会与马金馨老师有了一周的“亲密”交流。

答应马老师写一篇关于“ECharts在数据新闻上的应用”已经长达一年了。 这承诺从未忘记，过去一年来之所以一直没动笔，除了“忙”这个借口外最重要的原因是我觉得ECharts还没准备好，她离成熟（更别提完美了）还相去甚远，我更希望看到她低调平静的成长起来，少些浮躁，少承受些来自使用方的需求约束或妥协，在我过去些年的项目经验告诉我，很多拍脑袋产出的业务需求和“业余”的奇思妙想是一个项目的慢性毒药，一不小心就让你偏离了方向，做好一个项目不容易，毁掉她却易如反掌。

ECharts在过去一年的时间里成长很快，15次版本迭代，业界关注度和应用数量也都已经翻了好几翻了，算是渡过了她的襁褓期。 2.0的新生为ECharts打下继续发展的坚实基础，这也是她的新起点，我觉得是该兑现承诺的时候了，也算是带着全新的ECharts跟大家问好。 今天这篇“ECharts在数据新闻上的应用（上）”主要想跟大家说说关于ECharts能为数据新闻做些什么，适合做些什么，简单来说就是“What”相关。有上自然会有下，关于下篇计划说说怎么用，手把手的教你如何使用，那是跟“How”相关了。目标受众都是数据新闻相关的媒体记者朋友啊，如果您不是并且看得不合您胃口，别打脸。

1、 ECharts是什么？

ECharts缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender（同样也是我们团队的产品），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。当前版本（v2.0）支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图共11类17种图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。更多详见echarts.baidu.com。

 

2、 ECharts能为数据新闻做些什么？

数据新闻离不开数据可视化，大多的数据新闻采用静态图片（信息图）作为可视化载体，这并没有什么不妥的，主要看需求场景。如果你需要展现更多更复杂的数据、或者希望以更鲜活的方式呈现，允许你的读者能够有对你展现的数据有挖掘和分析的互动能力，你可能就需要用到一些可交互图表。 大名鼎鼎的D3就是做这种交互图表的利器，D3是一个基础图形库，有着最多的使用者和无数优秀案例，可以做出不受限制的任意图表类型。

但基于D3的开发你需要具备较高的代码能力和图形算法能力，所以前面说的不受限制其实还是有的，那就是你的代码能力和想象能力，做一个简单的常规图表你可能都需要较长的时间（根据代码能力和需求不同，几小时到几天不等），除非你或你所在的机构拥有强大的数据可视化技术支持，D3并不适合应对快速、周期短的新闻报道，同类的基础图形库还有raphael、processing等。 而跟上面提到的基础图形库不同的还有另外一类工具，图表库，这是构建在图形库上的图表集合，他们把常用图表类型固化下来，使用方可以利用这些已固化的图表类型快速做出各种图表。业界著名的商业图表库Highcharts就是这类型的典型代表，国家统计局的国家数据平台、华尔街日报的中国经济跟踪器都是构建在Highcharts上的典型应用。

ECharts同属于这个类型，但跟需要商业许可的Highcharts（License $90~$3600不等）不同的是ECharts是一个开源免费的项目（基于BSD协议），并且自夸的认为ECharts有着更强大的交互能力和高度个性化能力。 搞清楚这两类库的差别和应用场景是必要的，根据项目需求和自身资源的不同选择哪一类别对你最终的作品产出周期和质量都会很大影响。曾经见过最低幼的吐槽是“ECharts从里到外透漏出山寨D3的气味”，这让我连反驳的冲动都没有，虽然我很高兴看到ECharts能与D3媲美，但我对“大众汽车山寨了钢材”的事情没有兴趣（这太影响智商了）。

上面提到ECharts 2.0提供了11类17种图表，官网上有近百个例子，可以简单浏览一遍，这是ECharts提供的基本能力。但正如前面提到过的，ECharts有着高度个性化能力，很多应用反馈让作为开发者的我们惊讶，使用方利用这些能力做出了很多超出设计预期的个性化图表，官网的很多案例是我们后来模仿使用方实现而成的例子，比如这些：

 

3、 ECharts适合展现哪些类型的数据？

拿到数据后选择用什么类型的图表展示是个不可避免的问题。看到很多信息图“特立独行”的发明了很多图表类型去展现他们认为“特殊”的数据，或者纯粹为了吸引眼球做出了很多“图形与数据毫无关联”的信息图表（见WTF Visualizations）。这其实已经违背我们的新闻报道之所以利用数据可视化初衷，我们应该做的是通过图表（图形）去呈现数据真实的一面，通过这些图形图像去帮助读者更好的解读这些数据同时得以加深印象，我们需要考虑目标受众解读产出和理解成本，其实往往常规图表就已经覆盖了80%以上的需求，信息图如此，在商业领域内比例甚至会更高。

一般来说用于表现某一维度上的连续数据的在另一维度变化趋势我们更建议使用折线图，这能直接投射到直角系上的横纵坐标上，如CPI变化趋势、楼价走势等。

而当目标数据不能作为一个连续维度或者希望传递的是比较的信息，柱形图会更加合适，如全国各省的CPI、一级城市的楼价；

当这类型的数据维度超过2个，可以尝试用散点（气泡）图展现，把不同的数据维度分别映射到横纵坐标、大小、颜色、形状上面，如经济、人口与PM2.5的关系，更高维度的数据展示则可能需要用到雷达图或者分图表展示；

如果数据反映的整体与局部间的组合比例，饼图会更加合适，如群体男女比例、教育水平构成等；

很多数据本身带有地域信息，地图会是个很好的载体；

带有关系的数据可以尝试使用力导向布局或者和弦图；

如果说上面这些都是某个时间刻度上的一个切面，而你拥有多个这样的切面，你可以为图表加上时间轴呈现时间维度上的变化，这是普通静态信息图表无法表达的动态时空变化过程。

这些种种都是常规图表，足以满足绝大部分的常规需求，而且都已经在ECharts上得到实现，你可以快速的做出具有交互能力的动态图表。

4、 吸引眼球？

数据可视化作品不一定酷炫，走向另一个极端成了华而不实的“花哨”更不应该，但吸引眼球本身并没有错。2014年春节的“百度迁徙”带来了很大的社会效应，对这个案例大家应该还有印象吧，吸引眼球的酷炫能力起到了很大的作用，如果能在我们的数据新闻中增加这些元素无疑会是锦上添花的事情，processing非常擅长做出这种类似的特效，甚至还能做出更多极具艺术气息的效果，正如前面说的，你可能需要花费不少的精力去完成。

ECharts内置了一些炫光特效或许能满足一部分的需求，任何图表上的标注标线都支持这种特效，但显然更常见是用在地图上，启用这些特效基本不需要额外的成本，仅是配置项中加入启动的配置就行。这里有些好玩的例子：模拟迁徙、百度人气、城市新闻共现分析、青悦水质历史数据库、全球人口迁徙。

5、 完整的新闻题材！

数据可视化目的应该是为了更好的解读数据，不为做图而作图，更不应该为了要有配图而做图。有更丰富的数据当然好，但数据新闻不一定要有很多数据，一个关键数据也可以成为一篇有价值的数据新闻核心，如“0的突破”，“CPI再创新高”等等，之所以要有大量的数据并存是为了看趋势、对比、了解整体和局部的关系或者时空数据分析等等。同样的一组数据可以有不同的解读，尝试围绕同一个主题给以各个不同角度的数据解读以成为一个完整的新闻题材更具吸引力。这里有些基于ECharts的数据新闻和专题链接供参考：

新浪新闻中心：数据看大虎 http://news.sina.com.cn/c/z/lmgy/index.shtml 经济参考报：投资商业地产该去哪儿？ http://www.jjckb.cn/zt/house/index.html 中国主要城市空气质量实况 http://echarts.baidu.com/doc/example/topic/aqi-china/index.html 中国经济十年时空漫游 http://echarts.baidu.com/doc/example/topic/10-me-china/index.html