echart 柱状图

  chartOptions4() {
            return {
                grid: {
                    left: 48,
                    right: 12,
                    bottom: 30,
                    top: 40
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    formatter: params => {
                        let html = ''
                        html += `<div style="font-weight: bold; margin-bottom: 8px;">${params[0].name}</div>`
                        params.forEach(item => {
                            html += `
                                <div>
                                    <div style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${item.color}; margin-right: 8px;"></div>
                                    <span style="margin-right: 16px;">${item.seriesName}</span>
                                    <span style="float: right;">
                                        <span style="font-weight: bold;">${item.data}</span>
                                        <span>栋</span>
                                    </span>
                                </div>
                            `
                        })
                        return html
                    }
                },

                xAxis: {
                    show: true,
                    type: 'category',
                    data: ['切坡建房', '滑坡崩塌', '泥石流', '地下采空区', '洪涝', '地面沉降', '液化地基', '其他'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#888',
                        interval: 0,
                        fontSize: 14
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                    show: true,
                    type: 'value',
                    name: '栋',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#EAF0F7'
                        }
                    },
                    nameTextStyle: {
                        color: '#888',
                        fontSize: 14
                    },
                    axisLabel: {
                        color: '#888',
                        fontSize: 14
                    }
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130, 230, 30],
                        name: '',
                        type: 'bar',
                        barWidth: '14',
                        barGap: '0.5',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    const colorArray = [
                                        {
                                            top: '#3ECC7D',
                                            bottom: '#3EA6CC'
                                        },
                                        {
                                            top: '#488BFF',
                                            bottom: '#7248FF'
                                        },
                                        {
                                            top: '#FD5050',
                                            bottom: '#FDBA50'
                                        },
                                        {
                                            top: '#FAA837',
                                            bottom: '#FFEE69'
                                        },
                                        {
                                            top: '#488BFF',
                                            bottom: '#7248FF'
                                        },
                                        {
                                            top: '#FAA837',
                                            bottom: '#FFEE69'
                                        },
                                        {
                                            top: '#FD5050',
                                            bottom: '#FDBA50'
                                        },

                                        {
                                            top: '#B5BFCC',
                                            bottom: '#5B6066'
                                        },
                                        {
                                            top: '#008000',
                                            bottom: '#98FB98'
                                        },
                                        {
                                            top: '#008000',
                                            bottom: '#98FB98'
                                        }
                                    ]
                                    const num = colorArray.length
                                    return {
                                        type: 'linear',
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: colorArray[params.dataIndex % num].bottom
                                            },
                                            {
                                                offset: 1,
                                                color: colorArray[params.dataIndex % num].top
                                            }
                                        ]
                                    }
                                },
                                label: {
                                    // 柱图头部显示值
                                    show: true,
                                    position: 'top',
                                    color: '#333',
                                    fontSize: '12px',
                                    formatter: params => {
                                        return params.value[params.encode.x[0]]
                                    }
                                }
                            }
                        }
                    }
                ]
            }
        }
```