柱状图echarts 柱状配置项内容和展示

       var colorArray = [
                    {
                        top: 'rgba(0, 198, 116, 1)', //黄
                        bottom: 'rgba(0, 198, 116, 0.3)'
                    }, {
                        top: 'rgba(255, 106, 0, 1)', //绿
                        bottom: 'rgba(255, 106, 0, 0.3)'
                    },
                    {
                        top: 'rgba(128, 128, 128, 0.99)', //蓝
                        bottom: 'rgba(128, 128, 128, 0.3)'
                    },
                ];
option = {
                    grid: {
                        left: '100',
                        right: '50',
                        bottom: '30',
                        top: '0',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    xAxis: {
                        show: false,
                        type: 'value',
                    },
                    yAxis: [
                        {
                            type: 'category',
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: 'rgba(255, 255, 255, 0.5)'
                                },
                            },

                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            data: ['运转率正常', '运转率低', '运转率低']
                        }, {
                            type: 'category',
                            inverse: true,
                            axisTick: 'none',
                            axisLine: 'none',
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: '#ffffff',
                                    fontSize: '18'
                                },
                            },
                            data: [60, 50, 8]
                        }],
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    show: true,
                                    color: function (params) {
                                        let num = colorArray.length;
                                        return {
                                            type: 'linear',
                                            colorStops: [{
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }, {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }, {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }, {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }, {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }, {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            }, {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }],
                                            //globalCoord: false
                                        }
                                    },
                                    barBorderRadius: 70,
                                    borderWidth: 0,
                                    borderColor: '#333',
                                }
                            },
                            barWidth: 12,
                            data: [60, 50, 8]
                        },
                        {
                            name: '背景',
                            type: 'bar',
                            barWidth: 20,
                            barGap: '-130%',
                            barBorderRadius: 10,
                            data: [100, 100, 100],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(24,31,68,1)',
                                    barBorderRadius: 30,
                                }
                            },
                        },
                    ],
                    animationEasingUpdate: 'quinticInOut',
                    animationDurationUpdate: 1500, //动画效果
                };