数据可视化——实训

原创 已于 2024-03-18 14:23:21 修改 · 594 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#信息可视化

于 2024-03-18 14:18:39 首次发布
本文详细介绍了如何使用ECharts库在HTML中创建堆积柱状图、标准条形图、瀑布图和饼图/环形图来分析会员的年龄分布、入会渠道和城市消费情况。每个图表都附有代码示例和效果图。

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

目录

制作会员图表

1.堆积柱状图分析会员年龄分布代码及效果图

2.标准条形图分析会员入会渠道代码及效果图

3.瀑布图分析不同城市会员消费总金额分布代码及效果图

4.饼图和环形图分析会员入会渠道分布代码及效果图

制作会员图表

1.堆积柱状图分析会员年龄分布代码及效果图

<!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:'数据来源于会员表.xls'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show:true},
 
                },
            },
            calaulable:true,
			xAxis:{ //定义x轴
                type:'category', //定义类目轴
                data:['18-28','28-38','38-48','48-58',]//定义类目项
			},
            yAxis:{  //定义Y轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"男",
                type:'bar', //图表类型
                stack:'总量',
                itemStyle:{
                  normal:{
                    barBorderColor:'green',
                    barBorderWidth:5,
                    color:'green',
                  }
                },
                data:[60,20,8,25],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          
			},
            {
        name:'女',
        type:'bar',
        stack:'总量',
        itemStyle:{normal:{lable :{show:true,position:'inside'}}},
        data:[30,30,28,40],
        label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
      }
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

2.标准条形图分析会员入会渠道代码及效果图

<!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:'数据来自会员表.xls'
            },
            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},
 
                },
            },
            calaulable:true,
			yAxis:{ //定义x轴
                type:'category', //定义类目轴
                data:['致电','抖音','微信公众号','服务台']//定义类目项
			},
            xAxis:{  //定义Y轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"入会渠道",
                type:'bar', //图表类型
                data:[200,340,388,259],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

3.瀑布图分析不同城市会员消费总金额分布代码及效果图

<!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:'数据来源于会员表.xls'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show:true},
 
                },
            },
            calaulable:true,
			xAxis:{ //定义x轴
                type:'category', //定义类目轴
                data:['总金额','上海','武汉','北京','广州']//定义类目项
			},
            yAxis:{  //定义Y轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"辅助",
                type:'bar', //图表类型
                stack:'总量',
                itemStyle:{
                  normal:{
                    barBorderColor:'rgba(0,0,0,0)',
                    barBorderWidth:5,
                    color:'rgba(0,0,0,0)',
                  }
                },
                data:[0,370,270,120,0],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          
			},
      {
        name:'入会人数',
        type:'bar',
        stack:'总量',
        itemStyle:{normal:{lable :{show:true,position:'inside'}}},
        data:[650,280,100,150,120]
      }
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

4.饼图和环形图分析会员入会渠道分布代码及效果图

饼图：

<!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:'会员入会渠道分布',
                x:'center'
            },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '5%',
    left: '',
    orient:'vertical'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '80%',
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 200, name: '致电' },
        { value: 340, name: '抖音' },
        { value: 388, name: '微信公众号' },
        { value: 259, name: '服务台' },
      ]
    }
  ]
};
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

环形图:

<!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:'会员入会渠道分布',
                x:'center'
            },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    top: '5%',
    left: '',
    orient:'vertical'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['78%','45%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 200, name: '致电' },
        { value: 340, name: '抖音' },
        { value: 388, name: '微信公众号' },
        { value: 259, name: '服务台' },
      ]
    }
  ]
};
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

