<!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:%;

                height: %;

                font-family: "arial, helvetica, sans-serif";

                font-size: x-large;

                font-kerning: inherit;

                font-stretch: expanded;

            }

            #manyColumn{

                width: %;

                height: %;

                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=;i<columLabel.length;i++)

                {

                    for(var j=;j<columName.length;j++)

                    {

                        arrData.push(Math.floor(Math.random()*+*j-*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:,

                            type : 'category',

                            data : columName

                        }

                    ],

                    yAxis : [

                        {

                            min:,

                            type : 'value'

                        }

                    ],

                    series : columnValue

                };

                echart.setOption(option);

            }

        </script>

    </head>

    <body>

        <div id="manyColumn"></div>

    </body>

</html>

echart 分组属性的更多相关文章

  1. echart全局属性，自用，搜索比较快

    // 全图默认背景  // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...

  2. Qt Quick分组属性案例

    import QtQuick 2.4 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Win ...

  3. echart option属性

    option 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 名称 描述 {color}backgroundColor 全图默认背景,(详见backgroundColor ...

  4. echart title属性

    title http://echarts.baidu.com/echarts2/doc/doc.html#Title 标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题. 名称 默认值 描述 ...

  5. echart分组柱形图绑定数据

    <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts </ ...

  6. echart itemStyle属性设置

    itemStyle // itemStyle 设置饼状图扇形区域样式              itemStyle: {                // emphasis:英文意思是 强调;着重; ...

  7. QML Object Attributes QML对象属性

    QML Object Attributes Every QML object type has a defined set of attributes. Each instance of an obj ...

  8. JavaScript正则表达式之分组匹配 / 反向引用

    语法 元字符:(pattern) 作用:用于反复匹配的分组 属性$1~$9 如果它(们)存在,用于得到对应分组中匹配到的子串 \1或$1 用于匹配第一个分组中的内容 \2或$2 用于匹配第一个分组中的 ...

  9. jquery-mobile 学习笔记之中的一个（基础属性）

    写在前面 本文是依据w3c 学习轨迹,自己研习过程中记录下的笔记,仅仅供自己学习轨迹记录之用,不喜勿喷. 0 引入库 引入相应的文件: <link rel="stylesheet&qu ...

随机推荐

  1. PlantUml 使用代码画各种图

    资源 网址 官方github https://github.com/plantuml/plantuml 官方网站 http://plantuml.com/zh/ mac 下,webstorm 中使用 ...

  2. html 出现粒子线条，鼠标移动会以鼠标为中心吸附的特效之canvas-nest.js插件

    我在网上看到一个很炫酷,很有趣的特效,网页上会有很多移动的粒子和线条,鼠标经过时会以鼠标为中心吸附过来,如果时间够久,会形成一个类似震动的.带辐条的车轮子的东西. 网上搜了一下,源码是github里面 ...

  3. [转]微软商店 打开就显示无法加载该页面 代码0x80131500？

    在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的 1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可) 2.点开高级往下拉,勾上 ...

  4. 关闭防火墙，selinux，交互式设置IP的脚本

    脚本内容: #!/bin/bash # ens=$(cat /proc/net/dev | awk '{if($2>0 && NR > 2) print substr($1 ...

  5. 通过excel创建表

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. VirtualApk 插件入门小试

    1 官方资料 滴滴开源Android插件方案:VirtualAPK 2 宿主App集成方法 (1)在整个工程的build.gradle中添加依赖 dependencies { classpath 'c ...

  7. ES - dynamic field mapping

    Dynamic field mapping 1.我们向es提交一个json对象进行索引,es会对json字段和索引字段进行字段类型适配. 规则如下: 2.string字段的转换规则 当date det ...

  8. Windows7环境下Excel2010中图片超链接默认打开程序修改

    在Windows7的环境下,打开Excel2010超链接图片,都是默认用IE打开.搜索了所有的中文网络,没有找到解决方案,且发现受此困扰的人不少.后来用纯英文搜索,终于找到解决方案并尝试成功. 1,操 ...

  9. C# 6.0：Expression – Bodied Methods

    Expression-bodied 方法是C# 6.0 中另一个能简化代码的特性.我们已经对lambda表达式将funciton和delegation关联起来的这种用法很熟悉了.Expression- ...

  10. C++类的组合例子

    Line类调用Point类的两个对象p1,p2作为其数据成员,计算线段长度 组合类构造函数定义的一般形式为: 类名::类名(形参表):内嵌对象1(形参表),内嵌对象2(形参表)... {类的初始化} ...