首先，你需要下载ECharts所需的文件，我使用的是echarts-2.0.2版本，点击这里下载：echarts-2.0.2

下载解压后，下面有一系列文件夹，其中build中有我们需要引入的JS文件，doc里面是ECharts的API文档以及实例。

使用ECharts有两种方式，一种是通过模块化单文件引入的方式，另一种是通过标签式单文件引入。我们这里使用标签式单文件引入。

一、第一个ECharts报表

首先新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9. </body>

接着新建<script>标签引入echarts-plain.js

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>ECharts</title>
  5. </head>
  6. <body>
  7.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.     <div id="main" style="height:400px"></div>
  9.     <!-- ECharts单文件引入 -->
  10.     <script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
  11. </body>

注：这里引入的是百度官网的文件，你可以将其替换成你自己下载的ECharts build文件夹下的JS文件

接着新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <title>ECharts</title>
  5.  </head>
  6.  <body>
  7.      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  8.      <div id="main" style="height:400px"></div>
  9.      <!-- ECharts单文件引入 -->
  10.      <script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
  11.      <script type="text/javascript">
  12.          // 基于准备好的dom，初始化echarts图表
  13.          var myChart = echarts.init(document.getElementById('main')); 
  14.  
  15.          var option = {
  16.              tooltip: {
  17.                  show: true
  18.              },
  19.              legend: {
  20.                  data:['销量']
  21.              },
  22.              xAxis : [
  23.                  {
  24.                      type : 'category',
  25.                      data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  26.                  }
  27.              ],
  28.              yAxis : [
  29.                  {
  30.                      type : 'value'
  31.                  }
  32.              ],
  33.              series : [
  34.                  {
  35.                      "name":"销量",
  36.                      "type":"bar",
  37.                      "data":[5, 20, 40, 10, 10, 20]
  38.                  }
  39.              ]
  40.          };
  41.  
  42.          // 为echarts对象加载数据
  43.          myChart.setOption(option);
  44.      </script>
  45.  </body>

浏览器中打开echarts.html，就可看到以下效果：

二、ECharts代码的结构

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.      <title>ECharts</title>
  5.  </head>
  6.  <body>
  7.      <!-- 1.为ECharts准备一个具备大小（宽高）的Dom -->
  8.      <div id="main" style="width:800px;height:400px;margin: 0 auto;" ></div>
  9.      <!-- 2.ECharts单文件引入 -->
  10.      <script src="js/echarts-plain.js"></script> 
  11.  
  12.      <script type="text/javascript">
  13.          <!-- 3.基于准备好的dom，初始化echarts图表 -->
  14.          var myChart = echarts.init(document.getElementById('main')); 
  15.  
  16.          <!-- 4.Option参数 -->
  17.          <!-- 省略Option代码 -->
  18.          <!-- 5.加载数据  -->
  19.          myChart.setOption(option);
  20.      </script>
  21.  </body>

可以看到，使用ECharts最简单的只有5个步骤。使用不同的报表，那么只需要改变第4步（16行）中Option的参数即可。

而如果你想引用一些更加高级的功能图形，比如说地图，那么你可能还需要引入另外一个拥有更加丰富资源的JS文件（改变第2步引入的JS文件）。至于引入哪个JS文件，你可以参考下面对各个JS的说明：

  1. echarts-plain.js : 经过压缩，包含除地图外的全部图表
  2. echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
  3. echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
  4. 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的API文档

【ECharts】1.学习ECharts从现在开始：第一个Echart图形的更多相关文章

  1. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  2. 学习Echarts：（一）静态图表

    Echarts是现在比较火的js图表库,官网有丰富的实例和友好的入门教程.但是图表的种类很多,配置项的参数也很多,一开始我根据图表类型翻看配置项,发现这样学效率太低了,决定先制定一个简单的学习步骤,按 ...

  3. deepin linux学习笔记（四）进不去图形界面怎么办？

    目录 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 更换成lxde桌面 进不去图形界面怎么办? 总结 deepin linux学习笔记(四)进不去图形界面怎么办? 前言 生命不息 ...

  4. QML学习笔记（五）— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...

  5. go语言，golang学习笔记4 用beego跑一个web应用

    go语言,golang学习笔记4 用beego跑一个web应用 首页 - beego: 简约 & 强大并存的 Go 应用框架https://beego.me/ 更新的命令是加个 -u 参数,g ...

  6. Linux内核分析第六周学习笔记——分析Linux内核创建一个新进程的过程

    Linux内核分析第六周学习笔记--分析Linux内核创建一个新进程的过程 zl + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  7. selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)

    selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop  Q群里 ...

  8. 学习vue就是那么简单，一个简单的案例

    vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但 ...

  9. vue中添加Echarts图表的使用，Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

随机推荐

  1. electron内监控目标网站cookie的变化，查找指定的cookie

    let cookieInstance = win.webContents.session.cookies; cookieInstance.on('changed', (e, cookie, cause ...

  2. 不为人知的网络编程(九)：理论联系实际，全方位深入理解DNS

    本文原作者:selfboot,博客地址:selfboot.cn,Github地址:github.com/selfboot,感谢原作者的技术分享. 1.引言 对于 DNS(Domain Name Sys ...

  3. Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'infor

    今天在Navicat上执行SQL增删改查数据操作的时候出现了下面这个问题 Expression #1 of ORDER BY clause is not in GROUP BY clause and ...

  4. Leetcode练习题 Palindrome Number

    9. Palindrome Number Question: Determine whether an integer is a palindrome. An integer is a palindr ...

  5. 洛谷 P4124 （数位 DP）

    ### 洛谷 P4124 题目链接 ### 题目大意: 给你一段区间,让你求满足下列两个条件时的数的个数. 1.至少有 3 个相邻相同数字 (即 111 .1111 .222 等) 2.不能同时出现 ...

  6. javascript解决在safari浏览器中使用history.back()返回上一页后页面不会刷新的问题

    我们知道,在JavaScript中提供了一个window.history.back()方法用于返回上一页,另外也可以使用window.history.go(-1)返回上一页(跳转). 在其他的主流浏览 ...

  7. 黄聪：不使用 webpack，vuejs 异步加载模板

    webpack 打包不会玩,整了这么个小玩具 一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...

  8. vue-商品管理案例改进

    案例改进 vue-resource全局配置: Vue.http.options.root = 'http://vue.studyit.io/'; 全局启用 emulateJSON 选项 Vue.htt ...

  9. java核心技术第一篇之数据库基础

    01.数据库的概念: 1).数据库的概念:数据库(Database),就是存储数据的仓库. 2).作用:用来存储和管理大量数据的.内部采用了非常便于查询的机制来存储数据,能保证我们在大量数据的情况下 ...

  10. Python—实现ssl认证

    https://blog.csdn.net/vip97yigang/article/details/84721027 https://www.cnblogs.com/lsdb/p/9397530.ht ...