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

已于 2024-03-18 20:45:53 修改
阅读量497 收藏 7
点赞数 9
文章标签： 前端 javascript 开发语言
于 2024-03-18 20:09:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/x11__111/article/details/136819584
版权
本文详细描述了如何使用ECharts库在网页上创建和展示了堆积柱状图、条形图、瀑布图、饼图和圆环图，用于呈现性别年龄比例、男女入会方式分布以及会员消费和入会渠道的数据分析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值