• 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
                        }
                        ]
                    });
                };

  • 相关阅读:
    HDU 2544 最短路
    HDU 3367 Pseudoforest
    USACO 2001 OPEN
    HDU 3371 Connect the Cities
    HDU 1301 Jungle Roads
    HDU 1879 继续畅通工程
    HDU 1233 还是畅通工程
    HDU 1162 Eddy's picture
    HDU 5745 La Vie en rose
    HDU 5744 Keep On Movin
  • 原文地址:https://www.cnblogs.com/tzwbk/p/13356697.html
Copyright © 2020-2023  润新知