yu:
关注
【Python数据分析与可视化】Matplotlib数据可视化（实训四）
风口IT猪的成长录
12-06 3489
全球星巴克门店数据分析 import pandas as pd import numpy as np from pandas import Series,DataFrame import matplotlib.pyplot as plt plt.rcParams['font.sans-serif'] = ['SimHei'] #用来正常显示中文标签 plt.rcParams['axes.unicode_minus']=False #用来正常显示负号 %matplotlib inline starbucks
关系数据的可视化——Python大数据可视化
最新发布
所念皆星河
11-07 640
关系数据的可视化 实验目的 1.掌握关系数据在大数据中的应用 2.掌握关系数据可视化方法 3. python程序实现图表。
用flask+echarts打造一个数据可视化大屏幕
热门推荐
凯哥大数据——刘凯的博客
10-14 2万+
文章目录1. big_screen项目说明2. big_screen项目文件布局3. 四大模块核心代码分析3.1 数据准备模块3.2 flask网页服务模块3.3 网页视图模块a. 网页大标题b. 左右两栏的图表c. 中间一栏的图表d. 图表echarts属性设置3.4 static静态元素分析a. 显示时间的函数b. 页面淡入和视图自适应的函数4. 总结 1. big_screen项目说明 源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入
数据可视化实训
JiYu_Cmy的博客
05-18 1019
Tableau Tableau Software致力于帮助人们查看并理解数据。Tableau 帮助任何人快速分析、可视化并分享信息。超过 42,000 家客户通过使用 Tableau 在办公室或随时随地快速获得结果。数以万计的用户使用 Tableau Public 在博客与网站中分享数据。 Tableau公司将数据运算与美观的图表完美地嫁接在一起。它的程序很容易上手，各公司可以用它将大量数据拖放到数字“画布”上，转眼间就能创建好各种图表。这一软件的理念是，界面上的数据越容易操控，公司对自己在所在业务领域里的
一零四、大数据可视化技术与应用实训（展示大屏幕）
m0_67402026的博客
07-31 935
利用本专业核心课程《数据可视化实训项目》的知识，完成《政府大数据可视化系统》系统分析、设计、编码、测试、发布全过程项目实训。掌握利用Echarts结合常用框架及数据分析工具对大量数据进行采集、分析存储及可视化的技能，能够编写系统分析和系统设计阶段的常用文档，独立完成系统实施阶段程序设计，能够进行单元测试和集成测试，完成系统运行部署。通过较为完整的大数据分析及可视化过程，使学生具备大数据系统构建、展示的技能，培养分析问题和解决问题的能力。...
大数据可视化实验（八）：大数据可视化综合实训
m0_71598203的博客
06-30 2175
掌握python工具，能够进行数据可视化；掌握商业案例中的数据分析与数据可视化
Matplotlib数据分析可视化-实训
随心发挥
11-17 1928
python数据分析及可视化之Matplotlib可视化-实训
图书数据可视化——实验报告
weixin_75079701的博客
08-03 1547
图书数据可视化是将清洗后的图书数据以可视化的方式展示出来，以帮助用户更好地理解和解释数据。通过可视化，可以直观地呈现图书的各种属性和关系，例如图书的类别分布、销售趋势、作家之间的关联等。常用的图书数据可视化方法包括柱状图、折线图、散点图、热力图等。
python数据分析与可视化——第四章实训
m0_66279156的博客
06-07 4433
对小费数据集进行数据分析与可视化
python数据分析与可视化——第二章实训
m0_66279156的博客
06-05 3037
python数据分析与可视化基础练习
数据预处理实训（kettle预处理+可视化大屏展示）-kettle和datax比较
01-15
将光碟租赁店存放在MySQL数据库（sakila）中的记录整个租赁行为以及表征租赁内容的数据加载到数据仓库（sakila_dwh）中，然后再对数据仓库中的数据使用任意一种可视化开发方式（如JavaWeb/Django/Flask+ECharts）做数据可视化展示。 本次采用的是flask+Echarts 里面包含kjb和ktr文件
大数据技术原理与应用之可视化实训
小刘的博客
02-20 1万+
目录 第一部分 实训题目与要求 1 问题提出 1.1实训任务1 1.2实训任务2 2功能要求 2.1实训任务1 2.2实训任务2 第二部分 设计实训题目功能 1 总体设计 1.1实训任务1 1.2实训任务2 2主要函数设计 2.1实训任务1 2.2实训任务2 3 问题与改进 第三部分 实训效果 一、实训任务1 二、实训任务2 第四部分 实训总结 1 结束语 附录A 程序清单 参考文献 《大数据技术原理与应用》实训报告 ...
大数据可视化实验（七）：Python数据可视化
m0_71598203的博客
06-30 1864
了解大数据可视化的特点，能进行简单的与大数据可视化有关的操作，能够绘制不同的可视化图表。
可视化实训
m0_74811962的博客
06-19 1327
通过对商品整体销售情况、区域销售情况、库存和用户行为的分析，提出以下3点总结建议。1.在兰山区多增加一些售货机，尽量覆盖到人流量集中的区域，增加销售额。2.可以适当增加一些蛋糕糕点的存货数量，加快销售的数量。3.适当做一些促销活动如适当降低价格，联合支付宝或者微信做一些活动，例如发放一些优惠劵，提高自动售货机的销量。
大数据可视化技术 实验四：Pyecharts的基本操作
m0_74394367的博客
03-25 1370
在实验中，通过实践练习，提高学生使用pyecharts进行数据可视化的熟练程度，总结pyecharts绘制图表的一般流程，加深理解。
Python-Matplotlib数据可视化
伯努利
04-01 2510
Matplotlib数据可视化
虎扑论坛数据分析
拓端研究室TRL
11-25 2027
论坛为用户提供了相同的业余爱好，互动和交流的广阔平台，以及由此产生的庞大数据和复杂的用户交互场景也包含有价值的信息，本文关于虎扑论坛的帖子，个人信息分析，探讨虎扑论坛的用户是什么是什么特点？但是行人社区，他们的话题不仅限于体育，八卦，情感咨询，他们关注的内容也是如此;以下是虎扑的官方介绍摘录：虎扑是一个专业的年轻男子网站，涵盖了原有的新闻专栏视频报道，包括篮球，足球，F1，NFL等大型生活/视频/游戏/ car / digital在线交流社区，谈论体育谈话对虎扑的兴趣。
一个虎扑社区数据分析实战
苏克的博客
11-08 4575
前阵子，一条微博成功引起了我的注意：没想到你竟是这样的虎扑！正好我们也在做网站的数据分析案例，不如就用 Python 来分析下，虎扑你这个直男论坛到底是怎样的？ 数...
Echarts常用图表第2章实训
2301_77751917的博客
03-18 596
【代码】Echarts常用图表第2章实训。
大数据实训项目：出租车数据可视化与分析教程
给定文件“【大数据课设】p105出租车数据可视化分析-大数据-实训大作业.zip”就是这样一个针对大数据教学的实训项目。 ### 标题知识点解析 标题“【大数据课设】p105出租车数据可视化分析-大数据-实训大作业.zip”...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值