echart 分组属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>echarts-多柱子柱状图</title>
        <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
        <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
        <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
        <style>
            body,html{
                width:99%;
                height: 99%;
                font-family: "arial, helvetica, sans-serif";
                font-size: x-large;
                font-kerning: inherit;
                font-stretch: expanded;
            }
            #manyColumn{
                width: 100%;
                height: 100%;
                font-size: 14px;
                font-family: "微软雅黑";
                backface-visibility: visible;
                background-blend-mode: inherit;
                background-origin: border-box;
                background: content-box;
                background-color: #5BC0DE;
            }
        </style>
        <script>
            $(function(){
                buildData();
            });
            
            //生成数据
            function buildData()
            {
                var columLabel = ['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];
                var columName = ['周一','周二','周三','周四','周五','周六','周日'];
                var columnValue = new Array();
                var arrData = new Array();
                
                for(var i=0;i<columLabel.length;i++) 
                {
                    for(var j=0;j<columName.length;j++) 
                    {
                        arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
                    }
                    console.info(arrData);
                    columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
                }
                
                buildChart(columLabel,columName,columnValue);
            }
            
            //生成图形
            function buildChart(columLabel,columName,columnValue)
            {
                var chart = document.getElementById('manyColumn');  
                var echart = echarts.init(chart);  
                var option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            
                            type : 'shadow'  //分组      
                        }
                    },
                     toolbox: {
                        show : true,
                        feature : {
                            saveAsImage : {show: true}
                        }
                    },
                    legend: {
                        data:columLabel
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            min:0,
                            type : 'category',
                            data : columName
                        }
                    ],
                    yAxis : [
                        {
                            min:0,
                            type : 'value'
                        }
                    ],
                    series : columnValue
                };
                
                echart.setOption(option);
            }
        </script>
    </head>
    <body>
        <div id="manyColumn"></div>
    </body>
</html>

posted on 2019-02-18 17:09 简简单单2018 阅读(1057) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2016-02-18 simple demo how to get the list of online users

人本善良

导航

统计

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

有用的链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论

echart 分组属性