Echarts实训项目之会员信息表分析（堆积柱状图、标准条形图、瀑布图、饼图、环形图绘制）

最新推荐文章于 2024-06-26 22:23:41 发布
最新推荐文章于 2024-06-26 22:23:41 发布
阅读量819 收藏 11
点赞数 17
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81170993/article/details/136802555
版权

实训1

一、准备工作

在 VS Code 中依次创建3个.html 文件，分别为stackBar.html、standBar.html 和falls.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: 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: ['20～29岁', '30～39岁', '40～49岁']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
					stack: '年龄段',  //设置堆积效果
                    data: [4, 0, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段',  //设置堆积效果
                    data: [6, 3, 0],
					markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };
 
 
        //使用刚指定的配置项和数据显示图表
        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: '会员入会渠道分布情况',
                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: [2, 0, 1, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [3, 2, 2, 2],
                },
            ],
        };
 
        //使用刚指定的配置项和数据显示图表
        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: 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, 801, 1094, 635]
                },
                {
                    name: '生活费',
                    type: 'bar',  //设置柱状图
                    stack: '总量',  //设置堆积
                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [3076, 2275, 1181, 546]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

实训3

一、准备工作

在VS Code中创建pile.html 和circular.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: 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: 3, name: '团购促销' },
                        { value: 4, 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: 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: 3, name: '团购促销' },
                        { value: 4, name: '节日活动' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

2301_81170993
关注
  • 17
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio Code (echarts)数据可视化’会员入会情况分布柱形图‘
qq_45894761的博客
03-08 974
引入 echarts.js 文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Visual Studio Code (echarts)数据可视化’历年不同级别会员数量变化折线图‘
qq_45894761的博客
03-08 1154
完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
ECharts-html 实训（二）
2301_77563994的博客
03-24 1555
圆环图是在圆环中显示数据的图形，其中每一个圆弧代表一个数据项，用于对比分类数据的数值大小。在绘制环形图时，适合用一个分类数据字段或连续数据字段，但数据最好不超过9条。制作圆环图，只需要在饼图的代码中将“radius”中的数据修改一下，修改后的半径是两个数值的数组，分别代表圆环的内外半径。
echarts，实训1和三，会员基本信息分析
2301_80975885的博客
03-18 509
【代码】echarts，实训1和三，会员基本信息分析。
29 黑马传智健康-echarts-会员数量统计
qq_44798321的博客
07-29 520
一、前端页面代码 <!DOCTYPE html> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>传智健康</title> <meta nam
echart插件新增会员案例
午夜灬玫瑰焰钻的博客
11-29 278
代码及详细解释如下: div id="main" style="width: 250px;height:200px;">div> script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
Echarts是一款由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于饼图、折线图和柱状图。在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，...
echarts柱状图饼图折线图.zip
07-31
echarts 电脑端 柱状图 折线图 饼图 散点图 js html
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
对Echarts3.0的基本图表实现，即饼图，折线图，柱状图。 从数据库读取数据显示在前台，图表可根据数据库数据实时更新。
微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码
01-31
微信小程序Canvas绘制曲线图、饼图、柱状图、雷达图/蛛网图源码
echarts官网实例
08-24
echarts
健身房会员管理系统（附springmvc项目源码）
03-03
运行环境：  1、JDK1.8及以上版本  2、Tomcat 8.0及以上版本  3、MySql 5.7及以上版本开发工具：  Intellij IDEA使用技术：   1、SpringMVC，SpringBoot框架，注解使用   2、Activiti工作流技术实现流程图上传，下载，查看；请假流程的申请，审批，查看流程进度，批注等功能   3、MySql、MyBatis数据库技术   4、Echarts图表技术   5、拦截器实现权限控制：角色管理、菜单管理，权限管理（按钮级权限）   6、LayUI前端框架技术    7、POI Excel导入导出技术   8、layedit在线编辑器编辑   9、图片批量上传技术   10、轮播图技术，轮播图上传，删除    11、验证码的使用，cookies保存账号密码课程资料：  1.项目源代码，数据库脚本文件，课程图片素材，开发文档及PPT资料等后台功能： 1、健身房会员管理系统，支持所有俱乐部方式运营的各种会员制管理企业。2、店铺管理包括，店铺展示，店铺图册上传，店铺资料介绍；3、会员管理，会员等级管理，会员资料管理；4、员工管理，教练管理，部门管理，员工权限管理；5、课程管理，课程设置，价格设置，上线发布，下线；6、优惠折扣管理7、订单管理，销售课程;8、上课预约管理，学习状态管理；9、Activiti工作流实现员工请假等技术；10、权限管理，角色管理、菜单权限控制，按钮权限控制后台登录：http://localhost:8080/club/会员端功能： 1.店铺(商城)展示（商城宣传轮播图，线上课程展示，教练展示，店铺介绍）2.会员资料修改，修改密码，更改绑定手机号码，在线充值3.在线购买课程，订单状态管理，收藏课程4.在线预约，预约状态，学习进度，学习状态；会员登录：http://localhost:8080/club/user/login
Echarts模板三
longbao_1的博客
11-23 145
一、界面效果 二、代码内容 数据内容： ydata: [ { name: "7190", value: 1000 }, { name: "3389", value: 2000, }, { name: "6392", value: 3000, }, { n.
数据分析可视化08 案例 2：历史数据变化趋势图设计
fegus的博客
10-06 1684
历史数据变化趋势图，可以用来呈现任何需要的、具有时间序列特征的指标。具体的指标可以基于业务需求选择。影片租赁业务共涉及 3 个主要的业务活动，具体需要考虑的指标为：订单量、交易额、库存量。本案例中，我们选择订单量作为我们分析的指标。指标名称业务逻辑计算逻辑订单量当日出租影片的数量和SELECT * FROM dm_rental_day ORDER BY 日期 ASC交易额当日出租影片的收入和库存量当日库存影片的数量和表 1：指标定义呈现指标随时间变化的趋势。
会员表设计堆积柱状图，条形图，瀑布图，饼图，圆环图
x11__111的博客
03-18 392
【代码】会员表设计堆积柱状图，条形图，瀑布图，饼图，圆环图。
web数据可视化（ECharts版）
热门推荐
weixin_56814370的博客
04-09 1万+
web数据可视化（ECharts版）实训
五分钟上手ECharts图形报表
at10090的博客
10-27 655
1. 图形报表ECharts 1.1 ECharts简介 ECharts缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的使用JavaScript实现的数据可视化工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观、交互丰富、可高度...
实战|记一次java协同办公OA系统源码审计
最新发布
weixin_46239998的博客
06-26 1367
实战|记一次java协同办公OA系统源码审计
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 691
整洁大气，非常漂亮，前端内容均可通过后台修改。
echarts饼图柱状图
08-30
您想了解 echarts 中的饼图和柱状图吗？这两种图表都是 echarts 提供的常见图表类型之一。 饼图： 饼图用于展示数据的占比关系，适用于显示相对比例。在 echarts 中，您可以通过配置数据项和设置相关属性来创建饼图。例如，您可以设置每个数据项的名称、数值、颜色等。饼图可以通过鼠标悬停显示详细信息或进行交互操作。 柱状图： 柱状图用于展示数据的数量或大小比较，适用于显示绝对数值。在 echarts 中，您可以通过配置数据项和设置相关属性来创建柱状图。例如，您可以设置每个数据项的名称、数值、颜色等。柱状图可以通过鼠标悬停显示详细信息或进行交互操作。 如果您有具体的问题或需要更详细的示例代码，请告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值