大数据可视化技术-echarts02

最新推荐文章于 2021-06-28 21:02:02 发布
最新推荐文章于 2021-06-28 21:02:02 发布
阅读量448 收藏 6
点赞数
分类专栏： 大数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45786520/article/details/118279985
版权

基础柱状图的绘制

结合如下期末语文成绩，绘制柱状图：
在这里插入图片描述
配置项的内容

var option1 = {
			//标题
			title:{
				text:'语文期末成绩', 
				left:250
			},
			// 提示框
			tooltip:{},
			// 图例
			legend:{
				data:['语文']
			},
			// x轴
			xAxis:{
				data:xdata1
			},
			// y轴
			yAxis:{},
			// 
			series:[{
				name:'语文',
				type:'bar',
				color:'#e66',
				data:ydata1
			}]
		};

柱状图的标记与显示

成果物1，标记出语文成绩的最高值和最低值，并标记出平均值线，成果图如下。
在这里插入图片描述
配置项内容

var option2 = {
			// 标题
			title:{
				text:'语文的期末成绩2',
				left:200
			},
			// 提示框
			tooltip:{},
			// 图例
			legend:{
				data:['语文']
			},
			xAxis:{},
			// Y轴内容设置为'category'表示类目轴，必须通过data设置类目数据
			yAxis:{
				type:'category',
				data:xdata1
			},
			
			series:[{
				name:'语文',
				type:'bar',
				data:ydata1,
				// 标记出最大值与最小值
				markPoint:{
					data:[
						{
							type:'max',
							name:'最大值'
						},{
							type:'min',
							name:'最小值'
						}
					]
				},
				// 图中平均线
				markLine:{
					data:[
						{
							type:'average',
							name:'平均值'
						}
					]
				},
				// 让每个柱子的数据显示在柱子上，45度角
				label:{
					show:true,
					rotate:45
				},
				// 柱子的宽度
				barWidth:'50%',
			}]
		};

通用配置的设置

通用配置指的是其他图形都含有的配置，如标题title、提示框tooltip、工具栏toolbox、图例legend。
请根据配置手册中title的属性，在成果物1的基础上将标题设置为‘成绩展示’，设置字体颜色为‘orange’，尝试更改字体风格等设置，设置合适的边框宽度，颜色和边框圆角半径，调整标题位置，并将echarts配置项手册网址设置为主标题的文本超链接。
请根据配置手册中tooltip的属性，设置鼠标移动到柱子后触发提示，提示该该同学的分数为多少分。
请根据配置手册中toolbox.feature的属性，设置工具栏功能，需要由保存图片，数据视图工具，配置项还原，数据区域缩放，动态类型切换。
在这里插入图片描述
配置项内容

var option3 = {
			// 标题样式
			title:{
				text:'成绩展示',
				left:200,
				textStyle:{
					color:'orange',
					fontFamily:'Courier New',
					fontWeight:'bolder',
					fontSize:'20'
				},
				borderWidth:5,
				borderColor:'blue',
				borderRadius:15,
				link:'https://echarts.apache.org/zh/option.html#series',
				target:'blank'
			},
			// 提示框
			tooltip:{
				// 触发器，鼠标移到柱子才显示信息
				trigger:'item',
				triggerOn:'mousemove',
				// 提示框中的内容
				formatter:function(arg){
					// console.log(arg);
					return arg.name+'的'+arg.seriesName+'是'+arg.data
				}
			},
			// 工具栏
			toolbox:{
				// feature属性设置工具栏功能
				feature:{
					// 保存图片
					saveAsImage:{
						type:'png',
						title:'保存图片'
					},
					// 数据视图工具
					dataView:{
						title:'预览可修改'
					},
					// 配置项还原
					restore:{
						show:true,
						title:'重置'
					},
					// 数据区域缩放
					dataZoom:{
						show:true,
						// 框选某个区域进行放大
						brushStyle:{
							color:'grey',
						},
						title:{
							// 缩放前
							zoom:'区域缩放',
							// 缩放后
							back:'区域缩放还原'
						}
					},
					// 动态类型切换
					magicType:{
						// 切换到类型为柱状图和折线图
						type:['bar','line'],
						title:{
							line:'转换为折线图',
							bar:'转换为柱状图'
						}
					}
				},
				// 工具栏位置
				right:100
			},
			// 图例
			legend:{
				data:['语文','数学']
			},
			// x轴数据设置为类目轴
			xAxis:{
				type:'category',
				data:xdata1
			},
			yAxis:{},
			// 传入两组数据
			series:[{
				name:'语文',
				type:'bar',
				data:ydata1,
			},{
				name:'数学',
				type:'bar',
				data:ydata2
			}]
		};

