ECharts第二章实训

最新推荐文章于 2024-09-03 16:07:32 发布
最新推荐文章于 2024-09-03 16:07:32 发布
阅读量478 收藏 6
点赞数 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
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts第二章实训
2303_77733754的博客
03-18 541
【代码】Echarts第二章实训。
Echarts第四章实训
2303_77733754的博客
03-27 555
【代码】Echarts第四章实训。
ECharts第四章项目实战
2202_75544053的博客
04-01 463
2、绘制多漏斗图或多金字塔。
Echarts常用图表第2章实训
2301_77751917的博客
03-18 428
【代码】Echarts常用图表第2章实训。
ECharts第四章实训
2202_75544053的博客
03-27 290
【代码】ECharts第四章实训。
ECharts第三章实例
2202_75544053的博客
03-27 174
将图表设置为散点图()，您需要修改数组中每个对象的属性，将属性更改为。此外，散点图通常不需要属性，因为该属性用于定义线图如何连接数据点
echarts实训4：Sring Boot框架
balabalalibala的博客
06-14 383
用户登录
echarts实训5：Spring Boot + ECharts 案例演示
balabalalibala的博客
06-16 301
用Spring Boot + ECharts做人数柱状图
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
谢谢你们的关注
03-05 1120
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
【Python数据分析与可视化】pyecharts数据可视化（实训六）
风口IT猪的成长录
12-06 2872
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实训3：利用SSM框架实现用户登录功能
balabalalibala的博客
06-05 366
用SSM框架实现用户登录
ECharts-html 实训（四）
2301_77563994的博客
04-01 1659
散点图，顾名思义就是使用一些散乱的点来展示数据的一种图表，这些点在哪个位置，是由其X值和Y值确定的，因此散点图也叫做XY散点图，
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 473
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
关于前端服务器字体的引用
qq_69304031的博客
09-02 457
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
js对象操作常用方法
m0_75276704的博客
09-02 564
2.构造函数创建 2.方括号 三、添加属性 四、删除属性 五、判断属性是否存在 1.in运算符 2.hasOwnProperty方法 六、遍历对象属性 1.for...in...循环 2.Object.keys，Object.values，Object.entries 七、深拷贝与浅拷贝 1.浅拷贝 2.深拷贝 八、合并对象 Object.assign 九、其他方法 1.Object.is() 比较两个
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 566
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
深入理解JavaScript闭包：避免常见的内存泄漏问题
官方推荐
09-02 4249
深入理解JavaScript闭包：避免常见的内存泄漏问题
WHAT - React 函数与 useMemo vs useCallback
最新发布
weixin_58540586的博客
09-03 787
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
echarts第二次的渲染问题
04-28
但是在使用Echarts进行大规模数据渲染时，可能会遇到第二次渲染问题。 第二次渲染问题一般指当页面中存在多个图表时，在第一次渲染完一个图表后切换到另一个图表，第二个图表无法正常渲染的情况。这是由于Echarts的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值