ECharts第二章实训

最新推荐文章于 2024-11-11 09:45:18 发布
最新推荐文章于 2024-11-11 09:45:18 发布
阅读量560 收藏 7
点赞数 9
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaozou_Q/article/details/136802560
版权

实训1 会员基本信息及消费能力对比分析

1,会员入会方式分布情况

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道分布情况',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['男', '女'],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['自愿', '微信推广', '团购促销', '节日活动'],
                },
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    data: [2, 0, 1, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [3, 2, 2, 2],
                },
            ],
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

2，会员年龄段分布情况

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
			title: {
                text: '会员年龄段分布情况',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['18～27岁', '28～37岁', '38～47岁']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
					stack: '年龄段',  //设置堆积效果
                    data: [4, 0, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段',  //设置堆积效果
                    data: [6, 3, 0],
					markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };
 
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

3，城市购买总金额分布情况

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '不同城市消费总金额（单位:元）',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[0];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['广州', '佛山', '深圳', '东莞' ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
				{
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {  //设置正常情况下柱子的样式
                            //barBorderColor: 'rgba(0,0,0,0)',  //设置柱子边框的颜色
                            barBorderColor:'rgba(20,20,0,0.5)',
                            barBorderWidth: 5,  //设置柱子边框的宽度
                            //color: 'rgba(0,0,0,0)'  //设置柱子的颜色
                            color:'rgba(0,220,0,0.8)'
                        },
                        emphasis: {  //设置鼠标滑过时柱子的样式
                            barBorderColor: 'rgba(0,0,0,0)',  //设置鼠标滑动到柱子边框的颜色
                            barBorderWidth: 25,  //设置鼠标滑动到柱子边框的宽度
                            color: 'rgba(0,0,0,0)'  //设置鼠标滑动到柱子的颜色
                        }
                    },
                    data: [0, 801, 1094, 635]
                },
                {
                    name: '生活费',
                    type: 'bar',  //设置柱状图
                    stack: '总量',  //设置堆积
                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [3076, 2275, 1181, 546]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

实训2 会员数量相关分析

1，不同级别会员数量变化分布图

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<!--引入ECharts脚本-->
	<script src="js/echarts.js"></script>
</head>
 
<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM-->
	<div id="main" style="width: 600px; height: 400px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var option = {
			backgroundColor: '#eee',
			title: {	//配置标题组件
				text: "历年不同级别会员数量变化趋势",  //设置主标题
				textStyle: {  //设置主标题文字样式
					color: 'red',
				},
				x: 'center'
			},
			tooltip: {  //配置提示框组件
				trigger: 'axis'
			},
			legend: {
				data: ['普通会员', 'VIP会员'],
				left: 'right'
			},
			xAxis: [  //配置X轴坐标轴
				{
					type: 'category',
					data: ['2016年', '2017年', '2018年']
				}
			],
			yAxis: [  //配置Y轴坐标轴
				{
					type: 'value'
				}
			],
			series: [  //配置数据系列
				{
					name: '普通会员',
					type: 'line',  //设置指定显示为折线
					data: [7, 0, 0],
					smooth: true
				},
				{
					name: 'VIP会员',
					type: 'line',  //设置指定显示为折线
					data: [0, 3, 4],
					smooth: true
				},
			]
		};
		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option); 
	</script>
</body>
 
</html>

Xiaozou_Q
关注
【Python数据分析与可视化】pyecharts数据可视化（实训六）
风口IT猪的成长录
12-06 2920
pyecharts数据可视化（实训六）示例代码 示例代码 from pyecharts import options as opts from pyecharts.globals import ThemeType import numpy as np %matplotlib inline from pyecharts.charts import Bar # x轴数据 items = ["相机", "短视频", "视频", "浏览器", "商城", "购票", "小说", "聊天", "小工具", "理财
Echarts第二章实训
2303_77733754的博客
03-18 623
【代码】Echarts第二章实训。
Echarts常用图表第2章实训
2301_77751917的博客
03-18 508
【代码】Echarts常用图表第2章实训。
Echarts第四章实训
2303_77733754的博客
03-27 738
【代码】Echarts第四章实训。
ECharts第四章项目实战
2202_75544053的博客
04-01 636
2、绘制多漏斗图或多金字塔。
ECharts第四章实训
2202_75544053的博客
03-27 321
【代码】ECharts第四章实训。
ECharts第三章实例
2202_75544053的博客
03-27 188
将图表设置为散点图()，您需要修改数组中每个对象的属性，将属性更改为。此外，散点图通常不需要属性，因为该属性用于定义线图如何连接数据点
echarts实训4：Sring Boot框架
balabalalibala的博客
06-14 409
用户登录
echarts实训5：Spring Boot + ECharts 案例演示
balabalalibala的博客
06-16 333
用Spring Boot + ECharts做人数柱状图
echarts实训3：利用SSM框架实现用户登录功能
balabalalibala的博客
06-05 411
用SSM框架实现用户登录
Visual Studio Code (echarts)数据可视化’历年不同级别会员数量变化折线图‘
qq_45894761的博客
03-08 1295
完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
前端 Flex 布局语法详解
ning的博客
11-10 937
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
最新发布
狼堡灰太狼的博客
11-11 664
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 945
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
JavaScript 实现文本转语音功能
bjjgff的博客
11-08 495
通过这篇教程，我们使用 HTML、CSS 和 JavaScript 构建了一个简单的文本转语音应用。该项目不仅展示了 Web Speech API 的强大功能，同时也展示了如何将前端技术结合起来实现有趣的功能。希望这篇文章对你有所帮助，如果有任何问题或改进建议，欢迎在评论区留言！相关文章你从未见过的 10 个令人惊叹的 JavaScript 技巧HTML+CSS+JS 实现动态模态超级英雄卡片效果使用 HTML 和 CSS 创建 3D 菜单效果。
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 691
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
Mybatis拦截器中获取@RequestBody表单的值修改查询SQL
十二的博客
11-06 516
Slf4j/*** 存储body数据的容器*/// 将body数据存储起来try {try {= null) {if (reader!
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1515
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
web数据可视化（ECharts版）第四章实训漏斗图
10-19
Web数据可视化（ECharts版本）的第四章实训通常会涉及如何创建和定制漏斗图。漏斗图是一种图表类型，常用于展示各个步骤之间的转化率，比如销售流程中顾客从浏览到购买的环节分布。在ECharts中，你可以按照以下步骤...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值