折线图的尝试

在这里插入图片描述
配置项内容

var option5 = {
			title:{
				text:'巧面馆的销量',
				left:150
			},
			// 图例
			legend:{
				data:['巧面馆的销量']
			},
			// 提示框
			tooltip:{
				trigger:'item',
				triggerOn:'mousemove',
				formatter:function(arg){
					// console.log(arg)
					return arg.name+'的销量是'+arg.value
				}
			},
			// 工具栏
			toolbox:{
				right:100,
				feature:{
					saveAsImage:{
						type:'png'
					},
					dataView:{},
					restore:{},
					dataZoom:{},
					magicType:{
						type:['bar','line']
					}
				}
			},
			xAxis:{
				type:'category',
				data:xdata2
			},
			yAxis:{},
			series:[{
				name:'巧面馆的销量',
				type:'line',
				data:ydata4
			}]
		};

堆叠折线图,并实现工具栏

在这里插入图片描述
配置项内容

var option4 = {
			// 标题
			title:{
				text:'康师傅的销量',
				left:100
			},
			// 提示框
			tooltip:{
				show:true,
				trigger:'item',
				// formatter:function(arg){
				// 	console.log(arg)
				// }
			},
			// 工具栏
			toolbox:{
				right:100,
				feature:{
					// 保存图片
					saveAsImage:{
						type:'png'
					},
					// 数据视图
					dataView:{},
					// 重置
					restore:{},
					// 缩放
					dataZoom:{},
					// 类型转换
					magicType:{
						type:['bar','line']
					}
				}
			},
			xAxis:{
				// X轴为类目轴
				type:'category',
				data:xdata2,
				boundaryGap:false
			},
			yAxis:{
				scale:true
			},
			// 图例
			legend:{
				data:'销售量'
			},
			series:[{
				name:'康师傅销量',
				data:ydata3,
				type:'line',
				color:'red',
				smooth:true,
				lineStyle:{
					color:'green',
					type:'dotted'
				},
				areaStyle:{
					color:'pink'
				},
				stack:'all'
			},{
				name:'巧面馆的销量',
				data:ydata4,
				type:'line',
				stack:'all',
				areaStyle:{
					color:'yellow'
				},
				markPoint:{
					data:[{
						type:'max',
						name:'最大值'
					},{
						type:'min',
						name:'最小值'
					}]
				},
				markLine:{
					data:[{
						type:'average',
						name:'巧面馆的平均销售量'
					}]
				},
				markArea:{}
			}]
		};

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>配置实验课</title>
	<!-- 第一步，引入echarts -->
    <script src="./echarts.min.js"></script>

