大数据可视化项目echarts最重要的图表

最新推荐文章于 2024-07-24 16:53:23 发布

清晨Q

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_51026773/article/details/120953832

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Flask应用中结合 Jinja2 模板和 Echarts 模块进行大数据可视化。通过示例展示了创建简化版的柱状图和折线图，用于展示成绩数据。Echarts 是一个强大的前端数据可视化库，适合在Web应用中展示复杂的数据图表。

摘要由CSDN通过智能技术生成

大数据可视化项目最重要的图表：

大数据可视化在flask框架中jinjia语句的运用以及echarts模块实现可视化数据

下面列举echarts中重要的相对图表：

折线图柱状图饼图玫瑰图（南丁格尔玫瑰图）

注意一下图表为最简化图表
柱状图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柱状图</title>
		<style>
		.box{
			width: 600px;
			height: 600px;
			margin: auto;
			background-color: aqua;
		}
		
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		var mychart=echarts.init(document.querySelector(".box"))
		var option = {
			xAxis:{
				type:"category",
				data:["张三","李四","王五","赵六","小明","毛体","二妞"]
			},
			yAxis:{
				type:"value"
			},
			series:[
			{
				name:"成绩",
				type:"bar",
				data:["78","88","88","88","120","80","99"]
			}
			]
			
			
		};
		mychart.setOption(option);
		</script>
	</body>
</html>

折线图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>柱状图</title>
		<style>
		.box{
			width: 600px;
			height: 600px;
			margin: auto;
			background-color: aqua;
		}
		
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		var mychart=echarts.init(document.querySelector(".box"))
		var option = {
			xAxis:{
				type:"category",
				data:["张三","李四","王五","赵六","小明","毛体","二妞"]
			},
			yAxis:{
				type:"value"
			},
			series:[
			{
				name:"成绩",
				type:"line",
				data:["78","88","88","88","120","80","99"]
			}
			]
			
			
		};
		mychart.setOption(option);
		</script>
	</body>
</html>

清晨Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大数据可视化项目echarts最重要的图表

大数据可视化项目最重要的图表：大数据可视化在flask框架中jinjia语句的运用以及echarts模块实现可视化数据下面列举echarts中重要的相对图表：折线图柱状图饼图玫瑰图（南丁格尔玫瑰图）注意一下图表为最简化图表柱状图：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱状图</title> <style>
复制链接

扫一扫