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. 30.Mysql主从复制、读写分离

    Mysql主从复制.读写分离 目录 Mysql主从复制.读写分离 读写分离 读写分离概述 为什么要读写分离 什么时候要读写分离 主从复制与读写分离 mysql支持的复制类型 主从复制的工作过程 初始环 ...

  2. springboot2.7.x 集成log4j2配置写入日志到mysql自定义表格

    在阅读之前请先查看[springboot集成log4j2] 本文暂不考虑抽象等实现方式,只限于展示如何自定义配置log4j2并写入mysql数据库(自定义结构) 先看下log4j2的配置 <?x ...

  3. JS：条件语句3

    1.while while 语句只要指定条件为 true,就会执行循环. 语法: while(条件){ 语句: } 例: var i = 0; while (i < 5) { console.l ...

  4. SAP JSON 格式化及解析。

    一.首选:/ui2/cl_json     {'key':'value'} /ui2/cl_json=>deserialize( EXPORTING json = json CHANGING d ...

  5. Maven-打包jar指定main函数所在类的一个例子

    问题描述:maven打包jar时,由于带main方法的类没有被加入manifest中,导致执行java -jar mvn-jar-1.0-SNAPSHOT.jar时,会提示没有主清单属性. 解决办法: ...

  6. RPA应用场景-账套建立

    所涉人工数量5操作频率 不定时 场景流程 1.客户按照项目开设专项财务管理,每个项目需要在初期建立自己的账套: 2.运营专员通过邮件发送账套建立申请: 3.根据申请进入金蝶运维后台,依据规则完成账套建 ...

  7. HashMap的实现原理？如何保证HashMap线程安全？

    A:HashMap简单说就是它根据建的hashcode值存储数据的,大多数情况下可以直接定位到它的值,因而具有很快的访问速度,但遍历的顺序是不确定的. B:HashMap基于哈希表,底层结构由数组来实 ...

  8. NC14661 简单的数据结构

    NC14661 简单的数据结构 题目 题目描述 栗酱有一天在网上冲浪的时候发现了一道很有意思的数据结构题. 该数据结构形如长条形. 一开始该容器为空,有以下七种操作. 1 a从前面插入元素a 2 从前 ...

  9. SpringMVC-02

    一.SSM整合[重点] 1 SSM整合配置 问题导入 请描述"SSM整合流程"中各个配置类的作用? 1.1 SSM整合流程 创建工程 SSM整合 Spring SpringConf ...

  10. MIT 6.824 Lab2A Raft之领导者选举

    实验准备 实验代码:git://g.csail.mit.edu/6.824-golabs-2021/src/raft 如何测试:go test -run 2A -race 相关论文:Raft Exte ...