echarts学习笔记(一)

2022 年 8 月 31 日
筆記
前端可视化技术, 大数据

echarts学习笔记(一)

echarts开发步骤

创建一个新的html文件
在html文件head头部信息中导入echarts
声明一个容器(可以理解为画布)，用于存放echarts
实例化echarts绑定先前创建的容器
编写可视化图标相关配置
将配置应用于我们实例化好的echarts对象
使用浏览器打开即可看到我们绘制的图表

快速入门

使用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>