echarts 柱状配置项内容和展示

      var yList = [61, 86, 67, 43, 52, 70, 28, 107];
var colors = [
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#00FFFF',
            },
            {
                offset: 0.5,
                color: '#11A6D0',
            },
            {
                offset: 1,
                color: '#11A6D0',
            },
            {
                offset: 0,
                color: '#83bac9',
            },
            {
                offset: 0,
                color: 'rgba(17,166,208,0.3)',
            },
        ],
    },
];
option = {
    backgroundColor: 'black',
    grid: {
        left: '15%',
        right: '3%',
        top: '10%',
        bottom: '15%',
    },
    xAxis: {
        nameTextStyle: {
            color: '#00dcf1',
            padding: [0, 0, 0, 20],
        },
        data: ['杭商院北门', '港边路口', '张家口', '马冢', '马家村', '未来学校', '金竹新村', '学府小学'],
        show: true,
        type: 'category',
        axisLabel: {
            // rotate: -30, // 设置文字旋转
            fontSize: 12,
            lineHeight: 24,
            fontFamily: 'siyuan',
            // fontStyle: 'italic', // 设置文字斜体
            textStyle: {
                //改变刻度字体样式
                color: '#fff',
            },
        },
        axisTick: {
            show: false,
        },
    },
    yAxis: {
        show: true,
        splitNumber: 4,
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.2)',
            },
        },
        axisLabel: {
            color: '#fff',
        },

        axisTick: {
            //y轴刻度线
            show: false,
        },
        axisLine: {
            //y轴
            show: false,
        },
    },
    series: [
        {
            type: 'bar',
            barWidth: '40',
            showBackground: true,
            backgroundStyle: {
                color: 'none',
            },
            itemStyle: {
                normal: {
                    color: function (params) {
                        //console.log(params)
                        return colors[params.dataIndex % 7];
                    },
                },
            },
            label: {
                show: true,
                position: [20, -25],
                color: '#fff',
                fontSize: 12,
                fontStyle: 'bold',
                align: 'center',
            },

            data: yList,
        },
        {
            z: 2,
            type: 'pictorialBar',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '50%'],
            symbolSize: [40, 10],
            itemStyle: {
                normal: {
                    color: function (params) {
                        return colors[params.dataIndex % 7];
                    },
                },
            },
        },
        {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: yList,
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [40, 40 * 0.25],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: function (params) {
                        return colors[params.dataIndex % 7].colorStops[0].color;
                    },
                },
            },
        },
    ],
};