</head>
<body>
	<!-- 创建容器 -->
	<div id="one" style="width: 800px;height: 500px;"></div>
	<div id="two" style="width: 800px;height: 500px;"></div>
	<div id="three" style="width: 800px;height: 500px;"></div>
	<div id="four" style="width: 800px;height: 500px;"></div>
	<div id="five" style="width: 800px;height: 500px;"></div>

	<script type="text/javascript">
		// 获取元素，并初始化
		var myChart1 = echarts.init(document.getElementById('one'));
		xdata1 = ["张三","李四","王五","闰土","小明","茅台","二妞","大强"];
		ydata1 = [88, 92, 63, 77, 94, 80, 72, 86];
		
		// 设置配置项
		var option1 = {
			//标题
			title:{
				text:'语文期末成绩', 
				left:250
			},
			// 提示框
			tooltip:{},
			// 图例
			legend:{
				data:['语文']
			},
			// x轴
			xAxis:{
				data:xdata1
			},
			// y轴
			yAxis:{},
			// 
			series:[{
				name:'语文',
				type:'bar',
				color:'#e66',
				data:ydata1
			}]
		};
		myChart1.setOption(option1);
		
		
		// 任务二
		var myChart2 = echarts.init(document.getElementById('two'));
		
		var option2 = {
			// 标题
			title:{
				text:'语文的期末成绩2',
				left:200
			},
			// 提示框
			tooltip:{},
			// 图例
			legend:{
				data:['语文']
			},
			xAxis:{},
			// Y轴内容设置为'category'表示类目轴，必须通过data设置类目数据
			yAxis:{
				type:'category',
				data:xdata1
			},
			
			series:[{
				name:'语文',
				type:'bar',
				data:ydata1,
				// 标记出最大值与最小值
				markPoint:{
					data:[
						{
							type:'max',
							name:'最大值'
						},{
							type:'min',
							name:'最小值'
						}
					]
				},
				// 图中平均线
				markLine:{
					data:[
						{
							type:'average',
							name:'平均值'
						}
					]
				},
				// 让每个柱子的数据显示在柱子上，45度角
				label:{
					show:true,
					rotate:45
				},
				// 柱子的宽度
				barWidth:'50%',
			}]
		};
		myChart2.setOption(option2);
		
		
		// 任务三
		var myChart3 = echarts.init(document.getElementById('three'));
		ydata2 = [96, 52, 72, 25, 85, 58, 83, 73];
		
		var option3 = {
			// 标题样式
			title:{
				text:'成绩展示',
				left:200,
				textStyle:{
					color:'orange',
					fontFamily:'Courier New',
					fontWeight:'bolder',
					fontSize:'20'
				},
				borderWidth:5,
				borderColor:'blue',
				borderRadius:15,
				link:'https://echarts.apache.org/zh/option.html#series',
				target:'blank'
			},
			// 提示框
			tooltip:{
				// 触发器，鼠标移到柱子才显示信息
				trigger:'item',
				triggerOn:'mousemove',
				// 提示框中的内容
				formatter:function(arg){
					// console.log(arg);
					return arg.name+'的'+arg.seriesName+'是'+arg.data
				}
			},
			// 工具栏
			toolbox:{
				// feature属性设置工具栏功能
				feature:{
					// 保存图片
					saveAsImage:{
						type:'png',
						title:'保存图片'
					},
					// 数据视图工具
					dataView:{
						title:'预览可修改'
					},
					// 配置项还原
					restore:{
						show:true,
						title:'重置'
					},
					// 数据区域缩放
					dataZoom:{
						show:true,
						// 框选某个区域进行放大
						brushStyle:{
							color:'grey',
						},
						title:{
							// 缩放前
							zoom:'区域缩放',
							// 缩放后
							back:'区域缩放还原'
						}
					},
					// 动态类型切换
					magicType:{
						// 切换到类型为柱状图和折线图
						type:['bar','line'],
						title:{
							line:'转换为折线图',
							bar:'转换为柱状图'
						}
					}
				},
				// 工具栏位置
				right:100
			},
			// 图例
			legend:{
				data:['语文','数学']
			},
			// x轴数据设置为类目轴
			xAxis:{
				type:'category',
				data:xdata1
			},
			yAxis:{},
			// 传入两组数据
			series:[{
				name:'语文',
				type:'bar',
				data:ydata1,
			},{
				name:'数学',
				type:'bar',
				data:ydata2
			}]
		};
		myChart3.setOption(option3);
		
		// 任务四
		var myChart4 = echarts.init(document.getElementById('four'));
		xdata2 = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
		ydata3 = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
		ydata4 = [3300, 2000, 1000, 1040, 900, 600, 1300, 1500, 1200, 1300, 1000, 800];
		
		var option4 = {
			// 标题
			title:{
				text:'康师傅的销量',
				left:100
			},
			// 提示框
			tooltip:{
				show:true,
				trigger:'item',
				// formatter:function(arg){
				// 	console.log(arg)
				// }
			},
			// 工具栏
			toolbox:{
				right:100,
				feature:{
					// 保存图片
					saveAsImage:{
						type:'png'
					},
					// 数据视图
					dataView:{},
					// 重置
					restore:{},
					// 缩放
					dataZoom:{},
					// 类型转换
					magicType:{
						type:['bar','line']
					}
				}
			},
			xAxis:{
				// X轴为类目轴
				type:'category',
				data:xdata2,
				boundaryGap:false
			},
			yAxis:{
				scale:true
			},
			// 图例
			legend:{
				data:'销售量'
			},
			series:[{
				name:'康师傅销量',
				data:ydata3,
				type:'line',
				color:'red',
				smooth:true,
				lineStyle:{
					color:'green',
					type:'dotted'
				},
				areaStyle:{
					color:'pink'
				},
				stack:'all'
			},{
				name:'巧面馆的销量',
				data:ydata4,
				type:'line',
				stack:'all',
				areaStyle:{
					color:'yellow'
				},
				markPoint:{
					data:[{
						type:'max',
						name:'最大值'
					},{
						type:'min',
						name:'最小值'
					}]
				},
				markLine:{
					data:[{
						type:'average',
						name:'巧面馆的平均销售量'
					}]
				},
				markArea:{}
			}]
		};
		myChart4.setOption(option4);
		
		
		// 任务五
		var myChart5 = echarts.init(document.getElementById('five'));
		var option5 = {
			title:{
				text:'巧面馆的销量',
				left:150
			},
			// 图例
			legend:{
				data:['巧面馆的销量']
			},
			// 提示框
			tooltip:{
				trigger:'item',
				triggerOn:'mousemove',
				formatter:function(arg){
					// console.log(arg)
					return arg.name+'的销量是'+arg.value
				}
			},
			// 工具栏
			toolbox:{
				right:100,
				feature:{
					saveAsImage:{
						type:'png'
					},
					dataView:{},
					restore:{},
					dataZoom:{},
					magicType:{
						type:['bar','line']
					}
				}
			},
			xAxis:{
				type:'category',
				data:xdata2
			},
			yAxis:{},
			series:[{
				name:'巧面馆的销量',
				type:'line',
				data:ydata4
			}]
		};
		myChart5.setOption(option5)
	</script>

