创新互联ECharts教程：如何快速上手ECharts

特性介绍

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

从哪里获取 ECharts ？

获取 ECharts 的路径有以下几种，请根据您的情况进行选择：

1. 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。
2. 也可以在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
3. 或者通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
4. 由 cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

如何引入 ECharts？

ECharts 的引入方式变简单了，因为从 ECharts 3 开始就不用使用 AMD 的方式引入，代码也不再内置 AMD 加载器，所以 ECharts 的引入方式就可以像 JavaScript 库一样用 script 标签引入即可。

下面是 Echarts 引入的代码：

准备容器

使用 Echarts 绘制图表前需要先有一个有宽高的 DOM 容器，代码如下：

使用 Echarts 绘制一个简单的图表

接着通过使用 echarts.init 方法来初始化一个 echarts 实例和使用  setOption 方法生成一个简单的柱状图，完整的代码如下：

尝试一下

这样你的第一个图表就诞生了！

网页标题：创新互联ECharts教程：如何快速上手ECharts
文章URL：http://www.csdahua.cn/qtweb/news12/471262.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网