8. 数据可视化_项目一

创建web项目

显示效果图代码

效果图

步骤

 <!DOCTYPE html>
<html lang="en">
<!--
head标签有两个作用
1、引入界面需要的插件 js插件
2、设置界面内容的样式css以及页面的标题
-->
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <!-- 第一步  引入echarts的插件-->
    <script src="js/echarts.min.js"></script>
    <!--head标签中的style标签就是css代码编写区域
    主要是用来给html内容设置样式和位置
    style中css代码语法规则如下:
    选择器{
       css属性名:css属性值;
       css属性名:css属性值
    }
    设置位置,使用定位来完成,定位是css中一种布局
    布局代表的是将元素放到界面上的那个位置
    -->
    <style>
        #month{
            width: 500px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 10px;
            left: 0px;
        }
        #day{
            width: 500px;
            height: 300px;
            background-color: green;
            position: absolute;
            top: 10px;
            left: 510px;
        }
        #age{
            width: 500px;
            height: 500px;
            background-color: beige;
            position: absolute;
            left: 0px;
            top: 320px;
        }
    </style>
</head>
<body>
<!-- 第二步  声明一个html内容  容器-为了放图表的
 div有个特点,默认没有大小和颜色(样式)
 -->
<div id="month"></div>
<div id="day"></div>
<div id="hour"></div>
<div id="age"></div>
<div id="area"></div>
 
<script>
    //支持定义函数---就是Java的方法
    function monthCharts(){
        //month图表第四步  echarts.init初始化html容器
        var monthContainer = echarts.init(document.getElementById("month"))
        //month图表第五步  获取图表代码
        var monthOption = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        //month图表第六步  将图表放入到第四步初始化话之后的容器中
        monthContainer.setOption(monthOption)
    }
 
    function dayCharts(){
        //day图表的第四步  初识化容器
        var dayContainer = echarts.init(document.getElementById("day"))
        //day图表的第五步  准备柱状图
        var dayOption = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        };
        //day图表的第六步 将图表放到容器中
        dayContainer.setOption(dayOption)
    }
 
    function ageCharts(){
        //age的第四步 初始化
        var ageContainer = echarts.init(document.getElementById("age"))
        //age的第五步  准备图表
        var ageOption = {
            title: {
                text: '不同年龄段用户的访问量',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //age的第六步 将报表放到容器中
        ageContainer.setOption(ageOption)
    }
 
    //如果定义了函数 函数只有调用了才会执行
    monthCharts()
    dayCharts()
    ageCharts()
 
</script>
</body>
</html>

posted @ 2022-08-11 09:20 jsqup 阅读(19) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 9. 重新创建项目及可视化编写(maven+web)_项目一

· 可视化爬虫工具（八爪鱼）的使用

· 第八章数据可视化

· |NO.Z.00076|——————————|BigDataEnd|——|Hadoop&PB级数仓.V05|——|PB数仓.v05|数据可视化|

· Qt数据可视化项目

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

公告

昵称： jsqup
园龄： 3年7个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. java9新特性(1)

jsqup

8. 数据可视化_项目一

创建web项目

显示效果图代码

效果图

步骤

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<!--
	head标签有两个作用
	1、引入界面需要的插件 js插件
	2、设置界面内容的样式css以及页面的标题
	-->
	<head>
	<meta charset="UTF-8">
	<title>数据可视化</title>
	<!-- 第一步引入echarts的插件-->
	<script src="js/echarts.min.js"></script>
	<!--head标签中的style标签就是css代码编写区域
	主要是用来给html内容设置样式和位置
	style中css代码语法规则如下:
	选择器{
	css属性名:css属性值;
	css属性名:css属性值
	}
	设置位置,使用定位来完成,定位是css中一种布局
	布局代表的是将元素放到界面上的那个位置
	-->
	<style>
	#month{
	width: 500px;
	height: 300px;
	background-color: red;
	position: absolute;
	top: 10px;
	left: 0px;
	}
	#day{
	width: 500px;
	height: 300px;
	background-color: green;
	position: absolute;
	top: 10px;
	left: 510px;
	}
	#age{
	width: 500px;
	height: 500px;
	background-color: beige;
	position: absolute;
	left: 0px;
	top: 320px;
	}
	</style>
	</head>
	<body>
	<!-- 第二步声明一个html内容容器-为了放图表的
	div有个特点,默认没有大小和颜色(样式)
	-->
	<div id="month"></div>
	<div id="day"></div>
	<div id="hour"></div>
	<div id="age"></div>
	<div id="area"></div>

	<script>
	//支持定义函数---就是Java的方法
	function monthCharts(){
	//month图表第四步 echarts.init初始化html容器
	var monthContainer = echarts.init(document.getElementById("month"))
	//month图表第五步获取图表代码
	var monthOption = {
	xAxis: {
	type: 'category',
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
	type: 'value'
	},
	series: [
	{
	data: [150, 230, 224, 218, 135, 147, 260],
	type: 'line'
	}
	]
	};
	//month图表第六步将图表放入到第四步初始化话之后的容器中
	monthContainer.setOption(monthOption)
	}

	function dayCharts(){
	//day图表的第四步初识化容器
	var dayContainer = echarts.init(document.getElementById("day"))
	//day图表的第五步准备柱状图
	var dayOption = {
	xAxis: {
	type: 'category',
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
	type: 'value'
	},
	series: [
	{
	data: [120, 200, 150, 80, 70, 110, 130],
	type: 'bar'
	}
	]
	};
	//day图表的第六步将图表放到容器中
	dayContainer.setOption(dayOption)
	}

	function ageCharts(){
	//age的第四步初始化
	var ageContainer = echarts.init(document.getElementById("age"))
	//age的第五步准备图表
	var ageOption = {
	title: {
	text: '不同年龄段用户的访问量',
	left: 'center'
	},
	tooltip: {
	trigger: 'item'
	},
	legend: {
	orient: 'vertical',
	left: 'left'
	},
	series: [
	{
	name: 'Access From',
	type: 'pie',
	radius: '50%',
	data: [
	{ value: 1048, name: 'Search Engine' },
	{ value: 735, name: 'Direct' },
	{ value: 580, name: 'Email' },
	{ value: 484, name: 'Union Ads' },
	{ value: 300, name: 'Video Ads' }
	],
	emphasis: {
	itemStyle: {
	shadowBlur: 10,
	shadowOffsetX: 0,
	shadowColor: 'rgba(0, 0, 0, 0.5)'
	}
	}
	}
	]
	};
	//age的第六步将报表放到容器中
	ageContainer.setOption(ageOption)
	}

	//如果定义了函数函数只有调用了才会执行
	monthCharts()
	dayCharts()
	ageCharts()

	</script>
	</body>
	</html>