echarts 4.0.4怎么下载_前端数据可视化利器 ECharts

引言

说到数据可视化，可能很多人的第一反应是python，R或者matlab之类，毕竟它们都对数据处理非常友好。但数据可视化一般分为两个步骤，首先是处理，之后是显示。虽然可能python之类对于统计一个表格，做一下回归分析可以信手拈来，但说到显示和交互，暂时还是HTML和JavaScript的天下。这次介绍的就是一个基于Javascript的数据可视化库ECharts。

ECharts

Echarts 由百度的前端技术部开发，是一款难得的由国内厂商开源的JS代码库，相比同类产品如 highcharts，google charts 都有着相当的竞争力。并且用的人不少，说明文档较容易找到，上手简单。

现有的网页端数据可视化实现方式大多分为两种，一种是基于 SVG 以矢量图形显示，另一种是以 canvas 画布的方式实现。

一些库的实现完全使用svg实现，如highcharts，优点是兼容性较好，由于svg是一项比较成熟的标准，许多旧的浏览器都对其有完善支持(特别是IE)，缺点是实现的效果有所限制。

echarts采用的是svg和canvas同时使用的方案，从现在的趋势来看，主要采用canvas来实现，采用canvas的优点非常明显，就是效果更加“炫”，可以通过webGL等实现三维效果，缺点是兼容性较差，当然如果你使用的是现代浏览器，那么基本上不需要担心这个问题。

如果对ECharts开发进展有兴趣

可以关注它的 Github仓库

SVG：

https://developer.mozilla.org/zh-CN/docs/Web/SVGcanvas：

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API 

Github仓库：

https://github.com/apache/incubator-echarts 

(复制链接到浏览器打开)

常用图表

折线图

柱状图

散点图

关系图

3D柱状图

其他图表在 ECharts官网 上还有许多，

就不一一介绍了。

 ECharts官网：

https://www.echartsjs.com/index.html 

(复制链接到浏览器打开)

如何使用

基础使用

如果还没有网页编程的经验，那么一个很方便的使用方法是修改官方实例，在ECharts社区上提供了非常多的模版可以使用。

首先我们进入 示例页 找到想要实现的效果。

比方说我们要实现第二个柱状图效果，

点进去然后点击右下角的下载按钮

一般来说这时候会下载一个html文件，直接通过浏览器打开就可以看到效果了，修改数据只需要在文件内对应地方修改即可。

 示例页：

https://www.echartsjs.com/examples/ 

(复制链接到浏览器打开)

进一步使用

如果不想使用模版，而是自己创建一个图表，可以参照以下过程。

1. 创建实例

echarts的实现逻辑其实比较简单，即在html中提供一个标签作为容器，这个容器会绑定一个echarts实例，对图表的一切修改都是对这个实例的修改，具体来看就是这样：

首先我们在html中引入echarts

给页面添加一个存放图表的标签

在脚本中新建一个echarts实例

let dom = document.getElementById("container");

let myChart = echarts.init(dom);

2. 添加属性

创建实例之后其实图表还是空的，图表具体显示什么由传给图表的属性来决定，echarts把这个属性称作option。

option是一个javascript里面的对象，存储需要展示的图表信息，具体这个option要怎么写呢，官方提供了一个很完整的 手册 来说明。option里面最重要的内容是图表类型和数据，数据的组织形式与图表类型紧密相关。例如刚才的柱状图的option是这么写的(简化)

let option = {

    ...,

    xAxis: {

        data: ['class 1', 'class 2', 'class 3', 'class 4', 'class 5', 'class 6']

    },

    yAxis: {

        splitArea: {show: false}

    },

    series: [

        {

            name: 'bar',

            type: 'bar',

            data: [1,2,3,4,5,6]

        }

    ]

};

其中series是echarts中的一个概念，一个series就是一个实例中的所有图表的集合，series中可以用一个元素表示一个表，也可以用多个元素表示一个表，这时候这些组成表的元素一般具有一定的相关性(例如重叠)。

例如说我需要在一个静态图表上加上一个有动画效果的图表，那么可以通过series里面添加两个图表来实现。

配置好option之后，将option传递给echarts实例，之后图表的内容就可以自动显示了。

myChart.setOption(option);

 官方手册：

https://www.echartsjs.com/option.html 

(复制链接到浏览器打开)

3. 进阶

通过echarts实现的图表的很大优势在于它丰富的样式和交互性，样式的定义在配置手册中提供了非常多的选项，这些样式都定义在option中，通过手册按图表类型查找即可找到。

不过echarts存在的一个问题是，与样式有关的定义如果出错很多时候会静默失败，让人摸不着头脑，这时候就只能慢慢尝试了。

有关交互的内容echarts采用了javascript中常用的事件监听回调函数的方式，使用起来也比较方便，这些方法都定义在官方的 API文档 中，有相应的需求去查阅即可。

 API文档：

https://www.echartsjs.com/api.html#echarts 

(复制链接到浏览器打开)

END