Echarts的使用

最新推荐文章于 2023-05-23 18:07:33 发布

এ醉月聆风雪

最新推荐文章于 2023-05-23 18:07:33 发布

阅读量1.1k

点赞数

文章标签：前端 javascript ecmascript echarts html

本文链接：https://blog.csdn.net/qigechuizi00000/article/details/121655042

版权

1.Echarts的简述

echarts是百度旗下的纯js图形库，鉴于其使用方便、功能强大、跨平台而广受好评，是一个基于 JavaScript 的开源可视化图表库。

链接地址：Apache ECharts

2. Echarts的下载使用

1.下载echarts文件

1 在echarts官网，点击顶部菜单【下载】，在下拉菜单中点击【下载】，点击即可下载js文件

2.配置项查找方式

1在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】

2在“配置项手册”页面，有各种图形的详细配置项与使用方式介绍

3当需要使用某种图形，又不知道有哪些属性可以使用时，可以在此页面找到使用方式

3.实例的使用

1在echarts官网，点击顶部菜单的【实例】

2在左侧菜单是echarts支持的各种类型的图表，例如：折线图、柱状图、饼图、散点图、地图、K线图等等

3点击左侧菜单的类型，如柱状图，在右侧会显示各种柱状图实例，按照实际需要，点击对应图形即可进入明细页

4在具体图形的明细页，左侧是echarts图形的js配置项，右侧是运行效果展示，可以修改左侧配置，点击【运行】即可实时看到效果

3.在html中的使用

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

引入 Apache ECharts

<script src="js/echarts.min.js"></script>

创建一个初始化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script></script>
		<style type="text/css">
			#container {
				width: 1200px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			//初始化echart实例
			var echart = echarts.init(document.getElementById("container"));
			//定义选项
			var option = {
				//调色板
				//01修改主题 dark light 自定义
				//02
				// color:["pink","#f70","#0f7"],
				//标题
				title:
					{
						text: "开课了"
					},
					//鼠标提示
					tooltip:{},
					//图例
					legend:{data:["人数"]},
					//x轴线
					xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
					//y轴线
					yAxis:{},
					//系列数据
					series:[
						//名称 ，类型：柱状图，数据data
						{name:"人数",type:"bar",data:[1000,500,800,400,,1300]},
						]
					
				};

				//设置参数
				echart.setOption(option)
		</script>
	</body>
</html>

自定义主题

1在echarts官网，点击顶部菜单【资源】，在下拉菜单中点击【主题构造工具】

2.点击默认方案的任意一款，更改基本配置等信息

3.下载主题，分为下载文件和复制代码

然后在html中导入即可
<script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
使用
var echart = echarts.init(document.getElementById("container"),purple-passion);

工具箱的应用

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="js/echarts.min.js"></script>
	<style>
	#container{ width: 1200px; height: 800px;}
	</style>
</head>
<body>
	 <div id="container"></div>
	 <script>
	 var echart = echarts.init(document.getElementById("container"),"dark")
	 var option={
		 title:{text:"工具箱"},
		 toolbox:{
			 show:true,//显示
			 feature:{
				 dataZoom:{//缩放
					 yAxisIndex:'none'
				 },
				 dataView:{readOnly:false},//数据视图，可编辑
				 magicType:{type:['line','bar']},//魔法类型
				 restore:{},//重置
				 saveAsImage:{}//保存图片
			 }
		 },
		 legend:{data:"人数"},
		 tooltip:{},
		 xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
		 yAxis:{},
		 series:[
			 {name:"人数",type:"bar",data:[10,20,50,80,60],itemStyle:{color:mycolor,borderRadius:[100,100,0,0]}},
		 ]
	 };
	 echart.setOption(option);
	 </script>
</body>
</html>

এ醉月聆风雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts的使用

1.Echarts的简述echarts是百度旗下的纯js图形库，鉴于其使用方便、功能强大、跨平台而广受好评，是一个基于 JavaScript 的开源可视化图表库。链接地址：Apache ECharts2.Echarts的下载使用1.下载echarts文件 1 在echarts官网，点击顶部菜单【下载】，在下拉菜单中点击【下载】，点击即可下载js文件2.配置项查找方式 1在echarts官网，点击顶部菜单【文档】，在下拉菜单中点击【配置项手册】...
复制链接

扫一扫