【ECharts】1.学习ECharts从现在开始：第一个Echart图形
首先，你需要下载ECharts所需的文件，我使用的是echarts-2.0.2版本，点击这里下载：echarts-2.0.2
下载解压后，下面有一系列文件夹，其中build中有我们需要引入的JS文件，doc里面是ECharts的API文档以及实例。
使用ECharts有两种方式，一种是通过模块化单文件引入的方式，另一种是通过标签式单文件引入。我们这里使用标签式单文件引入。
一、第一个ECharts报表
首先新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
</body>
接着新建<script>标签引入echarts-plain.js
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
</body>
注：这里引入的是百度官网的文件，你可以将其替换成你自己下载的ECharts build文件夹下的JS文件
接着新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
浏览器中打开echarts.html，就可看到以下效果：
二、ECharts代码的结构
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 1.为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:800px;height:400px;margin: 0 auto;" ></div>
<!-- 2.ECharts单文件引入 -->
<script src="js/echarts-plain.js"></script> <script type="text/javascript">
<!-- 3.基于准备好的dom，初始化echarts图表 -->
var myChart = echarts.init(document.getElementById('main')); <!-- 4.Option参数 -->
<!-- 省略Option代码 -->
<!-- 5.加载数据 -->
myChart.setOption(option);
</script>
</body>
可以看到，使用ECharts最简单的只有5个步骤。使用不同的报表，那么只需要改变第4步（16行）中Option的参数即可。
而如果你想引用一些更加高级的功能图形，比如说地图，那么你可能还需要引入另外一个拥有更加丰富资源的JS文件（改变第2步引入的JS文件）。至于引入哪个JS文件，你可以参考下面对各个JS的说明：
echarts-plain.js : 经过压缩，包含除地图外的全部图表
echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
上面的JS都可以在echart下载目录的build目录下找到。
三、Option参数
在ECharts里，所有的参数都是通过Option进行设置的。一般来说，Option里最常用的参数有下面几个：
title ：图形的标题
tooltip ：鼠标移上去的提示
legend ：图例
toolbox ：工具箱
calculable：是否可拖动计算（true 或者 false）
xAxis：X轴
yAyis：Y轴
Series：数据集（系列）
他们在图形中的位置如图所示：
在EChats中最重要的就是Option中的参数，各种图形的变化以及数据都是在Option进行设置的。
【ECharts】1.学习ECharts从现在开始：第一个Echart图形的更多相关文章
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- 学习Echarts：（一）静态图表
Echarts是现在比较火的js图表库,官网有丰富的实例和友好的入门教程.但是图表的种类很多,配置项的参数也很多,一开始我根据图表类型翻看配置项,发现这样学效率太低了,决定先制定一个简单的学习步骤,按 ...
- deepin linux学习笔记（四）进不去图形界面怎么办？
目录 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 更换成lxde桌面 进不去图形界面怎么办? 总结 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 生命不息 ...
- QML学习笔记（五）— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- go语言，golang学习笔记4 用beego跑一个web应用
go语言,golang学习笔记4 用beego跑一个web应用 首页 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/ 更新的命令是加个 -u 参数,g ...
- Linux内核分析第六周学习笔记——分析Linux内核创建一个新进程的过程
Linux内核分析第六周学习笔记--分析Linux内核创建一个新进程的过程 zl + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...
- selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)
selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop Q群里 ...
- 学习vue就是那么简单，一个简单的案例
vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但 ...
- vue中添加Echarts图表的使用，Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
随机推荐
- Python连载49-正则举例
一.re举例 import re #查找数字 p = re.compile(r"\d+") #在字符串“ongahjeuf125”中及逆行查找,按照规则p指定的正则进行查找 m = ...
- HTML连载41-水平居中的注意点、盒子居中和内容居中
一.盒子模型练习 我们有个需求: 创建两个盒子,大盒子嵌套一个小盒子,大盒子是红色的,小盒子是蓝色的,并且小盒子在大盒子中是居中的. <!DOCTYPE html> <html la ...
- 6 种微服务 RPC 框架，你知道几个？
开源 RPC 框架有哪些呢? 一类是跟某种特定语言平台绑定的,另一类是与语言无关即跨语言平台的. 跟语言平台绑定的开源 RPC 框架主要有下面几种. Dubbo:国内最早开源的 RPC 框架,由阿里巴 ...
- selectpage选择订单的时候,订单数量和金额会动态改变
1. 2. HTML部分: JS: PHP获取数据并return json
- 一些常见的http状态码
HTTP状态码是服务器和客户端之间交流信息的语言,下面列出一些常见的HTTP状态码. 1XX系列 指定客户端应相应的某些动作,代表请求已被接受,需要继续处理.由于在HTTP/1.0协议中没有定义任何1 ...
- LinuxShell脚本——变量和数据类型
LinuxShell脚本——变量和数据类型 摘要:本文主要学习了Shell脚本中的变量和数据类型. 变量 定义变量的语法 定义变量时,变量名和变量值之间使用“=”分隔,并且等号两边不能有空格: 变量名 ...
- MySQL数据库的事务及存储引擎
一.关系型数据库与非关系型数据库 1.关系型数据库的特点: 1)数据以表格的形式出现 2)每行为各种记录名称 3)每列为记录名称所对应的数据域 4)许多的行和列组成一张表单 5)若干的表单组成数据库 ...
- 清新水墨色中国风通用教育培训课件PPT模板
模板来源:http://ppt.dede58.com/jiaoxuekejian/26220.html
- Javase之集合体系之(1)集合顶层类Collection与其迭代器知识
集合体系之集合顶层类Collection与其迭代器知识 集合的由来:Java是一门面向对象语言,而面向对象语言对事物的描述是通过对象体现的,为了方便对多个对象进行操作,就必须把多个对象进行存储,而要存 ...
- iOS安全攻防（二）：后台daemon非法窃取用户iTunesstore信息
转自:http://blog.csdn.net/yiyaaixuexi/article/details/8293020 开机自启动 在iOS安全攻防(一):Hack必备的命令与工具中,介绍了如何编译自 ...