首页 > 其他分享 >echarts，实训1和三，会员基本信息分析

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

时间：2024-03-19 12:58:38浏览次数：27  
标签：name show type 图表 会员 实训 true echarts 定义 

<!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>

 

标签：name,show,type,图表,会员,实训,true,echarts,定义
From： https://blog.csdn.net/2301_80975885/article/details/136804287

相关文章

  • 数据可视化-ECharts Html项目实战（3）
    在之前的文章中，我们学习了如何创建堆积折线图，饼图以及较难的瀑布图并更改图标标题。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。数据可视化-EChartsHtml项目实战（2）-CSDN博客文章浏览阅读1.2k次，点赞33次，收藏16......
  • 自学IT技术平台（专业技能，技术讲解，企业实训项目）技术小白的福音，免费资源网站
    教育平台Coursera Coursera（Coursera.org）是一个知名的在线学习平台，为学生、专业人士和组织提供高质量的在线课程、证书项目和学位项目。以下是Coursera平台的一些简介：课程内容：Coursera上有来自全球顶尖大学和教育机构的数千门在线课程，涵盖各种领域，如计算机科学、数据科学......
  • Echarts实训会员图表
    目录1.绘制堆积柱状图分析会员年龄分布2.绘制标准条形图分析会员入会渠道3.绘制瀑布图分析不同城市会员消费总金额分布4.绘制饼图和环形图分析会员入会渠道分布1.绘制堆积柱状图分析会员年龄分布<!DOCTYPEhtml><html><head><metacharset="utf-8"><!-......
  • ECharts实训案例
    实训1：会员基本信息及消费能力对比分析    1.训练要点：        (1)掌握堆积柱状图的绘制        (2)掌握标准条形图的绘制        (3)掌握瀑布图的绘制      2.实现实录及步骤  （1）在VSCode中依次创建3个.html文件，分别为s......
  • java商场会员停车场管理系统的实现
    本系统（程序+源码）带文档lw万字以上 文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义选题背景：随着城市化进程的加速和汽车保有量的持续增长，停车难已经成为城市中普遍存在的问题。特别是在商场等人流密集区域，如何高效管理会员停车场，提供便捷的停车服......
  • echarts实践总结(常用一)：柱状图（特点：渐变色、点击缩放、左右滑动、悬浮展示样式）
    目录第一章echarts基本使用第二章echarts实践——柱状图效果展示第一章echarts基本使用Echarts常用配置项(详细入门)_echarts配置项手册-CSDN博客第二章echarts实践——柱状图最近接到这么一个需求，需要画页面，然后有这么几个echarts的图需要画，平常我们通过教程......
  • ssm/php/node/python高校实习实训管理系统
    本系统（程序+源码）带文档lw万字以上  文末可领取本课题的JAVA源码参考系统程序文件列表系统的选题背景和意义选题背景：在当今社会，随着教育模式的不断创新与发展，高校教育已经不仅仅局限于传统的课堂理论教学。实践能力的培养被越来越多的高等教育机构所重视，实习实训成为了......
  • tab切换 echarts图表消失
    tab切换echarts图表消失原因分析：当在从第二个tab切换到第一个tab的时候，此时渲染图表是不成功的，可以在点击到tab的时候打印一下当时的dom节点，就会发现此时dom为null，因此无法对配置项进行渲染。解决方案：需要在渲染配置之前先获取到这个dom节点，可以通过this.$nextTi......
  • java毕业设计-基于springboot开发的会员制医疗预约服务管理信息系统-毕业论文+答辩PPT
    文章目录前言一、毕设成果演示（源代码在文末）二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构三、系统实现展示1、系统功能模块2、管理员功能模块3、医生功能模块3、会员功能模块四、毕设内容和源代码获取总结java毕业设计-基于springboot开发的会员制医疗预......
  • echarts 饼状图入门使用
    import*asechartsfrom'echarts';varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;option={tooltip:{trigger:'item'},legend:{orient:'vertical&#......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99