</body>
</html>
@从心
关注
专栏目录
可视化技术介绍之Echarts
manor的博客
12-09 1449
文章目录可视化面板介绍01-使用技术02- 案例适配方案03-基础设置04-header 布局05-mainbox 主体模块06-公共面板模块 panel07-柱形图 bar 模块(布局)08-中间布局09-Echarts-介绍10-Echarts-体验11-Echarts-基础配置12- 柱状图图表（两大步骤）13-柱状图2定制14-折线图1 人员变化模块制作15-折线图2 播放量模块制作16-饼形图 1年龄分布模块制作17-饼形图2 地区分布模块制作（南丁格尔玫瑰图）18-Echarts-社区介绍19
ECharts2
sh2001824的博客
08-22 692
ECharts2
echarts2
qq_53442144的博客
04-02 129
echarts2
Echarts2
weixin_46191854的博客
05-28 315
1、授⼈以渔04_Echarts图表标准配置图示技巧 2. 饼图（pie）详解标准饼图 一、基本配置demo 二、标题（title）配置 三、提示框（tooltip）配置 四、图例（legend）配置 五、系列列表（series ）配置 3. ⼩技巧01 辅助线的作⽤及Echart3.x与2.x中的区别 一、 print 从语句变为函数 原: print 1,2+3 改为: print ( 1,2+3 ) 二、range 与 xrange 原 : range( 0, 4 ) 结果 是 列表 [0,1,2,3
地图相关（一）
wind的博客
06-28 214
PS相关学习资料链接：Pink老师的教程，O(∩_∩)O哈哈~ 图片来源：https://pan.baidu.com/s/1DGRic_SQ9X0Oqbaty_nwfg ，提取码：kowl 总的实现效果： 分解： a. 一个蓝色的圆球 b. 与蓝色圆球大小差不多的浅蓝色线，逆时针旋转 c. 网格顺时针旋转 d. 地图（本节先不实现地图） 背景图 a图： b图： c图： HTML： <div class="map"> <div class="map1">&lt.
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码
02-27
Echarts+Vue3.0 大数据可视化项目源码及教程 柱状图基本设置, 柱状图效果实现, 柱状图效果实现2--XAxis，yAxis, 饼状图基本设置, 饼状图效果实现, 折线图基本设置, 折线图效果实现, 折线图堆叠效果, 散点...
大数据可视化技术-实验十：综合实验
04-01
大数据可视化技术是现代数据分析领域的重要组成部分，它将海量复杂的数据以直观、易理解的方式呈现出来，帮助决策者洞察数据背后的模式、趋势和关联性。在这个“大数据可视化技术-实验十：综合实验”中，我们将深入...
大数据可视化技术-案例全部数据集.zip
07-04
本资料“大数据可视化技术-案例全部数据集.zip”显然是一个关于大数据可视化的教学资源包，包含了一个完整的数据集，用于演示和学习大数据可视化的方法和技术。 在大数据可视化的实践中，我们通常会涉及到以下几个...
可视化大屏(源码）大数据可视化模板前端源码-Echarts
最新发布
08-23
大数据可视化模板前端源码_Echarts
ECharts案例教程2
热门推荐
whqet
01-16 1万+
ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，第1篇我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的应用。
echarts-2.0.2
07-31
echarts-2.0.2的用例，直接打开就可以使用
Echarts-2.2.1
10-30
Echarts2.2.1,百度报表js工具包
百度Echarts2.2.2文档
05-25
百度Echarts2.2.2文档，转为pdf格式了
ECharts-2.2.0.2.jar ECharts-2.2.0.jar
05-11
echarts最新的jar包，找了两三个小时才找到的。希望多捧场。
Echarts2的使用——绘制中国地图
As的博客
04-17 3413
Echarts官网 尽管官网里已有基础教程，但刚入门时难免会遇到不少问题，比如说中文乱码、不会引用示例图等，为此在此打卡记录以下，希望也能帮广大新手绕过一些坑。 如何引用Echarts示例图 打开入门教程，复制图标效果上方一栏的代码 粘贴到记事本里，并保存为 .html文件 注意： 文件名以 “ .html ” 为后缀，保存类型改为 “ 所有文件(* . *) ” ，编码改为 “ UTF...
Echarts系列(一): 可视化技术概述与Echarts⼊⻔
yu923023913的博客
05-28 2825
Echarts系列(一): 可视化技术概述与Echarts⼊⻔ 一、数据可视化概述 ​ 广义上来说，数据可视化本身是一种泛称，它统一了较成熟的科学可视化和较年轻的信息可视化。而在大数据时代，除了包含这两种以外还囊括了在他们基础上发展起来的知识可视化以及结合了数据分析的可视化分析。 ​ 从字面意义来说，数据可视化，顾名思义：就是能够以视觉上的一些展现方式来展现我们想要让用户看到的数据 三、什么是数据可视化？ ​ 狭义上来讲，数据可视化就是借助某些工具以图形去展示数据，从而能够清晰有效地传达与沟通信
ECharts数据可视化：入门、实战与进阶干货分享（GitHub 44.5k）
qq_15041931的博客
01-12 5284
前言 最近接到一个新的任务，说是在公司内部要组织开展技术交流分享会，为了促进程序同事间的技术氛围，提高大家的学习积极性，让更多的人能参与进来，已纳入部门和个人绩效考核范畴。 形式很简单，每周都会进行一次技术分享。分享人由入职时间先后顺序安排。题材不限，可以是自己熟悉的技术领域或某个知识点，比如区块链开发者分享底层公链、联盟链、智能合约等等；服务端开发者分享框架与设计模式，SQL深度优化，消息队列等等，前端开发者分享MVVM模式，WEB前端性能优化，数据可视化，CSS3高级用法等等。 可以是一些通用的技术，比
初识echarts（2）： echarts 配置
小R.的博客
07-31 720
一、标题 title: { text: '第一个 ECharts 实例', //大标题 subtext: '我是副标题', //副标题 sublink: 'http://' //插入网址 left: 'center', //位置 top: 20, //距顶部位置 textStyle: { color: 'black' //设置文本颜色,默认为黑色 } } 二、提示信息 tooltip: { trigge
大数据可视化-echarts饼图
07-01
ECharts是一款非常流行的开源数据可视化库，特别适合用于创建交互式的图表，包括饼图。饼图在大数据可视化中常用于展示各个部分在整体中的占比，非常适合用来呈现数据的分布情况。 以下是如何使用ECharts创建饼图的基本步骤： 1. 引入ECharts库：首先需要在HTML文件中引入ECharts的CDN链接，例如： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> ``` 2. 创建ECharts实例：在JavaScript中，创建一个新的ECharts实例，并设置其容器ID： ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 3. 定义数据和配置：准备数据，比如各个部分的名称和百分比，然后定义饼图的配置项，包括标题、颜色等： ```javascript var option = { title: { text: '饼图示例' }, series: [{ name: '饼图', type: 'pie', data: [ { value: 335, name: '部分A' }, { value: 310, name: '部分B' }, { value: 234, name: '部分C' }, // 更多数据... ], radius: ['50%', '70%'], // 控制饼图大小 label: { normal: { show: true, position: 'center' } }, tooltip: {} // 显示提示信息 }] }; ``` 4. 绘制图表：最后，使用`setOption`方法将配置应用到图表上： ```javascript myChart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值