快速上手echarts—让你的数据更直观

最新推荐文章于 2024-06-03 09:28:39 发布

秃头老石

最新推荐文章于 2024-06-03 09:28:39 发布

阅读量1.2k

点赞数 1

分类专栏： Vue3 文章标签： macos vue.js 前端

本文链接：https://blog.csdn.net/sobject/article/details/123807627

版权

Vue3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

文章目录

前言
- 百度开发团队制作，开源交个apache基金管理
一、echarts是什么？
二、使用步骤
- 1.引入库

前言

百度开发团队制作，开源交个apache基金管理

提示：以下是本篇文章正文内容，下面案例可供参考

一、echarts是什么？

制作图表的javascript库
同类型产品hightCharts D3

下载链接: 官网

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/echarts.min.js"></script>
	</head>
	<body>
		<div id="container" style="width:800px; height: 600px;"></div>
		<script>
		// 01 创建实例
		var echart = echarts.init(document.getElementById("container"));
		// 02 设置option参数
		var  option = {}
		// 03 更新option
		echart.setOption(option);
		</script>
	</body>
</html>

柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/echarts.min.js"></script>
	</head>
	<body>
		<div id="container" style="width:800px; height: 600px;"></div>
		<script>
		// 01 创建实例
		var echart = echarts.init(document.getElementById("container"));
		// 02 设置option参数
		var  option = {
			title:{
				text:"vue考试成绩分析图"  //标题
			},
			legend:{data:["成绩"]}, //图例
			tooltip:{},				//鼠标提示
			xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},//x轴线
			yAxis:{},//y轴线
			series:[ //图数据
			// type 类型		// bar柱状图
			// data数据
			// name 名称注释和legend图例保持一致
				{type:"bar",data:[90,60,33,88,99],name:"成绩"}
			]
		}
		// 03 更新option
		echart.setOption(option);
		</script>
	</body>
</html>

线型，面积，饼形图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/echarts.min.js"></script>
	</head>
	<body>
		<div id="container" style="width:800px; height: 600px;"></div>
		<script>
			// 01 创建实例
			var echart = echarts.init(document.getElementById("container"));
			// 02 设置option参数
			var option = {
				title: {
					text: "vue考试成绩分析图" //标题
				},
				legend: {
					data: ["成绩", "平均成绩", "80分以上人数", "题型"]
				}, //图例
				tooltip: {}, //鼠标提示
				xAxis: {
					data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
				}, //x轴线
				yAxis: {}, //y轴线
				series: [ //图数据
					// type 类型		// bar柱状图
					// data数据
					// name 名称注释和legend图例保持一致
					{
					//柱状图
						type: "bar",
						data: [90, 60, 33, 88, 99],
						name: "成绩"
					},
					// line 平均成绩 smooth 平滑
					{type: "line",data: [88, 66, 55, 77, 48],name: "平均成绩",smooth: true},
					// areaStyle 面积
					{type: "line",data: [10, 20, 15, 6, 3],name: "80分以上人数",smooth: true,areaStyle: {color: "#f70"}},
					// pie饼形图
					{
						type: "pie",
						data: [{name: "选择题",value: 50},{name: "填空题",value: 20},{name: "问答题",value: 30},{name: "判断题",value: 10}],
						name: "题型",radius:["10%","30%"],  //半径						
						top:"-50%",	  //位置						
						left:"10%"
					},
					// 自学路径：https://echarts.apache.org/zh/index.html
					// 文档>配置手册>serries>type:pie
				]
			}
			// 03 更新option
			echart.setOption(option);
		</script>
	</body>
</html>

堆叠图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="container" style="width: 800px; height: 600px;"></div>
		<script>
		 
		// 01 初始化
		var echart = echarts.init(document.getElementById("container"),'dark');
		// 02 定义选项
		var option = {
			title:{ text:"堆叠图"}, 	//标题
			tooltip:{trigger:"axis"},//axis轴线，item元素					//提示
			legend:{data:["ui","java","web","python"]}, 		// 图例
			xAxis:{}, //x轴线
			yAxis:{data:["2019","2020","2022"]}, 
			label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
			series:[  					// 系列数据
				{name:"ui",type:"bar",data:[120,80,70],stack:true,
					// label标签 show显示 position位置,insideRight 内部右侧，formatter格式化
					// {a} 系列名称 {b}轴线名称 {c}值
					label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
				},
				{name:"java",type:"bar",data:[27,50,100],stack:true},
				{name:"web",type:"bar",data:[180,220,240],stack:true},
				{name:"python",type:"bar",data:[200,120,80],stack:true}
			]
		}
		// 03 更新选项
		echart.setOption(option);
		</script>
	</body>
</html>

富文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
	</head>
	<body>
		<div id="container" style="width:800px; height:600px"></div>
		<script type="text/javascript">
			var echart = echarts.init(document.getElementById("container"),'dark');
			var option= {
				title:{text:"网站访问来源"},
				tooltip:{},
				series:[
					{type:"pie",name:"来源",radius:["30%","50%"],
					data:[
						{value:120,name:"百度",label:{
							show:true,
							position:"center",
							// a 系列名称 b数据名称 c数据值 d百分百 big与small在rich定义好的样式
							formatter:"{big|{d}}{small|%}\n{b}",
							// 定义富文本样式样式
							rich:{
								big:{fontSize:"36px",fontWeight:900},
								small:{fontSize:"12px",color:"#00aaff"}
							}
						}},
						{value:25,name:"其他",label:{show:false}}
					]}
				]
			};
			echart.setOption(option);
		</script>
	</body>
</html>

秃头老石

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速上手echarts—让你的数据更直观

文章目录前言百度开发团队制作，开源交个apache基金管理一、echarts是什么？二、使用步骤1.引入库柱状图线型，面积，饼形图堆叠图富文本前言百度开发团队制作，开源交个apache基金管理提示：以下是本篇文章正文内容，下面案例可供参考一、echarts是什么？制作图表的javascript库同类型产品hightCharts D3下载链接: 官网二、使用步骤1.引入库代码如下（示例）：<!DOCTYPE html><html> <head&g
复制链接

扫一扫