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. kafka消费

    消费模型 kafka模型使用了 发布/订阅.点对点模型. 消息发布 在producer端,通过分片策略,找到对应topic下面的Partition leader,把消息发送到当前Partition 消 ...

  2. 第六章、PXE高效网络装机、Kickstart无人值守安装

    目录 一.部署PXE远程安装服务 1PXE定义 2PXE服务优点 3搭建网络体系前提条件 4PXE实现过程讲解 二.搭建PXE远程安装服务器 三.Kickstart无人值守安装 一.部署PXE远程安装 ...

  3. 接口偶尔超时，竟又是JVM停顿的锅！

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 继上次我们JVM停顿十几秒的问题解决后,我们系统终于稳定了,再也不会无故重启了! 这是之前的文章:耗时几个月,终于 ...

  4. SpringBoot整合RocketMQ

    1.RocketMQ的下载与配置 到官网选择想要的版本下载即可,https://rocketmq.apache.org/release_notes/ 下载速度会比较慢,这里提供目前最新版本4.9.3的 ...

  5. Python教程：执行cmd命令

    我们通常可以使用os模块的命令进行执行cmd 方法一:os.system def system(*args, **kwargs): # real signature unknown "&qu ...

  6. 跟我读论文丨Multi-Model Text Recognition Network

    摘要:语言模型往往被用于文字识别的后处理阶段,本文将语言模型的先验信息和文字的视觉特征进行交互和增强,从而进一步提升文字识别的性能. 本文分享自华为云社区<Multi-Model Text Re ...

  7. idea插件和springboot镜像

    主题 https://blog.csdn.net/zyx1260168395/article/details/102928172 springboot镜像 http://start.springboo ...

  8. zabbix监控添加学习笔记

    在实际生产环境中,除了CPU.内存等一些系统信息可以挂载zabbix的自带模板Template OS Linux:但是一些公司开发的定制服务需要自己写模板或者监控项去监控: 一.监控公司的java服务 ...

  9. LevelSequence源码分析

    前言 这篇文章主要讲的是Unreal LevelSequence RunTime的部分.即在游戏中运行Level Sequence的源码解析.(而且抛去Replicated 的Sequence,一般S ...

  10. [spring]spring详细总结

    spring 1.spring简介 Spring框架是一个开源的应用程序框架,是针对bean的生命周期进行管理的轻量级容器. Spring解决了开发者在J2EE开发中遇到的许多常见的问题,提供了功能强 ...