echarts初识

朱雀 2022-06-02 06:58 188阅读 0赞

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 [ZRender][]，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

## 丰富的图表类型 ##

ECharts 提供了常规的[折线图][Link 1]，[柱状图][Link 1]，[散点图][Link 2]，[饼图][Link 3]，[K线图][K]，用于统计的[盒形图][Link 4]，用于地理数据可视化的[地图][Link 5]，[热力图][Link 6]，[线图][Link 7]，用于关系数据可视化的[关系图][Link 8]，[treemap][]，多维数据可视化的[平行坐标][Link 9]，还有用于 BI 的[漏斗图][Link 10]，[仪表盘][Link 11]，并且支持图与图之间的混搭。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

## 多个坐标系的支持 ##

ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。

## 获取 ECharts ##

你可以通过以下几种方式获取 ECharts。

1.  从[官网下载界面][Link 12]选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载[完整版本][Link 13]。开发环境建议下载[源代码版本][Link 14]，包含了常见的错误提示和警告。
2.  在 ECharts 的 [GitHub][] 上下载最新的 `release` 版本，解压出来的文件夹里的 `dist` 目录里可以找到最新版本的 echarts 库。
3.  通过 npm 获取 echarts，`npm install echarts --save`，详见“[在 webpack 中使用 echarts][webpack _ echarts]”
4.  cdn 引入，你可以在 [cdnjs][]，[npmcdn][] 或者国内的 [bootcdn][] 上找到 ECharts 的最新版本。

上手还是挺轻松的。  
所有的demo示例，这个对于开发使用就太轻松了 [http://www.echartsjs.com/gallery/index.html][http_www.echartsjs.com_gallery_index.html]

自定义构建 ECharts

一般来说，可以直接从 [echarts 下载页][Link 12] 中获取构建好的 echarts，也可以从 [GitHub][GitHub 1] 中的 `echarts/dist` 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：

*  完全版：`echarts/dist/echarts.js`，体积最大，包含所有的图表和组件，所包含内容参见：`echarts/echarts.all.js`。
 *  常用版：`echarts/dist/echarts.common.js`，体积适中，包含常见的图表和组件，所包含内容参见：`echarts/echarts.common.js`。
 *  精简版：`echarts/dist/echarts.simple.js`，体积较小，仅包含最常用的图表和组件，所包含内容参见：`echarts/echarts.simple.js`。

如果对文件体积有更严苛的要求，可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。自定义构建有几种方式：

*  [在线自定义构建][Link 15]：比较方便。
 *  使用 `echarts/build/build.js` 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。
 *  直接使用构建工具（如 [rollup][]、[webpack][]、[browserify][]）自己构建：也是一种选择。

[ZRender]: https://github.com/ecomfe/zrender
[Link 1]: http://echarts.baidu.com/option.html#series-line
[Link 2]: http://echarts.baidu.com/option.html#series-scatter
[Link 3]: http://echarts.baidu.com/option.html#series-pie
[K]: http://echarts.baidu.com/option.html#series-candlestick
[Link 4]: http://echarts.baidu.com/option.html#series-boxplot
[Link 5]: http://echarts.baidu.com/option.html#series-map
[Link 6]: http://echarts.baidu.com/option.html#series-heatmap
[Link 7]: http://echarts.baidu.com/option.html#series-lines
[Link 8]: http://echarts.baidu.com/option.html#series-graph
[treemap]: http://echarts.baidu.com/option.html#series-treemap
[Link 9]: http://echarts.baidu.com/option.html#series-parallel
[Link 10]: http://echarts.baidu.com/option.html#series-funnel
[Link 11]: http://echarts.baidu.com/option.html#series-gauge
[Link 12]: http://echarts.baidu.com/download.html
[Link 13]: http://echarts.baidu.com/dist/echarts.min.js
[Link 14]: http://echarts.baidu.com/dist/echarts.js
[GitHub]: https://github.com/ecomfe/echarts
[webpack _ echarts]: http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
[cdnjs]: https://cdnjs.com/libraries/echarts
[npmcdn]: https://npmcdn.com/echarts@latest/dist/
[bootcdn]: http://www.bootcdn.cn/echarts/
[http_www.echartsjs.com_gallery_index.html]: http://www.echartsjs.com/gallery/index.html
[GitHub 1]: https://github.com/ecomfe/echarts/releases
[Link 15]: http://echarts.baidu.com/builder.html
[rollup]: https://rollupjs.org/
[webpack]: https://webpack.github.io/
[browserify]: http://browserify.org/