产品不良数top5echarts 柱状配置项内容和展示

      
        function contains(arr, dst) {
            var i = arr.length;
            while (i -= 1) {
                if (arr[i] == dst) {
                    return i;
                }
            }
            return false;
        }

        var attackSourcesData = [70, 68, 30, 21, 12];
        var attackSourcesName = ['产品A', '产品B', '产品C', '产品D', '产品E'];
        var attackSourcesColor = ['#f36c6c', '#e6cf4e', '#0093ff', '#20d180', '#1089E7'];

        function attackSourcesDataFmt(sData) {
            var sss = [];
            sData.forEach(function (item, i) {
                itemStyle = {
                    color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
                }
                sss.push({
                    value: item,
                    itemStyle: itemStyle
                });
            });
            return sss;
        }
        option = {
            backgroundColor:"black",
            title: {
                text: '产品不良数top5',
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 28,
                },
                top: '5%',
                left: 'center',
            },
            tooltip: {
                show: true,
                // backgroundColor: 'rgba(3,169,244, 0.5)',//背景颜色（此时为默认色）
                textStyle: {
                    fontSize: 16
                },
                //trigger: 'axis',
                //axisPointer: {
                //    type: 'shadow'
                //}
            },
            legend: {
                show: false
            },
            grid: {
                left: 250,
                bottom: 20,
                right: 60,
            },
            xAxis: {
                type: 'value',

                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                }

            },
            yAxis: {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisPointer: {
                    label: {
                        show: true,
                        margin: 30
                    }
                },
                data: attackSourcesName,
                axisLabel: {
                    margin: 210,
                    fontSize: 14,
                    align: 'left',
                    color: '#333',
                    rich: {
                        nt1: {
                            color: '#fff',
                            backgroundColor: attackSourcesColor[0],
                            width: 30,
                            height: 30,
                            fontSize: 20,
                            align: 'center',
                            borderRadius: 100
                        },
                        nt2: {
                            color: '#fff',
                            backgroundColor: attackSourcesColor[1],
                            width: 30,
                            height: 30,
                            fontSize: 20,
                            align: 'center',
                            borderRadius: 100
                        },
                        nt3: {
                            color: '#fff',
                            backgroundColor: attackSourcesColor[2],
                            width: 30,
                            height: 30,
                            fontSize: 20,
                            align: 'center',
                            borderRadius: 100
                        },
                        nt: {
                            color: '#fff',
                            backgroundColor: attackSourcesColor[3],
                            width: 30,
                            height: 30,
                            fontSize: 20,
                            align: 'center',
                            borderRadius: 100
                        },
                        title1: {
                            backgroundColor: attackSourcesColor[0],
                            color: '#fff',
                            width: 145,
                            fontSize: 20,
                            align: 'left',
                            borderRadius: 5,
                            padding: 5,
                        },
                        title2: {
                            backgroundColor: attackSourcesColor[1],
                            color: '#fff',
                            width: 145,
                            fontSize: 20,
                            align: 'left',
                            borderRadius: 5,
                            padding: 5,
                        },
                        title3: {
                            backgroundColor: attackSourcesColor[2],
                            color: '#fff',
                            width: 145,
                            fontSize: 20,
                            align: 'left',
                            borderRadius: 5,
                            padding: 5,
                        },
                        title: {
                            backgroundColor: attackSourcesColor[3],
                            color: '#fff',
                            width: 145,
                            fontSize: 20,
                            align: 'left',
                            borderRadius: 5,
                            padding: 5,
                        }
                    },
                    formatter: function (value, index) {
                        index = contains(attackSourcesName, value) + 1
                        if (index - 1 < 3) {
                            return [
                                '{nt' + index + '|' + index + '}' + '  {title' + index + '|' + value + '}'
                            ].join('\n')
                        } else {
                            return [
                                '{nt|' + index + '}' + '  {title|' + value + '}'
                            ].join('\n')
                        }
                    }
                }
            },
            series: [{
                    z: 2,
                    //name: 'value',
                    type: 'bar',
                    barWidth: '25px',
                    animationDuration: 1500,
                    data: attackSourcesDataFmt(attackSourcesData),
                    /**
                     * es写法
                     attackSourcesData.map((item, i) => {
                        itemStyle = {
                            color: i > 3 ? colorList[3] : colorList[i]
                        }
                        return {
                            value: item,
                            itemStyle: itemStyle
                        };
                    }),
                    */
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return attackSourcesColor[params.dataIndex > 3 ? 3 : params.dataIndex]
                            },
                            barBorderRadius: 5,
                        }
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff',
                        fontSize: 24,
                        offset: [10, 0]
                    }
                }

            ]
        };