大数据开发比赛echarts所有要学习的主要图表 简单化 得分点

最新推荐文章于 2023-02-21 21:05:13 发布
最新推荐文章于 2023-02-21 21:05:13 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： 笔记 文章标签： 可视化 数据可视化 python echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51026773/article/details/121561002
版权
本文介绍了Echarts的基本概念和使用步骤，通过实例展示了如何创建和配置各种图表，包括玫瑰图、K线图、漏斗图、条形图和聚合图。详细讲解了每个图表的配置选项，如title、legend、tooltip、xAxis和yAxis等，帮助读者快速掌握Echarts的数据可视化技巧。
摘要由CSDN通过智能技术生成

大数据开发echarts所有要学习的主要图表 简单化 得分点

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

一、echarts是什么？

结合数据的来源呈现的一个数据可视化界面 呈现不同的图形 如 折线饼图等等一些带个人直观的效果看到清晰的数据可视化 显示数值 百分比 等等诸如此类

二、使用步骤

1.引入js库

请添加图片描述
找不到echarts包的同学直接搜echarts官网 即可获取

2.规划好css布局 引入（src）echarts

<style>
		.box{
			width: 600px;
			height: 600px;
			margin: auto;
			background-color: #F0F8FF;
		}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>

#实例化初始化echarts 并且给它一个容器

mychart=echarts.init(document.querySelector(".box"))

在之下重点编辑option集合的这一部分代码

var option={

//中间实现echarts的组件 显示数值 标题等主要得分点  参考2021年国赛题目 实现的的得分点

}

主要几个效果实现编辑样式代码

title:{ -------------标题

}
legend{ ------------显示所带的显示名称
}
tooltip{ ---------------显示数值

}
xAxis:{}--------------x轴
yAxis:{}-------------y轴
series:[{--------------合集显示数值 放置type的地方

}]

##子属性
title:{ -------------标题
text:’ ’ -----主标题
subtext:’ '-----副标题
textStyle:{
color:‘rgb(255，0，0，1)’ --------显示标题红色
}
subtextStyle:{
color:‘rgb(255，0，0，1)’ --------显示副标题红色
}
}
}
tooltip:{
trgger:‘item’ -----显示数值
}
legend:{
left:‘left’-----数值名字方式地方
}

主要编辑考核的图表 type类型对应

柱状------- bar
折线-------line
柱状堆叠-----bar
折线堆叠-----line
折线柱状混合— line和bar
饼图------pie
玫瑰图-----pie
数据聚合图-----boxplot
气泡图------scatter
地理坐标图-----map
k线图-----candlestick
盒须图-------boplot和scatter
条形图-------bar
雷达图-----radat
热力图----heatmap
关系图------graph
漏斗图-----funnel
仪表盘------gauge

接下来我们编辑几个重要的图表

玫瑰图

		var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
			series:[{
				radius:[50,250],------半径
				roseType:'area',--------区域面积
				itemStyle:{  ----------边界区域
					borderRadius:8
				},
				type:'pie',
				data:[
					{value:5154,name:'ASDA'},
						{value:6154,name:'SDA'},	
						{value:2154,name:'DA'},
							{value:7154,name:'ASA'},
								{value:9154,name:'DA'},
									{value:4154,name:'A'},
										{value:3154,name:'A'},
				],
				
				
			}]
			
		};
	  mychart.setOption(option);-----释放数据显示图表
		</script>
	</body>
</html>

k线图

	var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
	     xAxis:{
			 data:["2017-5","2015-3","2016-2","2011-2","2011-8"]
		 },
		 yAxis:{},
		 
			series:[{
					type:'candlestick',
			data:[
				[30,20,20,50],
				[50,20,30,20],
				[80,20,20,30],
				[20,20,20,20],
			],
		
			
				
			}]
			
		};
	  mychart.setOption(option);

漏斗图

	var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
	
			series:[{
			    data:[
					{value:45,name:'DS'},
					{value:65,name:'S21'},
					{value:25,name:'D'},
					{value:15,name:'ADS'},
					{value:85,name:'DS'},
					{value:65,name:'S'},	
				],
				type:'funnel',
				
			}]
			
		};
	  mychart.setOption(option);

条形图


		var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
			xAxis:{
				
			},
			yAxis:{
				data:["sada","sad","qweqw","dasd","sad"]
			},
			series:[{
			    data:[30,60,50,40,20,30,60],
				type:'bar',
				
				
			}]
			
		};
	  mychart.setOption(option);
		</script>
	</body>
</html>

