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. 树莓派开发笔记（十七）：树莓派4B+上Qt多用户连接操作Mysql数据库同步（单条数据悲观锁）

    前言   安装了mysq数据库,最终时为了实现在一个树莓派上实现多用户多进程操作的同步问题,避免数据并发出现一些错误,本篇安装了远程服务并且讲述了使用Qt进行悲观锁for update操作,命令行进行 ...

  2. BUUCTF-webshell后门

    webshell后门 老方法,D盾直接查杀. flag{ba8e6c6f35a53933b871480bb9a9545c}

  3. 下载nltk数据包报错

    安装nltk需要两步:安装nltk和安装nltk_data数据包 安装nltk 安装nltk很简单,可以直接在pycharm环境中安装,flie -> settings-> Python ...

  4. Mac安装Brew包管理系统

    Mac安装Brew包管理系统 前言 为什么需要安装brew 作为一个开发人员, 习惯了使用centos的yum和ubuntu的apt, 在mac中有没有这两个工具的平替? 有, 就是Brew. Bre ...

  5. SAP 实例 13 Random Grouping with LOOP

    REPORT demo_loop_group_by_random. CLASS demo DEFINITION. PUBLIC SECTION. CLASS-METHODS: main, class_ ...

  6. Spring框架系列(7) - Spring IOC实现原理详解之IOC初始化流程

    上文,我们看了IOC设计要点和设计结构:紧接着这篇,我们可以看下源码的实现了:Spring如何实现将资源配置(以xml配置为例)通过加载,解析,生成BeanDefination并注册到IoC容器中的. ...

  7. 效率效率！如何使用Python读写多个sheet文件

    前言 怎么样使用Python提高自己的工作效率,今天就给大家分享这个吧. 我们经常用pandas读入读写excel文件,经常会遇到一个excel文件里存在多个sheet文件,这个时候,就需要一次性读取 ...

  8. [.NET6]使用ML.NET+ONNX预训练模型整活B站经典《华强买瓜》

    最近在看微软开源的机器学习框架ML.NET使用别人的预训练模型(开放神经网络交换格式.onnx)来识别图像,然后逛github发现一个好玩的repo.决定整活一期博客. 首先还是稍微科普一下机器学习相 ...

  9. 攻防世界MISC—进阶区32—37

    32.normal_png 得到一张png,扔进kali中binwalk 和 pngcheck一下,发现CRC报错 尝试修改图片高度,我是把height的2改为4,得到flag 33.很普通的数独 得 ...

  10. centos7更改中文

    这是在CentOS7中设置,CentOS6的是在 .etc/sysconfig/i18n 配置文件下.在root用户下操作,使用 locale 命令查看语言环境,看到 LANG=en_US.utf8 ...