04安全服务-投诉分析echarts rgba(255,255,255,.5)' } }, "splitLine": { "show": false }, "axisTick": { "show": false }, "splitArea": { "show": false }, "axisLabel": { "interval": 0, color: 'rgba(255,255,255,0.7)配置项内容和展示

04安全服务-投诉分析

      var xData = function() {
    var data = ["新福利", "溢通公司", "南沙巴士", "从化分公司", "花都恒通", "二巴一分", "二巴二分", "番禺片区", "佛广集团", "客运旅包"];
    return data;
}();

var data = [16,
    11,
    8,
    14,
    17,
    16,
    11,
    8,
    14,
    17
]

var filterData = function() {
    const max = Math.max(...data)
    const notMaxData = []
    const maxData = []
    data.forEach(it => {
        if (it === max) {
            notMaxData.push(0)
            maxData.push(it)
        } else {
            notMaxData.push(it)
            maxData.push(0)
        }

    })
    return {
        'notMaxData': notMaxData,
        'maxData': maxData
    }
}

option = {
    backgroundColor: "RGBA(7, 28, 51, 1)",
    legend: {
        data: ['投诉频次', '最高'],
        right: "10%",
        top: 20,
        itemWidth: 60,
        itemHeight: 30,
        type: "plain",
        textStyle: {
            color: "RGBA(154, 209, 253, 1)",
            fontSize: 30
        }
    },
    "tooltip": {
        "show":false,
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }
        },
        formatter:function(params){
            const tip=params[0].marker + ':' + params[0].seriesName + (params[0].value+params[1].value)
            return tip
        }
    },
    "grid": {
        "borderWidth": 0,
        "top": 110,
        "bottom": 95,
        textStyle: {
            color: "#fff"
        }
    },
    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: 'rgba(255,255,255,.5)'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            color: 'rgba(255,255,255,0.7)',
            fontSize: 18
        },
        "data": xData,
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": true,
            lineStyle: {
                type: 'dashed',
                color: "RGBA(3, 75, 97, 1)"
            }
        },
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            color: 'rgba(255,255,255,0.5)',
            fontSize: 20

        },
        "splitArea": {
            "show": false
        },

    }],
    "series": [{
            "name": "投诉频次",
            "type": "bar",
            "stack": "1",
            "barMaxWidth": 35,
            "barGap": "10%",
            "label":{
                "show":true,
                "color":'#fff',
                "position":'top',
                "fontSize":15,
                  "formatter":(params)=>{
                    if(filterData().maxData[params.dataIndex]===0){
                          return params.data
                    } else {
                        return ''
                    }
                },
            },
            "itemStyle": {
                "normal": {
                    "color": {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 214, 255, 0.6)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(83, 14, 224, 0.15)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    opacity: 1,
                   
                },


            },
            "data": filterData().notMaxData,
        },
        {
            "name": "最高",
            "type": "bar",
            "stack": "1",
            "barMaxWidth": 35,
            "barGap": "10%",
             "label":{
                "show":true,
                "color":'#fff',
                "position":'top',
                 "fontSize":15,
                  "formatter":(params)=>{
                    if(params.data!==0){
                          return params.data
                    } else {
                        return ''
                    }
                },
            },
            "itemStyle": {
                "normal": {
                    "color": {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(191,0,253, 1)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(83,14,224, 0.2)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    opacity: 1
                    
                },


            },
            "data": filterData().maxData,
        }

    ]
}