echarts学习笔记(一)

博客分享

 0  226

张三 2022-08-31 23:03:54

悬赏：0 积分收藏

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" ></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" ></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" ></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" ></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>