获取 ECharts

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

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

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的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);</script>
</body>
</html>

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

你也可以直接进入 ECharts Gallery 中查看编辑示例

转自：http://blog.csdn.net/wulex/article/details/78824131

Echarts教程1_ ECharts官方教程(一)【5分钟上手ECharts】相关推荐

【网络教程】Iptables官方教程-学习笔记5--IPTABLES MATCH
这篇博客介绍iptables和netfilter中所有可用的匹配,章节比较厂,没必要去学习每个匹配的具体细节,大致了解下即可,后续要用到再深入掌握它. 一 .Iptables 的匹配(match) 在 ...
【网络教程】IPtables官方教程--学习笔记3
一.遍历表和链本节我们将讨论信息包如何遍历不同的链(chains)以及以什么样的顺序.我们也会讨论表(tables)的遍历顺序,以及研究与内核相关的某些其它组件所涉及的问题,也就是说不同的路由决策等 ...
5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
vb如何定义微软服务器stul,VBScrip微软官方教程.doc
VBScrip微软官方教程 VBScript微软官方教程 Microsoft Visual Basic Scripting Edition 是程序开发语言 Visual Basic 家族的最新成员,它 ...
Echarts入门(零基础小白教程)
前言适合0前端基础的小白,什么配置啊,不会啊,我就想画个图先,没问题,按照步骤做,先来实现第一个图,之后官方教程会教会你更多的. 下载echarts 小白建议,直接下完整版,先搞清楚怎么画出一张图再 ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
OkHttp官方教程解析-彻底入门OkHttp使用
最近半年来身边开发的朋友越来越多的提到OkHttp,上谷歌百度一下,确实OkHttp成了时下最火的HTTP框架,于是我也开始放下Volley,转而关注OkHttp,五一期间仔细看了官方WiKi介绍(我 ...
opencv python下载_[福利] OpenCV4 Python 最新中文版官方教程来了（附下载）
教程简介 OpenCV 是计算机视觉中经典的专用库,然而其中文版官方教程久久不来.近日,一款最新 OpenCV4.1 版本的完整中文版官方教程出炉,读者朋友可以更好的学习了解 OpenCV 相关细节. ...
basler相机参数简要中文说明_附下载| OpenCV最新中文版官方教程
OpenCV是计算机视觉中经典的专用库,然而其中文版官方教程久久不来.近日,一款最新OpenCV4.1 版本的完整中文版官方教程出炉,读者朋友可以更好的学习了解OpenCV相关细节.教程根据官方提供的 ...
福利，PyTorch中文版官方教程来啦（附下载）
PyTorch 中文版官方教程来了. PyTorch 是近期最为火爆的深度学习框架之一,然而其中文版官方教程久久不来.近日,一款完整的 PyTorch 中文版官方教程出炉,读者朋友从中可以更好的学习了 ...

Echarts教程1_ ECharts官方教程(一)【5分钟上手ECharts】

获取 ECharts

引入 ECharts

绘制一个简单的图表

Echarts教程1_ ECharts官方教程(一)【5分钟上手ECharts】相关推荐

最新文章

热门文章