聚合图


		var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			dataset:[
				{
				source:[
				  [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
				                [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
				                [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
				                [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
				                [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
					
				],
				},
				{
					transform:{
						type:'boxplot'
					}
				}
			],
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
			xAxis:{
				type:'category'
			},
			yAxis:{
				
			},
			series:[{
		   type:'boxplot',
		   name:'sadad',
		   datasetIndex:1
		},
		{
			type:'scatter',
			name:'sada',
			datasetIndex:2
		}]
			
		};
	  mychart.setOption(option);
		</script>
	</body>
</html>

气泡图-------这一块可以线定义一个数组放入


	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		mychart=echarts.init(document.querySelector(".box"))
		var data=[
			[[50,22],
			[20,33],
			[66,50],
			[77,60],
			[88,70],
			[44,20],
			[66,30],
			[88,60],
			[22,70],
			[44,90],
			[33,20],
			  
			
			],
			[
			[50,22],
			[20,33],
			[66,50],
			[77,60],
			[88,70],
			[44,20],
			[66,30],
			[88,60],
			[22,70],
			[44,90],
			[33,20]
				
			],
			
		];
		var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
			xAxis:{
				
			},
			yAxis:{
				
			},
			series:[{
				type:'scatter',
				name:'ASDAD',
			data:data[0],
			symbolSize:function(data){
				return data[0]
			},
			
			
			
			
			
			},
		{
			type:'scatter',
			name:'DAD',
		data:data[1],
		symbolSize:function(data){
			return data[1]/2
		},
		
		
		
		
		
		},]
			
		};
	  mychart.setOption(option);
		</script>
	</body>
</html>

散点图

var option={
			title:{
				text:'sadas',
				subtext:'asdsad',
				textStyle:{
					color:'rgb(255,0,0,1)'
				},
				subtextStyle:{
					color:'rgb(255,0,0,1)'
				},
			},
			tooltip:{
				tegger:'item'
			},
			legend:{
				left:'left'
			},
			xAxis:{
				
			},
			yAxis:{
				
			},
			series:[{
				data:[
[30,50],
[20,40],
[30,30],
[40,60],
[80,90]
								],
								type:'scatter',
								name:'SADAD',
								
				
			}]
			
		};
	  mychart.setOption(option);

本次代码如下如有问题可以私信 互相学习谢谢

清晨Q
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts考试分数统计图表实例
06-24
echarts考试分数统计图表实例是一款vue基于echarts绘制雷塔图，蜘蛛网图，不规则多边形，网络图表。
基echarts实现的地图大数据图表可视化，精美
03-04
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它基于 SVG+Canvas 技术，提供了丰富的图表类型，包括但不限于折线图、柱状图、散点图、饼图以及K线图等，用于帮助开发者在 Web 应用中高效地展示大量数据...
echarts 仪表盘得分情况
Y_Cfeng的博客
09-18 1284
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .chart_box { width: 1
echarts得分环
xiaoyuermino的博客
04-01 5962
echarts 得分环样式修改：由echarts的官方效果图1改为效果图2 效果图1： === 效果图2： var chartDom = document.getElementById(‘defenh’); var myChart = echarts.init(chartDom); var option; option = { color: ['#d464ff', '#090d43', '#4168f5', '#090d43', '#18feff'], //环的颜色
大数据技能竞赛 echarts热力图简写易懂版本 over
weixin_51026773的博客
11-29 1497
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、热力图二、使用步骤1.引入库 [echartsJS文件连接下载地址](https://www.jsdelivr.com/package/npm/echarts)2.准备好代码容器引入echarts js文件数据集完整代码cost data数组是定义里面的数据量.map(function(item){ return [item[0],item[1],item[2]||'-']; });visualMap:{max:15,min
echarts实现评分水球+环形图
qq_44915112的博客
12-03 931
//基本配置如下 var max = 500; //满刻度大小 var scroe = 80,scroePer=scroe/100; var data = max * scroePer; option = { backgroundColor:'#fff', title: { top: '47%', left: 'center', text: scroe + ' 分', text...
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台
11-20
一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。项目中部分前端库采用外部CDN引入，可以减少...
居于echarts酷炫的大数据统计可视化图表
08-24
居于echarts酷炫的大数据统计可视化图表 可用于大数据看板
echarts可视化图表 - 大数据
最新发布
07-12
【标题】“echarts柱状图可视化图表 - 大数据” 这是一个使用大数据生成的柱状图可视化图表。 【描述】“柱状图可视化图表 - 大数据” 是一个数据可视化工具，它使用大数据集来生成柱状图。柱状图是一种常见的数据...
echarts 图表 折线图
07-21
echarts 图表 折线图
echarts环状图表数据统计插件.zip
01-05
echarts环状图表数据统计插件,非常好看，自己项目中常用到的数据统计展示。环状图表数据统计插件，环状图表数据统计插件
VUEecharts图表之得分环
m0_50884068的博客
11-05 1945
// main.js import 'element-ui/lib/theme-chalk/index.css'; import 'echarts'; // 页面使用 <template> <div> <div :style="{ width: '700px', height: '500px' }" ref="yibiaoid"></div> </div> </template> <script
Python Echarts可视化豆瓣电影TOP20评分
Ganxiang
11-16 2108
@author XGan 2019/11/16 周六 可视化的数据格式csv文件 可视化的单元格 title & star 使用python echarts 1.0x 版本 echarts 0.5x 与1.0x 有很大差别，有时间多去了解，我也正学习过程中！ python–代码 import pandas as pd # 调用pandas库 来读取excell的文件 import n...
vue+echarts高考分数和排名分析图表
ICode联盟
10-05 334
vue+echarts高考分数和排名分析图表。
echarts之环形图
李海江的博客
05-09 1247
环形图，实际上就是饼图，，先贴上代码 <html lang="en"> <head> <meta charset="UTF-8"> <!--引入echarts文件--> <script src="../js/echarts.min.js"></script> <script src=".....
echarts圆环百分比图示
热门推荐
极简
05-18 3万+
一、效果图 二、代码 html<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="pieDiagram" class="floatLeft" style="height:400px;wid
echarts环状饼图
九段刀客的博客
02-21 303
【代码】echarts环状饼图。
Echarts 不同图表的使用
qianmingmaoyao的博客
10-23 257
Echarts 不同图表的使用
Echarts图表详解：从入门到精通——大数据可视化的利器
这个课程旨在让学员不仅能够熟悉Echarts的各个功能，还能掌握数据可视化的理论基础和实战技能，为未来从事大数据开发工程师或分析师等相关岗位打下坚实的基础。通过学习，学员将具备利用Echarts进行高效、美观的数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值