//查询图表数据
            function GetData() {
                var qs = $("#qs").val();
                var js = $("#js").val();
                $.ajax({
                    url: '/YCGL_YCYSJLHIS/GetErrorOperate',
                    type: 'GET',
                    data: {
                        qs: qs,
                        js:js
                    },
                    async: false,
                    success: function (data) {
                        var Person=[], OperateC=[];
                        for (var i = 0; i < data.length; i++) {
                            Person.push(data[i].Person);
                            OperateC.push(data[i].OperateC);
                        };
                        Person.push();
                        initEchart(Person, OperateC);
                    },
                    error: function () {
                        alert("获取图表数据失败!");
                    }

});
            };
            //初始化图表
            function initEchart(Person, OperateC) {
                var myChart = echarts.init(document.getElementById('middle'));
                // 显示标题,图例和空的坐标轴
                myChart.setOption({
                    title: {
                        text: '异常操作情况统计分析'
                    },
                    tooltip: {},
                    legend: {
                        data: ['操作次数']
                    },
                    xAxis: {
                        name: '操作人',
                        data: Person
                    },
                    yAxis: {
                        name: '操作次数'
                    },
                    series: [{
                        name: '操作次数',
                        type: 'bar',
                        barWidth: 30,
                        //label: {
                        //    normal: {
                        //        show: true,
                        //        position: 'inside'
                        //    }
                        //},
                        itemStyle: {
                            //通常情况下:
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                                color: function (params) {
                                  
                                    var index_num = params.value;

for (var i = 0; i < OperateC.length; i++) {

//判断数据是否大于1

if (index_num > 1) {
                                            //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                                            //return colorList[params.dataIndex];
                                            return '#ff7f50';
                                        }
                                        else {
                                            //var colorList = ['blue'];
                                            //return colorList[params.dataIndex];
                                            return '#87cefa';
                                        }
                                    }
                                    
                                    
                                }
                            },
                            //鼠标悬停时:
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: OperateC
                    }
                    ]
                });
            };

Echarts根据数据长度变换柱状图柱状的颜色的更多相关文章

  1. HighChart 实现从后台取数据来实时更新柱状和折线组图

    前段时间公司让弄图表,给我说有HighCharts这个js插件,于是上网上搜,由于本人是写后端的,对于JavaScript和jQuery不是很熟悉,虽然找到了模板,但是还是不明白,所以一点一点的改,但 ...

  2. echarts柱状图,改变柱状颜色

    在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [ { name:'天数', type:'bar', stack: '天', data ...

  3. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  4. Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图,散点图和柱状图)

    Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...

  5. Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题

    今天在使用Echarts的柱状统计图出现x轴统计时间出现间隔显示的问题: 数据都拿到了,放到Json数组都是完整的, 展现是时候 如下图:

  6. 用echartsjs 实现动态绘制折线、柱状等图形,并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...

  7. echarts系列之动态修改柱状图颜色

    echarts根据某一变量动态修改柱状图颜色 1.option中参数配置项series { "name":"Android", "type" ...

  8. Echarts 学习系列(3)-Echarts动态数据交互

    写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...

  9. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

随机推荐

  1. Android 如何监听一个线程的开始和结束

    方法一:轮训 比如主线程要等子线程在得到变量“val”值的时候开始用“val”的值来进行工作,使用轮训的方法如下: public class SubThread extends Thread{ pri ...

  2. linux 命令及配置文件搜索命令which、whereis

    which /usr/bin/which 搜索命令所在目录及别名信息 which lsalias ls='ls --color=auto'/usr/bin/ls which rmalias rm='r ...

  3. 转载、Python的编码处理(二)

    以下转自于:wklken的博客,写的非常好的一段有关编码的总结. Python-进阶-编码处理小结 整理下python编码相关的内容 注意: 以下讨论为Python2.x版本, Py3k的待尝试 开始 ...

  4. CMD命令行窗口 复制黏贴

    1.在cmd命令窗口空黑处,单击鼠标右键——选择[标记]——单击鼠标左链拖动选择要复制的文字,[再按一下Eenter键]就完成了命令的复制了. 2.粘贴就更简单了,窗口内单击右键——选择[粘贴],就将 ...

  5. EF CodeFirst下的自动迁移

    当我们修改数据模型,添加一个如下字段 再次运行程序,会因为数据库结构与模型不一致而报错 为解决以上错误可以采取以下三种方式 1.  删除数据库,重新运行站点,会重新生成数据库,这样就会丢失数据 2.  ...

  6. Hadoop HBase概念学习系列之HBase里的时间戳(二十六)

    HBase集群要求每个节点的时间必须同步.HBase对于节点的时间扭曲(time skew)容忍度很低(这和HDFS是不一样的). 这主要是因为HBase需要使用系统时间来产生时间戳.如果系统时间不同 ...

  7. 【模块化】 RequireJS入门教程总结与推荐

    之所以学习RequireJS,肯定对 模块化有一定的理解.这里有几篇学习 RequireJS的文章,推荐给大家去学习. Javascript模块化编程(一):模块的写法 Javascript模块化编程 ...

  8. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...

  9. 【bzoj4543】[POI2014]Hotel加强版

    题目 抄题解.jpg 发现原来的\(O(n^2)\)的换根\(dp\)好像行不通了呀 我们考虑非常牛逼的长链剖分 我们设\(f[x][j]\)表示在\(x\)的子树中距离\(x\)为\(j\)的点有多 ...

  10. HBase学习之路 (三)HBase集群Shell操作

    进入HBase命令行 在你安装的随意台服务器节点上,执行命令:hbase shell,会进入到你的 hbase shell 客 户端 [hadoop@hadoop1 ~]$ hbase shell S ...