//查询图表数据
            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. How To Improve Deep Learning Performance

    如何提高深度学习性能 20 Tips, Tricks and Techniques That You Can Use ToFight Overfitting and Get Better Genera ...

  2. Java 实验案例(类和对象篇)

    实验任务 任务一:手机类的封装 任务二:基于控制台的购书系统 任务三:简单的投票程序 实验内容 任务一:手机类的封装 任务目的 理解和掌握面向对象的设计过程 掌握类的结构和定义过程 掌握构造方法及其重 ...

  3. Sink Prosessor - Flume的可靠性保证:故障转移、负载均衡

    Flume的一些组件(如Spooling Directory Source.File Channel)能够保证agent挂掉后不丢失数据. 1.负载均衡 1)Load balancing Sink P ...

  4. ahjesus Axure RP 8.0注册码,亲测可用

    ahjesus Axure RP 8.0注册码 ahjesus Axure RP 8.0注册码 用户名:aaa注册码:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7F ...

  5. 深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio

    本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约.这个 ...

  6. 使用 Azure CLI 管理 Azure 磁盘

    Azure 虚拟机使用磁盘来存储 VM 操作系统.应用程序和数据. 创建 VM 时,请务必选择适用于所需工作负荷的磁盘大小和配置. 本教程介绍如何部署和管理 VM 磁盘. 学习内容: OS 磁盘和临时 ...

  7. C#实现字符串计算

    借用DataTable的Compute函数进行计算. string formula = "1+1*4/3+23*(1+2)"; DataTable dt = new DataTab ...

  8. MySql EF6 DBFirst 向导无法生成 edmx 解决方法(同:您的项目引用了最新实体框架;但是,找不到数据链接所需的与版本兼容的实体框架数据库提供程序)

    使用 MySql EF6 DBfirst 生成模型时经常会遇到EF6模式无法选择的情况究其原因, 还是因为没有正确的使用 Connector/Net. 下面说一下使用方法. 使用 MySql DBFi ...

  9. 利用skipList(跳表)来实现排序(待补充)

    用于排名的数据结构 一般排序为利用堆排序(二叉树)和利用skipList(跳表)的方式 redis中SortedSet利用skipList(跳表)来实现排序,复杂度为O(logn),利用空间换时间,类 ...

  10. 使用 libffi 实现 AOP

    核心还是利用oc消息的查找派发机制,进行类结构的动态修改,用新函数替换老函数,然后再调用老函数. 前言     众所周知,使用runtime的提供的接口,我们可以设定原方法的IMP,或交换原方法和目标 ...