帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

本栏目分享一些实用的网页图片特效、网页导航特效、网页菜单特效、网页文字特效等js、jquery、css网页特效。

当前位置:首页 > 资源 > 网页特效 > 正文

HTML5+echarts 饼状图和柱状图数据图表实例代码

帝国模板之家 2020-10-17 网页特效 评论

这是一款基于html5+echarts 实现的饼状图和柱状图数据图数据统计,使用简单,折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置。饼状图如何默认显示几个数据中的某个数据。

html代码:

<!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">
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="bootstrap.min.css" type="text/css"  />

  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Exposition</title>
  <script src="js/echarts.min.js"></script>
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
<div id="basic" style="width: 800px;height:600px;margin: 0 auto;"> </div>
<div id="color" style="width: 800px;height:600px;margin: 0 auto; display: none;"> </div>
<div id="details" style="width: 800px;height:600px;margin: 0 auto; display: none;"> </div>
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>上一页</a></li>
    <li class="next"><a href="#">下一页<span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
 //加载饼状图和柱状图
 var bra_data="bra.json"; 
 var data_basic=[],type_basic=[],data_color=[],type_color=[],data_size=[],type_size=[];
$.getJSON(bra_data, function(data){
 //颜色
$.each(data.color,function(key,word){
  if(key!="whole" ){
  data_color.push({"value":word,"name":key});
  type_color.push(key);
  }
});
  //尺寸
$.each(data.basic,function(key,word){
 if(key!="whole"){
  data_basic.push({"value":word,"name":key+"杯"});
  type_basic.push(key+"杯");
 }
});
//百分比
$.each(data.detail,function(key,word){
  var whole=data.detail.whole;
  if(key!="whole"&&word>=1000 ){
  data_size.push((100*word/whole).toFixed(3));
  type_size.push(key);
  }
});

 
        // 基于准备好的dom,初始化echarts实例
        var myChart_color = echarts.init(document.getElementById('color'));
        var myChart_basic = echarts.init(document.getElementById('basic'));
        var myChart_details = echarts.init(document.getElementById('details'));

        // 指定图表的配置项和数据
option_color = {

    title : {
        text: '淘宝网用户购买文胸颜色饼状图',
        subtext: '仅具参考意义',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: type_color
    },
    series : [
        {
            name: '该颜色购买人数',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:data_color,
            color:['#EEB422','#BEBEBE','#FFA07A','#483D8B','#EE3B3B','#6B8E23','#5F9EA0','#FFC125','#696969'],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
 option_basic = {
    title : {
        text: '淘宝网用户购买文胸尺寸饼状图',
        subtext: '仅具参考意义',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: type_basic
    },
    series : [
        {
            name: '该尺寸购买人数',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:data_basic,
            color:['#EEB422','#BEBEBE','#FFA07A','#483D8B','#EE3B3B','#6B8E23','#5F9EA0','#FFC125','#696969'],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option_details = {
    title : {
        text: '淘宝网用户购买文胸颜色饼状图',
        subtext: '仅具参考意义',
        x:'center'
    },
    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}
        }
    },
    calculable : true,
    legend: {
        orient: 'vertical',
        left: 'left',
        data:['各胸围尺寸所占的人数百分比']
    },
    xAxis : [
        {
            type : 'category',
            data : type_size
        }
    ],
    yAxis : [
        {
            type : 'value',
            name : '人数',
            min: 0,
            max: 20,
            interval:5,
            axisLabel : {
                formatter: '{value} %'
            }
        }
       
    ],
    series : [

        {
            name:'各胸围尺寸所占的人数百分比',
            type:'bar',
            data:data_size,
            color:'#191970'
        },
        
    ]
};
        // 使用刚指定的配置项和数据显示图。
        myChart_color.setOption(option_color);
        myChart_basic.setOption(option_basic);
        myChart_details.setOption(option_details);
});
//左右翻页显示
  basic_div=$("#basic");
  color_div=$("#color");
  details_div=$("#details");

$(".previous").click(function(){
    if (basic_div.is(":visible")){
        basic_div.css("display","none");
        color_div.css("display", "none");
        details_div.css("display","block");
    }
    else if (color_div.is(":visible")){
        color_div.css("display","none");
        basic_div.css("display", "block");
        details_div.css("display","none");
    }
    else if (details_div.is(":visible")){
        details_div.css("display","none");
        color_div.css("display", "block");
        basic_div.css("display","none");
    }
});
$(".next").click(function(){
if (basic_div.is(":visible")){
        basic_div.css("display","none");
        color_div.css("display", "block");
        details_div.css("display","none");
    }
    else if (color_div.is(":visible")){
        color_div.css("display","none");
        basic_div.css("display", "none");
        details_div.css("display","block");
    }
    else if (details_div.is(":visible")){
        details_div.css("display","none");
        color_div.css("display", "none");
        basic_div.css("display","block");
    }
});
    </script>


</body>
</html>

json数据格式:

{
    "basic": {
        "A": 522759,
        "B": 788989,
        "C": 330960,
        "D": 105859,
        "E": 29815,
        "F": 8892,
        "G": 1941,
        "H": 197,
        "whole": 1789437
        
    },
    "color": {
        "whole": 1127046,
        "橙色": 6216,
        "白色": 86558,
        "粉色": 102015,
        "紫色": 87117,
        "红色": 192999,
        "绿色": 40261,
        "蓝色": 142403,
        "黄色": 17923,
        "黑色": 451554
    },

    "detail": {
        "50D": 8,
        "50E": 21,
        "50F": 13,
        "55C": 38,
        "58D": 2,
        "60B": 2,
        "60C": 1,
        "63J": 1,
        "65A": 313,
        "65B": 519,
        "65C": 10,
        "65D": 1,
        "65E": 3,
        "65F": 3,
        "70A": 131106,
        "70B": 100451,
        "70C": 21934,
        "70D": 5357,
        "70E": 1769,
        "70F": 227,
        "70G": 84,
        "74A": 6,
        "75A": 210992,
        "75B": 309069,
        "75C": 85157,
        "75D": 20146,
        "75E": 5690,
        "75F": 1791,
        "75G": 292,
        "75H": 30,
        "75I": 4,
        "80A": 129422,
        "80B": 230519,
        "80C": 96942,
        "80D": 27112,
        "80E": 6699,
        "80F": 1899,
        "80G": 407,
        "80H": 40,
        "80I": 3,
        "80J": 1,
        "82B": 3,
        "85A": 45166,
        "85B": 124980,
        "85C": 85214,
        "85D": 27887,
        "85E": 7456,
        "85F": 2128,
        "85G": 355,
        "85H": 43,
        "85I": 5,
        "85J": 2,
        "90A": 5157,
        "90B": 18612,
        "90C": 31325,
        "90D": 16094,
        "90E": 4965,
        "90F": 1556,
        "90G": 323,
        "90H": 41,
        "90I": 4,
        "90J": 4,
        "95A": 597,
        "95B": 4834,
        "95C": 10339,
        "95D": 9252,
        "95E": 3212,
        "95F": 1275,
        "95G": 480,
        "95H": 43,
        "95I": 1,
        "whole": 1789437
    }
}

json数据可以从服务端获取,动态展示数据。

遗憾,悲伤,喜悦,怨恨,人们在不同时期,会流不同性质的眼泪。 情绪最好不要强行压抑,想哭就哭,想笑就笑,这样反而有利于身心。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言