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

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

2024-05-20 14:05:52 前端知识 前端哥 637 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
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！