TESTecharts 柱状配置项内容和展示

      var data = [];
for (let i = 0; i < 6; ++i) {
    data.push(Math.round(Math.random() * 100));
}
// var data1 = [62, 47, 30, 22, 9, 7];
var data2 = [100, 100, 100, 100, 100, 100];
var path = 'path://M1390,595h79l-39,22Z';
var myColor = ['#f00', '#ff0', '#0f0', '#ccc', '#ccc', '#ccc'];
option = {
    title: [
        {
            text: 'Project',
            x: '20',
            y: '20',
            textStyle: {
                fontSize: '30',
                fontWeight: '100',
                color: '#9c9c9c'},
        },
        {
            text: 'Infographic',
            x: '120',
            y: '20',
            textStyle: {
                fontSize: '30',
                fontWeight: '100',
                color: '#b7bbc6',
            },
        },
    ],
    grid: {
        left: 100,
        top: 100
    },
    xAxis: {
        axisLabel: {
            interval: 0,
            textStyle: {
                color: function(param, index) {
                    return myColor[index]
                },
                fontSize: 16,
                fontFamily: 'FZYaoti',
                fontWeight: 100,
            },
            margin: 10,
        },
        position: 'top',
        splitLine: {
                show: true,
                lineStyle: {
                    // type: 'dotted',
                    color: '#9c9c9c',
                },
                interval: 0,
            },
        axisLine: {
            lineStyle: {
                color: '#9c9c9c',
                width: 1,
            }
        },
        splitArea: {
            show: false,
        },
        axisTick: {
            show: false
        },
        data: ['2017', '2018', '2019', '2020', '2021', '2022']
    },
    yAxis: {
        axisLine: {
            lineStyle: {
                color: '#9c9c9c',
                width: 1,
            }
        },
        axisLabel: {
            interval: 0,
            formatter: '{value}',
            textStyle: {
                color: '#b7bbc6',
                fontFamily: 'FZYaoti',
            },
            margin: 10,
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            lineStyle: {
                color: '#b7bbc6',
                width: 1,
                height: 5,
            }
        },
    },
    series: [
        {
            realtimeSort: true,
            type: 'bar',
            barWidth: 60,
            barGap: '-100%',
            stack: '广告',
            itemStyle: {
                color: function(params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#ff68bd'
                        }, {
                            offset: 0.5,
                            color: '#ff68bd'
                        }, {
                            offset: 0.5,
                            color: '#9e3b72'
                        }, {
                            offset: 1,
                            color: '#9e3b72'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#ef73ef'
                        }, {
                            offset: 0.5,
                            color: '#ef73ef'
                        }, {
                            offset: 0.5,
                            color: '#883e89'
                        }, {
                            offset: 1,
                            color: '#883e89'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#c37ef5'
                        }, {
                            offset: 0.5,
                            color: '#c37ef5'
                        }, {
                            offset: 0.5,
                            color: '#724892'
                        }, {
                            offset: 1,
                            color: '#724892'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#8787ff'
                        }, {
                            offset: 0.5,
                            color: '#8787ff'
                        }, {
                            offset: 0.5,
                            color: '#5959b1'
                        }, {
                            offset: 1,
                            color: '#5959b1'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#1bdef2'
                        }, {
                            offset: 0.5,
                            color: '#1bdef2'
                        }, {
                            offset: 0.5,
                            color: '#0a8491'
                        }, {
                            offset: 1,
                            color: '#0a8491'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#37edc4'
                        }, {
                            offset: 0.5,
                            color: '#37edc4'
                        }, {
                            offset: 0.5,
                            color: '#1b8970'
                        }, {
                            offset: 1,
                            color: '#1b8970'
                        }]),
                    ];
                    return colorList[params.dataIndex]
                },
            },
            data: data
        },
        {
            "name": "",
            "type": "pictorialBar",
            symbol: path,
            "symbolSize": [60, 20],
            "symbolOffset": [0, 20],
            "z": 12,
            itemStyle: {
                opacity: 1,
                color: function(params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#ff68bd'
                        }, {
                            offset: 0.5,
                            color: '#ff68bd'
                        }, {
                            offset: 0.5,
                            color: '#9e3b72'
                        }, {
                            offset: 1,
                            color: '#9e3b72'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#ef73ef'
                        }, {
                            offset: 0.5,
                            color: '#ef73ef'
                        }, {
                            offset: 0.5,
                            color: '#883e89'
                        }, {
                            offset: 1,
                            color: '#883e89'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#c37ef5'
                        }, {
                            offset: 0.5,
                            color: '#c37ef5'
                        }, {
                            offset: 0.5,
                            color: '#724892'
                        }, {
                            offset: 1,
                            color: '#724892'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#8787ff'
                        }, {
                            offset: 0.5,
                            color: '#8787ff'
                        }, {
                            offset: 0.5,
                            color: '#5959b1'
                        }, {
                            offset: 1,
                            color: '#5959b1'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#1bdef2'
                        }, {
                            offset: 0.5,
                            color: '#1bdef2'
                        }, {
                            offset: 0.5,
                            color: '#0a8491'
                        }, {
                            offset: 1,
                            color: '#0a8491'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#37edc4'
                        }, {
                            offset: 0.5,
                            color: '#37edc4'
                        }, {
                            offset: 0.5,
                            color: '#1b8970'
                        }, {
                            offset: 1,
                            color: '#1b8970'
                        }]),
                    ];
                    return colorList[params.dataIndex]
                },
            },
            "data": [1, 1, 1, 1, 1, 1]
        },
        {
            "name": "",
            "type": "pictorialBar",
            symbol: path,
            "symbolSize": [60, 20],
            "symbolOffset": [0, 0],
            "z": 12,
            label: {
                show: true,
                formatter: "{c}",
                position: 'top',
                distance: 5,
                color: '#fff',
                fontFamily: 'FZYaoti',
                fontWeight: 100,
                // textShadowColor: 'rgba(255, 255, 255, .6)',
                fontSize: 16,
                // textShadowBlur: '0',
                // textShadowOffsetX: 1,
                // textShadowOffsetY: 1,
            },
            itemStyle: {
                opacity: 1,
                // color: function(params) {
                //     var colorList = ['#5a62a3', '#597ba0', '#2698b3', '#37c9a4', '#8ec278', '#8ec278'];
                //     return colorList[params.dataIndex]
                // },
                color: function(params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#d2589d'
                        }, {
                            offset: 0.5,
                            color: '#d2589d'
                        }, {
                            offset: 0.5,
                            color: '#d04d98'
                        }, {
                            offset: 1,
                            color: '#d04d98'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#c160c1'
                        }, {
                            offset: 0.5,
                            color: '#c160c1'
                        }, {
                            offset: 0.5,
                            color: '#bc52be'
                        }, {
                            offset: 1,
                            color: '#bc52be'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#a16ac8'
                        }, {
                            offset: 0.5,
                            color: '#a16ac8'
                        }, {
                            offset: 0.5,
                            color: '#995fc5'
                        }, {
                            offset: 1,
                            color: '#995fc5'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#7c7ae5'
                        }, {
                            offset: 0.5,
                            color: '#7c7ae5'
                        }, {
                            offset: 0.5,
                            color: '#7171e3'
                        }, {
                            offset: 1,
                            color: '#7171e3'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#1bb7c6'
                        }, {
                            offset: 0.5,
                            color: '#1bb7c6'
                        }, {
                            offset: 0.5,
                            color: '#0ab1c1'
                        }, {
                            offset: 1,
                            color: '#0ab1c1'
                        }]),
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#2ebe9d'
                        }, {
                            offset: 0.5,
                            color: '#2ebe9d'
                        }, {
                            offset: 0.5,
                            color: '#21bb99'
                        }, {
                            offset: 1,
                            color: '#21bb99'
                        }]),
                    ];
                    return colorList[params.dataIndex]
                },
            },
            "symbolPosition": "end",
            "data": data
        },
        {
            name: '',
            type: "effectScatter",
            rippleEffect: {
                period: 1,
                scale: 5,
                brushType: 'fill'
            },
            z: 20,
            symbolPosition: 'end',
            symbol: path,
            "symbolSize": [15, 5],
            "symbolOffset": [0, 9],
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 5,
                    shadowOffsetY: 3,
                    shadowOffsetX: 0,
                    color: '#273454',
                }
            },
            data: data
        },
    
    ]
};


function run () {
    var data = option.series[0].data;
    for (var i = 0; i < data.length; ++i) {
        if (Math.random() > 10) {
            data[i] += Math.round(Math.random() * 200);
        }
        else {
            data[i] += Math.round(Math.random() * 100);
        }
    }
    myChart.setOption(option);
}

setTimeout(function() {
    run();
}, 0);
setInterval(function () {
    run();
}, 3000);
const backImg = '/asset/get/s/data-1623324803979-ugSvPhTCK.png';
myChart._dom.style.backgroundImage = "url('" + backImg + "')";