气泡3d柱状图

var data = [];
for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 10));
}
var xData2 = ['A', 'B', 'C', 'D', 'E'];
var data1 = [100, 100, 100, 100, 100];
// var data2 = [50, 32, 55, 65, 53];
var data3 = [0.01, 0.01, 0.01, 0.01, 0.01];
var data4 = [20, 20, 20, 20, 20];
option = {
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
    },
    grid: {
        top:100,
        left: 100,
        bottom: 100,
    },
    xAxis: {
        show: false,
        axisLabel: {
            interval: 0,
            textStyle: {
                color: 'rgba(65, 49,28, .9)',
                fontSize: 30,
                fontFamily: 'FZYaoti',
                fontWeight: 100,
            },
            margin: 20,
        },
        splitLine: {
            show: false,
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255, 255,255, .8)',
                width: 4,
            },
        },
        splitArea: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: ['A', 'B', 'C', 'D', 'E'],
    },
    yAxis: {
        show: false,
        axisLine: {
            lineStyle: {
                color: 'rgba(255, 255,255, .9)',
                width: 4,
            },
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#42321c',
                fontSize: 20,
                fontFamily: 'FZYaoti',
            },
            margin: 20,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255, 255,255, .8)',
                width: 2,
            },
        },
        axisTick: {
            show: false,
        },
    },
    series: [
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [25, 25],
            symbolOffset: [-5, -20],
            z: 20,
            itemStyle: {
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fef8a7',
                            },
                            {
                                offset: 0.5,
                                color: '#eb710f',
                            },
                            {
                                offset: 1,
                                color: '#fed174',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#feecc2',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#01c49a',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fafee6',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#2eb0ee',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fed6ee',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fd359c',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fefdf9',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#aa2cbd',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [10, 10],
            symbolOffset: [-2, -40],
            z: 20,
            itemStyle: {
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fef8a7',
                            },
                            {
                                offset: 0.5,
                                color: '#eb710f',
                            },
                            {
                                offset: 1,
                                color: '#fed174',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#feecc2',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#01c49a',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fafee6',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#2eb0ee',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fed6ee',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fd359c',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fefdf9',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#aa2cbd',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [15, 15],
            symbolOffset: [20, -50],
            z: 20,
            itemStyle: {
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fef8a7',
                            },
                            {
                                offset: 0.5,
                                color: '#eb710f',
                            },
                            {
                                offset: 1,
                                color: '#fed174',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#feecc2',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#01c49a',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fafee6',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#2eb0ee',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fed6ee',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fd359c',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fefdf9',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#aa2cbd',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [12, 12],
            symbolOffset: [-20, -70],
            z: 20,
            itemStyle: {
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fef8a7',
                            },
                            {
                                offset: 0.5,
                                color: '#eb710f',
                            },
                            {
                                offset: 1,
                                color: '#fed174',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#feecc2',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#01c49a',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fafee6',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#2eb0ee',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fed6ee',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fd359c',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: '#fefdf9',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#aa2cbd',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, -10],
            z: 1,
            itemStyle: {
                opacity: 1,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#bdbdbd',
                        },
                        {
                            offset: 0.2,
                            color: '#f8f8f8',
                        },
                        {
                            offset: 0.5,
                            color: '#fff',
                        },
                        {
                            offset: 0.8,
                            color: '#f8f8f8',
                        },
                        {
                            offset: 1,
                            color: '#bdbdbd',
                        },
                    ],
                    global: false,
                },
                borderColor: 'rgba(0,0,0,.3)',
                borderWidth: 2,
                shadowBlur: 0,
                shadowColor: 'rgba(0, 0, 0, .1)',
                shadowOffsetY: 1,
                shadowOffsetX: 0,
            },
            symbolPosition: 'end',
            data: data1,
        },
        {
            name: '',
            type: 'bar',
            barWidth: 70,
            barGap: '-100%',
            z: 0,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#eeeeee',
                        },
                        {
                            offset: 0.15,
                            color: '#fafafa',
                        },
                        {
                            offset: 0.3,
                            color: '#fff',
                        },
                        {
                            offset: 0.5,
                            color: '#fff',
                        },
                        {
                            offset: 0.7,
                            color: '#fff',
                        },
                        {
                            offset: 0.85,
                            color: '#fafafa',
                        },
                        {
                            offset: 1,
                            color: '#eeeeee',
                        },
                    ],
                    global: false,
                },
            },
            data: data1,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, -10],
            z: 12,
            itemStyle: {
                opacity: 1,
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
                            {
                                offset: 0,
                                color: '#ea8126',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            },
                        ]),

                        new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
                            {
                                offset: 0,
                                color: '#05e8b5',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
                            {
                                offset: 0,
                                color: '#51c4fb',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
                            {
                                offset: 0,
                                color: '#ff58ae',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            },
                        ]),
                        new echarts.graphic.RadialGradient(0.5, 0.4, 0.9, [
                            {
                                offset: 0,
                                color: '#c937e4',
                            },
                            {
                                offset: 1,
                                color: '#fff',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'bar',
            barWidth: 70,
            barGap: '-100%',
            z: 10,
            label: {
                show: true,
                formatter: '{c}%',
                position: 'bottom',
                distance: 20,
                color: '#333',
                fontSize: 18,
            },
            itemStyle: {
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#ffc664',
                            },
                            {
                                offset: 0.3,
                                color: '#ff831f',
                            },
                            {
                                offset: 0.5,
                                color: '#ff831f',
                            },
                            {
                                offset: 0.7,
                                color: '#ff831f',
                            },
                            {
                                offset: 1,
                                color: '#ffc664',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#0fae8b',
                            },
                            {
                                offset: 0.3,
                                color: '#01c49a',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 0.7,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#0efbc7',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#229adf',
                            },
                            {
                                offset: 0.3,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 0.7,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#6ad1fc',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#fa1181',
                            },
                            {
                                offset: 0.3,
                                color: '#fd359c',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 0.7,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fe7bc7',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#932792',
                            },
                            {
                                offset: 0.3,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 0.7,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#c382de',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 25],
            symbolOffset: [0, 10],
            z: 3,
            itemStyle: {
                opacity: 1,
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#ffc664',
                            },
                            {
                                offset: 0.3,
                                color: '#ff831f',
                            },
                            {
                                offset: 0.5,
                                color: '#ff831f',
                            },
                            {
                                offset: 0.7,
                                color: '#ff831f',
                            },
                            {
                                offset: 1,
                                color: '#ffc664',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#0fae8b',
                            },
                            {
                                offset: 0.3,
                                color: '#01c49a',
                            },
                            {
                                offset: 0.5,
                                color: '#01c49a',
                            },
                            {
                                offset: 0.7,
                                color: '#01c49a',
                            },
                            {
                                offset: 1,
                                color: '#0efbc7',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#229adf',
                            },
                            {
                                offset: 0.3,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 0.5,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 0.7,
                                color: '#2eb0ee',
                            },
                            {
                                offset: 1,
                                color: '#6ad1fc',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#fa1181',
                            },
                            {
                                offset: 0.3,
                                color: '#fd359c',
                            },
                            {
                                offset: 0.5,
                                color: '#fd359c',
                            },
                            {
                                offset: 0.7,
                                color: '#fd359c',
                            },
                            {
                                offset: 1,
                                color: '#fe7bc7',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#932792',
                            },
                            {
                                offset: 0.3,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 0.5,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 0.7,
                                color: '#aa2cbd',
                            },
                            {
                                offset: 1,
                                color: '#c382de',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            data: [1, 1, 1, 1, 1],
        },
        {
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: [70, 40],
            symbolOffset: [0, 40],
            z: -1,
            label: {
                show: true,
                formatter: '{c}%',
                position: 'top',
                distance: -20,
                color: '#fff',
                fontFamily: 'FZYaoti',
                fontWeight: 100,
                fontSize: 20,
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#bbbbbb',
                        },
                        {
                            offset: 0.5,
                            color: '#e9e9e9',
                        },
                        {
                            offset: 0.6,
                            color: '#fff',
                        },
                        {
                            offset: 1,
                            color: '#e5e6e8',
                        },
                    ],
                    global: false,
                },
            },
            data: data4,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, 30],
            z: -2,
            itemStyle: {
                opacity: 1,
                shadowBlur: 5,
                shadowColor: 'rgba(90, 96, 108, .3)',
                shadowOffsetY: 2,
                shadowOffsetX: 15,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#bbbbbb',
                        },
                        {
                            offset: 0.5,
                            color: '#e9e9e9',
                        },
                        {
                            offset: 0.6,
                            color: '#fff',
                        },
                        {
                            offset: 1,
                            color: '#e5e6e8',
                        },
                    ],
                    global: false,
                },
            },
            symbolPosition: 'end',
            data: data3,
        },
    ],
};
function run () {
    var data = option.series[0].data;
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() <= 100) {
            data[i] = Math.round(Math.random() * 60);
        }
        else {
            data[i] = Math.round(Math.random() * 80);
        }
    }
    myChart.setOption(option);
}

setTimeout(function() {
    run();
}, 0);
setInterval(function () {
    run();
}, 3000);