会员表设计堆积柱状图，条形图，瀑布图，饼图，圆环图

已于 2024-03-18 20:45:53 修改
阅读量376 收藏 6
点赞数 9
文章标签： 前端 javascript 开发语言
于 2024-03-18 20:09:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x11__111/article/details/136819584
版权

1.堆积柱状图展现性别年龄比例

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title>  
    </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: '会员信息表',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 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: 'category',
 
                	data: ['19-29','29-39','39-49']
 
            		},
 				],
            	yAxis: [{
                	type: 'value'
 
            	},
 					],
            	series: [
            		{          
 					name:'男',
 					type:'bar',
 					stack:'年龄段',
                	data: [4,2,2]
            		},
            		{
            		name:'女',
            		type:'bar',
            		stack:'年龄段',
            		data:[4,5,2]
            		}
            	]
                 	
        	};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>

2，绘制条形图显示男女入会方式比例

<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title>
    </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: '会员信息表',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 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,
        // 指定图表的配置项和数据
            	yAxis: [{
            		type: 'category',
 
                	data: ['志愿','兴趣','招聘']
 
            		},
 				],
            	xAxis: [{
                	type: 'value'
 
            	},
 					],
            	series: [
            		{          
 					name:'男',
 					type:'bar',
 					
                	data: [4,2,2]
            		},
            		{
            		name:'女',
            		type:'bar',
            		
            		data:[4,5,2]
            		}
            	]
        	};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
 
</body>
 
</html>

3.绘制瀑布图显示不同测试会员消费情况

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
 
        <title></title>
 
       
 
    </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: '会员各个城市消费信息表',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 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: 'category',
                    
                	data: ['总消费','南京','深圳','武汉','南昌']
 
            		},
 				],
            	yAxis: [{
                	type: 'value'
 
            	},
 					],
            	series: [
            		{          
 					name:'b',
 					type:'bar',
 					stack:'消费总额',
                    itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                    }
                    },
                	data: [0,4300,3000,2300,0]
            		},
            		{
            		name:'s',
            		type:'bar',
            		stack:'消费总额',
                    label: {
                    show: true,
                        position: 'inside'
                    },
            		data:[6300,2000,1300,700,2300]
            		}
            	]
                 	
        	};
        // 使用刚指定的配置项和数据显示图表。
 
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>

4.绘制饼图表现会员入会渠道信息

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
 
        <title></title>
    </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: '会员入会信息表',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 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,
        // 指定图表的配置项和数据
            	series: [
            		{          
 					name:'入会渠道',
                    type:'pie',
                    radius:'66%',
                    center:['58%','55%'],
                    colockWise:true,
                    data:[
                        { value: 60, name: '招聘' },
                        { value: 10, name: '志愿' },
                        { value: 15, name: '兴趣' },
                    ]
                }
            ]
                 	
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>

5.绘制圆环图显示会员入会渠道信息

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <script type="text/javascript" src="js/echarts.js" ></script>
 
        <title></title>
 
       
 
    </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: '会员入会信息表',
                     
                 },
                 tooltip: {
                     trigger: 'axis',
                     axisPointer:{
                    	 type:'shadow'
                     }
                 },
                 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,
 
 
        // 指定图表的配置项和数据
            	
            	series: [
            		{          
 					name:'入会渠道',
                    type:'pie',
                    radius:['45%','80%'],
                    center:['58%','55%'],
                    colockWise:true,
                    data:[
                        { value: 10, name: '招聘' },
                        { value: 10, name: '志愿' },
                        { value: 15, name: '兴趣' }
                    ]
                }
            ]
                 	
        };
       // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);
 
    </script>
 
</body>
 
</html>

x11__111
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
对Echarts3.0的基本图表实现，即饼图，折线图，柱状图。 从数据库读取数据显示在前台，图表可根据数据库数据实时更新。
会员表绘制堆积柱状图，条形图，瀑布图，饼图，环形图
2301_80464770的博客
03-18 276
【代码】会员表绘制堆积柱状图，条形图，瀑布图。
Echarts实训项目之会员信息表分析（堆积柱状图、标准条形图、瀑布图、饼图、环形图绘制）
2301_81170993的博客
03-18 726
在 VS Code 中依次创建3个.html 文件，分别为stackBar.html、standBar.html 和falls.html。在VS Code中创建pile.html 和circular.html 文件。
matplotlib柱状图上方显示数据_可视化技能之Matplotlib(上)|可视化系列01
weixin_39944638的博客
11-20 1292
作者：蜇虫适航 来源：蜇虫适航Matplotlib可以说是Python最声名远扬的可视化库了，也是Python数据分析库的“三驾马车”之一。Matplotlib是基础而非常强大的可视化库，Seaborn等好用的可视化库是在前者的基础上进行的封装。Matplotlib擅长快速出简单的图、有丰富的接口进行精细化绘图、和Numpy结合做科学可视化及三维图配合默契、三维图。但也...
JavaScript实现的环形图比较
热门推荐
xunming的专栏
04-27 1万+
1，HighChart 2，iChartJs 3，eChart
Axure动态图表+折线图+饼图+柱状图
10-28
Axure动态图表+折线图+饼图+柱状图； 饼状图、柱状图、折线图含交互动画； 软件版本：Axure8.1（兼容Axure9、Axure10）
axure 图表 柱状图 饼图 线性图 元件库 组件库
10-06
axure 图表 柱状图 饼图 线性图 元件库 组件库，好用的
echarts柱状图饼图折线图.zip
07-31
echarts 电脑端 柱状图 折线图 饼图 散点图 js html
Ehcart、左侧菜单、柱状图、饼图、模拟地图
02-26
使用Echart，结合css、js，示例Echart柱状图、饼状图、排名图、百度模拟地图的使用。 说明： 1、解压后，浏览器打开index.html即可； 2、数据为测试数据，仅供参考； 3、转载请注明出处，版权归作者所有；
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 506
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 380
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
【VueRouter 的基本使用】
2302_76611599的博客
05-17 172
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
前端之电力系统SVG图低代码
weixin_38233449的博客
05-14 262
有了线，当然需要面，这时候一个polygon类就可以解决，唯一和polyline不同的是，path最后一个点需要Z闭合。两点一线，只要知道两个点的坐标就可以，但是基础图元可以旋转，也可以闪烁，所以这些属性都需要动态计算。其实所有的图形都是由点，线，面组成的。ployline也是用path就可以了，但是中间的点需要连起来，样式的计算需要循环拼接字符串。两点可以组成线，多点可以组成折线，这就需要一个polyline类去解析每个折线。svg里面的渲染最有难度的大圆弧和小圆弧，需要用到三角函数。
python EEL + vue3.js 简单示例
bigcarp的专栏
05-15 185
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。一般方法有 app.config.globalProperties 或 mixin等。
python读取csv文件并绘制柱状图和数据所占比例饼图和直方图和比较条形图
06-08
好的，针对您的问题，我可以给出以下Python代码来读取CSV文件，并分别绘制柱状图、饼图、直方图和比较条形图。请注意，以下代码需要使用到pandas、matplotlib和numpy库，请您确保已经安装了这些库。 ```python ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值