数据可视化（echarts会员信息表实现）_“会员信息表.xlsx”文件中记录了某鲜花店销售系统上的会员信息,具体包括会员编号-CSDN博客

本文链接：https://blog.csdn.net/2403_83177329/article/details/136802611

本文详细描述了如何使用ECharts库对鲜花店的会员信息进行可视化分析，包括年龄分布的堆积柱状图、入会渠道的条形图、城市消费的瀑布图以及入会渠道的饼图和环形图.

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

基于“会员信息表． xlsx ”文件记录了某鲜花店销售系统上的会员信息，具体包括会员编号、姓名、性别、年龄、年龄段、城市、人会方式、会员级别、会员人会日、 VIP 建立日、购买总金额、购买总次数信息。

绘制如下：

一、绘制堆积柱状图分析会员年龄分布情况

<!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: '',
                textStyle:{
                    color:'#5A5476',
                }
            },
            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: ['20～29岁', '30～39岁', '40～49岁']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#45C2E0', '#C1EBDD'],
            series: [
                {
                    name: '男',
                    type: 'bar',
					stack: '年龄段',  //设置堆积效果
                    data: [6,2,1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段',  //设置堆积效果
                    data: [4,3,3],
					markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };
 
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </s