百度Echarts是由百度团队打造的一款可视化图表工具,算得上是国内开源数据可视化的佼佼者。它支持多种图形展示,并且还能与用户进行交互。关于如何使用Echarts,网上早就有不少教程,百度团队也提供了相关文档,我就不再重复了。不过,Echarts是基于json格式的数据进行操作的,使用代码编辑的方式对于那些零基础的小伙伴来说,可能会觉得有点难上加难。因此,我在这里想分享一些简单的小技巧,帮助大家更快地创建出各种可视化图表。
技巧一:复制Echarts实例的开源代码
首先,去Echarts的官方网站(http://echarts.baidu.com/index.html,这是echarts3版本的主页),在“文档—教程”中,你可以找到《5分钟上手ECharts》的指南。通过这个案例,你可以轻松入门Echarts(记得先下载echarts.min.js,然后在同一目录下用记事本新建一个html文件,把代码粘贴进去,最后用浏览器打开)。基本代码如下:
ECharts
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
按照教程,基本代码分为三部分:引入echarts库、创建一个具备宽高的DOM容器,以及设置图表的配置和数据。其中,var option就是图表配置的核心,图表的标题(title:)、坐标轴(xAxis、yAxis)、图例和数据(series)都在这里设置,具体可以参考echarts的参考手册:
(http://echarts.baidu.com/echarts2/doc/doc.html)。
在这个基础代码上,你可以通过复制Echarts实例的开源代码,替换掉var option的内容,从而生成不同的图表。比如,打开http://echarts.baidu.com/echarts2/index.html,这是echarts2的主页,里面有一个实例下拉菜单,点击官方示例,你会看到百度团队开发的各种可视化图形(见下图),种类之丰富是我们平时用到的远远不能比的。

选择一个图形,比如标准折线图,点击打开,就能看到图形和它的源码(如下图)。

把左边代码中的option部分全部复制,然后替换掉《5分钟上手ECharts》中生成的html文件的option部分(从option = 到最后一个“};”,记得保留var),这样就能生成新的图形了。你可以尝试不同的图形,并输入一些数据,快速制作出你需要的图表。
(小提示:如果遇到中文乱码的问题,可以把代码里的改成,或者在记事本中另存为时选择utf-8编码格式。)
技巧二:利用echarts3的下载demo功能
技巧一适用于大多数echarts2中的图形,但对于echarts3的图形就不完全适用了,因为echarts3的内容更丰富,功能更强大,引入了更多的json文件。此时,你可以使用echarts的实例图形,采用其英文版的download demo功能。
点击echarts3的主页(http://echarts.baidu.com/index.html),右上角有个“en”按钮,点击进入英文版,选择“work-demo”,这里有很多实例。例如,选择一个经典的全国空气质量图,打开后在可视化图形的右上角会有一个download demo功能,点击后就可以下载该图形的html文件。你可以先修改左边代码的数据(name、value,以及geoCoordMap的坐标位置),点击上面的RUN按钮,再点击download,最终就能得到你需要的html文件。

下载的html文件用记事本打开,你会发现源码中引入了很多制作这个图形所需的js文件,因此仅仅依靠技巧一是无法完成该图形的。
script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js">
技巧三:借助百度图说进行互动式制图
在echarts主页的最底部,有一个百度图说的链接,网址是:http://tushuo.baidu.com/?fr=echarts。在这个页面中,点击“开始制作图表”,选择你想要的图形(比如标准折线图),把鼠标放在图表区域,接着在出现的菜单中点击“数据编辑”,这样就可以进入一个类似excel的互动式手动制图设置界面,如下图所示。

在这里,你可以直接输入数据,也可以选择导入已有的excel数据,点击参数调整按钮,对图形的标题、坐标轴、图例等进行简单设置,完全可以根据自己的需求制作出想要的可视化图形,就像使用excel一样。











