zoukankan      html  css  js  c++  java
  • Echarts根据数据变换柱状图柱状的颜色

     //查询图表数据
                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
                        }
                        ]
                    });
                };

  • 相关阅读:
    关于软件工程的疑问
    thinkphp基础入门(2)
    JS What does `void 0` mean?
    第2章 TCPIP的工作方式
    JavaScript中var a=b=c=d的发现
    如何让 Git 忽略掉文件中的特定行内容?
    thinkphp基础入门(1)
    IIS网站服务器性能优化指南(转载)
    240个jquery插件
    解决_动态加载JS文件_调用时出错
  • 原文地址:https://www.cnblogs.com/tzwbk/p/13356697.html
Copyright © 2011-2022 走看看