欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Echarts根据数据长度变换柱状图柱状的颜色

程序员文章站 2022-04-13 15:35:48
//查询图表数据 function GetData() { var qs = $("#qs").val(); var js = $("#js").val(); $.ajax({ url: '/YCGL_YCYSJLHIS/GetErrorOperate', type: 'GET', data: { ......

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