echarts学习笔记(一)

echarts开发步骤
  1. 创建一个新的html文件
  2. 在html文件head头部信息中导入echarts
  3. 声明一个容器(可以理解为画布)，用于存放echarts
  4. 实例化echarts绑定先前创建的容器
  5. 编写可视化图标相关配置
  6. 将配置应用于我们实例化好的echarts对象
  7. 使用浏览器打开即可看到我们绘制的图表
快速入门
使用editplus(可以使用其他的编辑器)新建html文件[快捷键:ctrl+shift+n]
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

 </body>

</html>
在html头部信息中导入echarts
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="放置echarts.min.js文件全路径(也可以是相对路径)"></script>

  <title>Document</title>

 </head>

 <body>

 </body>

</html>
声明一个容器(可以理解为画布)，用于存放echarts
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="放置echarts.min.js文件全路径(也可以是相对路径)"></script>

  <title>Document</title>

 </head>

 <body>

  <div id="main" style="height:500px;width:500px"></div>

 </body>

</html>
实例化echarts对象绑定之前创建的容器(画布)
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="放置echarts.min.js文件全路径(也可以是相对路径)"></script>

  <title>Document</title>

 </head>

 <body>

  <div id="main" style="height:500px;width:500px"></div>

  <script type="text/javascript">

	var mychart=echarts.init(document.getElementById("main"));

  </script>

 </body>

</html>
编写图表相关配置
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="放置echarts.min.js文件全路径(也可以是相对路径)"></script>

  <title>Document</title>

 </head>

 <body>

  <div id="main" style="height:500px;width:500px"></div>

  <script type="text/javascript">

	var mychart=echarts.init(document.getElementById("main"));

	var option={

		xAxis:{

			type:"category",

			data:["语文","数学","英语"]

		},

		yAxis:{

			type:"value"

		},

		series:[

		{

			type:"bar",

			data:[100,85,96]

		}

		]

	};

  </script>

 </body>

</html>
将编写好的配置应用于我们实例化好的echarts对象
<!DOCTYPE html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="放置echarts.min.js文件全路径(也可以是相对路径)"></script>

  <title>Document</title>

 </head>

 <body>

  <div id="main" style="height:500px;width:500px"></div>

  <script type="text/javascript">

	var mychart=echarts.init(document.getElementById("main"));

	var option={

		xAxis:{

			type:"category",

			data:["语文","数学","英语"]

		},

		yAxis:{

			type:"value"

		},

		series:[

		{

			type:"bar",

			data:[100,85,96]

		}

		]

	};

	mychart.setOption(option);

  </script>

 </body>

</html>
使用浏览器打开我们编写好的html文件查看绘制的图像吧！！

进一步探索
尝试将柱状图改成折线图

如果细心观察，我们会发现，控制图表类型的关键位置就在我们的series中的type属性。

将其修改为"line"试试

now！是不是就变成上面的这样子啦！！

如果我们希望图表的折线可以有一定的圆滑的感觉，可以加上smooth属性

图像就会变成这样：

现在看起来是不是有些圆滑了呢？只不过图像看起来还是比画布小很多啊！可以使用boundaryGap属性将图像两边贴合画布外围哦！

如果我想要让这条线有区域性呢？可以将它修改为面积图

总结

通过学习，我们可以了解到使用echarts绘图的基本步骤以及控制图表样式的相关属性，同样还有其他很多属性等待大家一起挖掘哦！

echarts学习笔记(一)的更多相关文章

  1. Echarts学习笔记之饼图

    注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...

  2. Echarts学习笔记

    1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...

  3. echarts学习笔记（部分angular及ant-design）

    1.在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 前加:host /deep/: 2.echarts横轴自定义时间粒度 两种 ...

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

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

  5. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  6. amazeui学习笔记一（开始使用5）--藏品collections

    amazeui学习笔记一(开始使用5)--藏品collections 一.总结 1.藏品collections:一些 Amaze UI 中没有的功能.amazeui认为好的解决方案.像图表绘制里面的百 ...

  7. Qlik Sense学习笔记之插件开发

    date: 2019-05-06 13:18:45 updated: 2019-08-09 15:18:45 Qlik Sense学习笔记之插件开发 1.开发前的基础工作 1.1 新建插件 dev-h ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

随机推荐

  1. mysql数据恢复 根据旧备份的sql文件和当前data下的ibd文件恢复innodb引擎数据

    1.使用navicat fro mysql数据库工具进行恢复 2.将原有备份的sql文件导入数据库 3.新建一个空数据库 4将备份数据库的数据表复制到新建数据库(只复制表格式) 5.在命令行模式中 u ...

  2. 软件项目管理 7.5.项目进度模型（SPSP）

    [公众号@ "项目管理研究所" 将会第一时间更新文章并分享<行业分析报告>] 归档于软件项目管理初级学习路线 第七章 软件项目进度计划 你猜猜里面是什么-->&l ...

  3. 2.1 动为进程，静为程序 -进程概论 -《zobolの操作系统学习札记》

    2.1 动为进程,静为程序 -进程概论 目录 2.1 动为进程,静为程序 -进程概论 问1:发明进程的原因? 问2:现在计算机中的进程的定义是什么? 问3:为什么进程跟处理器的联系更密切? 问4:进程 ...

  4. tableSizeFor

    HashMap tableSizeFor() /** Returns a power of two size for the given target capacity. 1.(不考虑大于最大容量的情 ...

  5. UiPathExcel写入操作

    一.Excel 写操作 1．写一个单元格 (1)控件介绍 Write Cell: 使用Write Cell控件,在指定单元格写入内容     常用属性介绍: Destination: Cell: 要写 ...

  6. fiddle如何使用代理

    前言 Fiddle作为抓包工具深受程序员的喜爱,可能在代理方面有些会感觉到迷惑的,可以通过本文的学习来掌握一些基本的知识. Fiddle介绍 Fiddler是位于客户端和服务器端的HTTP代理,也是目 ...

  7. bat-配置环境变量

    查看环境变量 set 查看当前所有变量 set path 查看变量path的值 echo %xxx% 查看某一个环境变量 临时设置环境变量 set xxx=xxx set xxx= 永久设置环境变量 ...

  8. 【时序数据库InfluxDB】Windows环境下配置InfluxDB+数据可视化，以及使用 C#进行简单操作的代码实例

    前言:如题.直接上手撸,附带各种截图,就不做介绍了. 1.influxDB的官网下载地址  https://portal.influxdata.com/downloads/ 打开以后,如下图所示,可以 ...

  9. IDEA的项目结构和IDEA的HelloWord

    IDEA首次驱动 1. 选择不导入任何设置,点击 OK 2. 选择 Create New Project 3. 点击 new 按钮,配置安装的 JDK9 版本 选择 JDK9 目录,点击确定 4. 不 ...

  10. NC16884 [NOI2001]食物链

    题目链接 题目 题目描述 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B,B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...