echarts，实训1和三，会员基本信息分析

最新推荐文章于 2024-06-26 22:23:41 发布
最新推荐文章于 2024-06-26 22:23:41 发布
阅读量509 收藏 9
点赞数 11
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80975885/article/details/136804287
版权 
<!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},
 
                },
            },
            calaulable:true,
			yAxis:{ //定义x轴
                type:'category', //定义类目轴
                data:['传单','抖音','taptap','线下实体店']//定义类目项
			},
            xAxis:{  //定义Y轴
             type:'value', //定义数值轴
             boundaryGap:[0,0.01] //定义坐标轴两边留白 
            },
			series:[{
				name:"入会渠道",
                type:'bar', //图表类型
                data:[430,356,401,366],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
			},    
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        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',
            },
            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,420,270,120,0],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          
			},
      {
        name:'入会人数',
        type:'bar',
        stack:'总量',
        itemStyle:{normal:{lable :{show:true,position:'inside'}}},
        data:[600,180,150,150,120]
      }
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        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',
            },
            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:'pink',
                    barBorderWidth:5,
                    color:'pink',
                  }
                },
                data:[20,10,8,5],
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          
			},
            {
        name:'女',
        type:'bar',
        stack:'总量',
        itemStyle:{normal:{lable :{show:true,position:'inside'}}},
        data:[50,30,28,8],
        label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360
            , // 旋转角度
            position: '' // 显示位置
          },
      }
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        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: '80%',
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 430, name: '传单' },
        { value: 356, name: '抖音' },
        { value: 401, name: 'taptap' },
        { value: 366, 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: ['85%','75'],
      center:['50%','55%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 430, name: '传单' },
        { value: 356, name: '抖音' },
        { value: 401, name: 'taptap' },
        { value: 366, name: '线下实体店' },
      ]
    }
  ]
};
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

 

大数据三班罗健
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 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实训项目之会员信息表分析（堆积柱状图、标准条形图、瀑布图、饼图、环形图绘制）
2301_81170993的博客
03-18 819
在 VS Code 中依次创建3个.html 文件，分别为stackBar.html、standBar.html 和falls.html。在VS Code中创建pile.html 和circular.html 文件。
ECharts第四章项目实战
2202_75544053的博客
04-01 418
2、绘制多漏斗图或多金字塔。
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 产品图表分析系统 v4.2.0 rc1
10-09
ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图
无人售货机Echarts数据分析
05-13
无人售货机Echarts数据分析
echarts_实训.rar
12-12
echarts_实训.rar
Echarts-售货机大数据分析平台
05-13
售货机大数据分析平台数据
基于echarts的股票数据分析和展示项目源码.zip
04-09
1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，...
健身房会员管理系统（附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 Html项目实战
2403_83182454的博客
03-19 965
一、会员基本信息及消费能力对比分析。
3 基于pyecharts的python数据可视化——漏斗图绘制
简时刻的博客
06-02 680
实例代码： 运行结果：
Echarts模板三
longbao_1的博客
11-23 145
一、界面效果 二、代码内容 数据内容： ydata: [ { name: "7190", value: 1000 }, { name: "3389", value: 2000, }, { name: "6392", value: 3000, }, { n.
数据可视化（echarts会员信息表实现）
2403_83177329的博客
03-19 758
【代码】数据可视化（echarts会员信息表实现）
web数据可视化（ECharts版）
热门推荐
weixin_56814370的博客
04-09 1万+
web数据可视化（ECharts版）实训
实战|记一次java协同办公OA系统源码审计
最新发布
weixin_46239998的博客
06-26 1343
实战|记一次java协同办公OA系统源码审计
echarts源码分析
12-06
下面是ECharts源码的简单分析： 1. ECharts的初始化方法是通过调用`echarts.init`函数实现的，该函数接受三个参数：dom，theme和opts。其中，dom是一个HTML元素，用于渲染图表；theme是一个字符串，用于指定图表的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值