大数据可视化 学习项目二

于 2024-03-18 21:25:59 发布
阅读量258 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a040607/article/details/136822027
文章详细描述了如何使用ECharts库创建不同类型的图表，包括性别与入会方式的堆积柱状图、年龄分布的条形图、城市与购买总金额的瀑布图以及入会方式的饼图和环形饼图，展示了数据可视化在社区分析中的应用。

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

图标数据

性别与入会方式所组成的堆积柱状图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        var myChart=echarts.init(document.getElementById("main"));
        var option={
            title:{   //标题项
                text :'堆积柱状图',
                subtext:'性别与入会方式'
            },
            tooltip:{                        //提示框组件
            trigger:'axis',                 //触发类型  //axis 坐标轴触发
            axisPointer:{                   //坐标轴指示器配置项
                type:'shadow'           //'shadow' 阴影指示器
            },
            },
            legend:{           //图例
                data:['自愿','微信推广','节日活动','团购推销']
            },
            xAxis:{
                type:"category",  //类目轴
                data:["男","女"]
            },
            yAxis:{
                type:"value", 
            },
            series:[{
                name:'自愿',
                type:'bar',
                data:[2,3]
            },{
                name:'微信推广',
                type:'bar',
                stack:'入会效果',
                data:[0,2]
            },{
                name:'节日活动',
                type:'bar',
                stack:'入会效果',
                data:[2,2]
            },{
                name:'团购推销',
                type:'bar',
                stack:'入会效果',
                data:[1,2]
            }]
        };
        myChart.setOption(option);
</script>
</body>
</html>

性别与年龄组成的条形图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        var myChart=echarts.init(document.getElementById("main"));
        var option={
            title:{   //标题项
                text :'条形图',
                subtext:'性别与年龄'
            },
            tooltip:{                        //提示框组件
            trigger:'axis',                 //触发类型  //axis 坐标轴触发
            axisPointer:{                   //坐标轴指示器配置项
                type:'shadow'           //'shadow' 阴影指示器
            },
            },
            legend:{           //图例
                data:['自愿','微信推广','节日活动','团购推销']
            },
            xAxis:{
                type:"value", 
            },
            yAxis:{  
                type:"category",  //类目轴
                data:["女","男"]
            },
            series:[{
                name:'20-30',
                type:'bar',
                data:[6,4]
            },{
                name:'31-40',
                type:'bar',
                data:[3,0]
            },
            {
                name:'40以上',
                type:'bar',
                data:[0,1]
            },]
        };
        myChart.setOption(option);
</script>
</body>
</html>

城市与购买总金额组成的瀑布图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
        var myChart=echarts.init(document.getElementById("main"));
        var option={
            title:{   //标题项
                text :'瀑布图',
                subtext:'城市与购买总金额'
            },
            tooltip:{   //提示框组件
            trigger:'axis', //触发类型  //axis 坐标轴触发
            axisPointer:{  //坐标轴指示器配置项。   
                type:'shadow'  //阴影指示器
            },
            formatter:function(params){
                var tar=params[0];
                return tar.name+'<br/>'+tar.seriesName+":"+tar.value
            }
        },
            xAxis:[
            {
                type:'category',
                splitLine:{show:false},  //坐标轴在 grid 区域中的分隔线。
                data:['总费用','东莞',"深圳",'广州','佛山']
            }
            ],
            yAxis:[
            {
                type:'value'
            }
            ],
            series:[
            {
                name:'辅助',
                type:'bar',
                stack:'总量',//数据堆叠
                itemStyle:{  //图形样式。
                    normal:{   //正常柱子颜色
                        barBorderColor:'rgba(0,0,0,0)',  //柱子边框颜色
                        barBorderWidth:'2',
                        color:'rgba(255,255,0,0)',
                    },
                    emphasis:{//鼠标滑过颜色
                        barBorderColor:'rgba(0,0,0,0)',
                        barBorderWidth:'2',
                        color:'rgba(255,255,255,0.8)',
                    }
                },
                data:[0,0,546,1727,4803],
            },
            {
                name:'购买总金额',
                type:'bar',
                stack:'总量',//数据堆叠
                itemStyle:{
                    normal:{
                        label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                            show:true,position:'inside'//文字块的内边距
                        }
                    }
                },
                data:[7078,546,1181,3076,2275],
            }
            ]
            };
        myChart.setOption(option);
</script>
</body>
</html>

入会方式组成的饼图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        title:{
            text:"饼图",
            subtext:'入会方式',
            left:'center'  //居中显示
        },
        legend:{
        orient:'vertical',   //图例列表的布局朝向。   //垂直
        x:'10',           
        data:['自愿','微信推广','节日活动','团购推销'] ,            //图例组件系列的名称
        icon:'circle',             //图例图形形状
        },
        series:[
            {
                name:'访问来源',
                type:'pie',
                radius:'66%',//饼图的半径。
                //max:10,
                center:['58%','55%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                clockWise:true,//饼图的扇区是否是顺时针排布
                data:[
                    {value:5,name:'自愿'},
                    {value:2,name:'微信推广'},
                    {value:4,name:'节日活动'},
                    {value:3,name:'团购推销'},
                ]
            }
        ]
    };
 myChar.setOption(option)
 </script>
 </body>
 </html>

入会方式组成的环形饼图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <script type="text/javascript">
    var myChar=echarts.init(document.getElementById("main"));
    
    var option={
        title:{
            text:"环形饼图",
            subtext:'入会方式',
            left:'center'  //居中显示
        },
        legend:{
        orient:'vertical',   //图例列表的布局朝向。   //垂直
        x:'10',           
        data:['自愿','微信推广','节日活动','团购推销'] ,            //图例组件系列的名称
        icon:'circle',             //图例图形形状
        },
        series:[
            {
                name:'访问来源',
                type:'pie',
                radius:['20%','55%'],//饼图的半径。
                //max:10,
                center:['58%','55%'], //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                clockWise:true,//饼图的扇区是否是顺时针排布
                data:[
                    {value:5,name:'自愿'},
                    {value:2,name:'微信推广'},
                    {value:4,name:'节日活动'},
                    {value:3,name:'团购推销'},
                ]
            }
        ]
    };
 myChar.setOption(option)
 </script>
 </body>
 </html>

贺知煜
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值