首页 前端知识 数据可视化-ECharts Html项目实战

数据可视化-ECharts Html项目实战

2024-05-20 14:05:52 前端知识 前端哥 609 80 我要收藏

项目实践

一.会员基本信息及消费能力对比分析

1. 训练要点
掌握堆积柱状图的绘制。
掌握标准条形图的绘制。
掌握瀑布图的绘制。
2.需求说明

 “会员信息表.xlsx”文件记录了某鲜花店销售系统上的会员信息,具体内容包括会“华面 员编号、姓名、性别、年龄、城市、入会方式、会员级别、会员入会日、VIP建立日、注意) 购买总金额、购买总次数等信息。绘制标准条形图分析会员入会渠道,绘制堆积柱状图
分析会员年龄分布,绘制瀑布图分析不同城市会员消费总金额分布。

3.实现思路及步骤
绘制堆积柱状图。首先,在stackBar.html文件中引入echarts.js库文件。其次,准备一个具备大小(weight与height)的div容器,并使用init()方法初始化容器。最后设置堆积柱状图的配置项、“性别”与“年龄”数据完成堆积柱状图绘制。
绘制标准条形图。首先,在standBar.html文件中引入echarts.js库文件。其次,准备一个具备大小(weight与height)的div容器,并使用init()方法初始化容器。最后设置标准条形图的配置项、“性别”与“入会方式”数据完成标准条形图绘制。
绘制瀑布图。首先,在falls.html文件中引入echarts.js库文件。其次,准备一个具备大小(weight与height)的div容器,并使用init)方法初始化容器。

a.绘制堆积柱状图
<!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~25岁', '25~30岁', '30~40岁']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '男',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [4, 2, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段', // 设置堆积效果
                    data: [6, 3, 2],
                    markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };
 
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

 

b.绘制标准条形图
<!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: [5, 1, 3, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [4, 2, 1, 7],
                },
            ],
        };
 
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>
c.绘制瀑布图
<!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, 2500, 1100, 0]
                },
                {
                    name: '生活费',
                    type: 'bar', // 设置柱状图
                    stack: '总量', // 设置堆积
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside'
                            }
                        }
                    },
                    data: [4100, 1600, 1300, 1000]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

 

二.会员来源结构分析 

1. 训练要点
掌握饼图的绘制。
掌握环形图的绘制。
2.需求说明

基于“会员信息表.xlsx”数据,绘制饼图和环形图分析会员入会渠道分布。

3.实现思路及步骤
绘制饼图。首先,在pie.html文件中引入echarts.js 库文件。其次,准备一个具备大小(weight与height)的div容器,并使用init)方法初始化容器。最后设置饼图的配置项和“入会方式”数据完成饼图绘制。 文件中引入echarts.js库文件。其次,准备一
绘制环形图。首先,在circular.html init方法初始化容器。最后设置环形图个具备大小(weight与hcight)的div容器,并使的配置项和“入会方式”数据完成环形图绘制。

a.绘制饼图
<!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: '', // 设置次标题
                left: 'center' // 设置主次标题都左右居中
            },
            tooltip: { // 配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: { // 配置图例组件
                orient: 'vertical', // 设置垂直排列
                left: 62, // 设置图例左边距
                top: 22, // 设置图例顶边距
                data: ['自愿', '公众号推广', '短视频', '美团']
            },
            toolbox: { // 配置工具箱组件
                show: true, // 设置工具箱组件是否显示
                left: 444, // 设置工具箱左边距
                top: 28, // 设置工具箱顶边距
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [ // 配置数据系列组件
                {
                    name: '入会方式',
                    type: 'pie',
                    radius: '66%', // 设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'], // 设置圆心
                    clockWise: true,
                    data: [ // 设置数据的具体值
                        {
                            value: 5,
                            name: '自愿'
                        },
                        {
                            value: 2,
                            name: '公众号推广'
                        },
                        {
                            value: 6,
                            name: '短视频'
                        },
                        {
                            value: 4,
                            name: '美团'
                        }
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>
b.绘制环形图
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小(宽高)的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        // 基于准备好的DOM,初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = {
            title: { // 配置标题组件
                backgroundColor: 'yellow', // 设置主标题的背景颜色
                text: '会员入会渠道分布情况', // 设置主标题的文字
                textStyle: { // 设置主标题文字样式
                    color: 'green', // 设置主标题文字的颜色
                    fontFamily: '黑体', // 设置主标题文字的字体
                    fontSize: 28 // 设置主标题文字的大小
                },
                x: 'center' // 设置主标题左右居中
            },
            tooltip: { // 配置提示框组件
                trigger: 'item', //设置提示框的触发方式
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: { //配置图例组件
                orient: 'vertical', //设置图例垂直方向
                x: 32, // 设置图例的水平方向
                y: 74, // 设置图例的垂直方向
                data: ['自愿', '公众号推广', '短视频', '美团']
            },
            toolbox: { // 配置工具箱组件
                show: true, // 设置工具箱是否显示
                x: 555, // 设置工具箱的水平位置
                y: 74, // 设置工具箱的垂直位置
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: false,
            series: [{
                name: '入会方式',
                type: 'pie',
                selectedMode: 'single',
                radius: ['40%', '55%'],
                data: [{
                        value: 5,
                        name: '自愿'
                    },
                    {
                        value: 2,
                        name: '公众号推广'
                    },
                    {
                        value: 5,
                        name: '短视频'
                    },
                    {
                        value: 8,
                        name: '美团'
                    }
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8938.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!