TESTecharts 柱状配置项内容和展示

      var path =
    'path://M765.6,129.1h-84.1c5.5-3.7,6.4-13.4,6.4-17.6l1-23.4c0-4.2,3.4-7.6,7.6-7.6h54.1c4.2,0,7.6,3.4,7.6,7.6l1,23.4C759.2,115.7,761.4,125.3,765.6,129.1z';
var path1 =
    'path://M24,192.9l142.4,0.4l143.2-1.3c8.7,0,16.4-0.5,18.9-2.4c6.1-4.7,5.5-14.3,0-19.7L176.9,4c-2.9-2.9-6.7-4.1-10.5-4c-3.8-0.2-7.6,1.1-10.5,4L4.3,169.9c-5.5,5.4-6,14.9,0,19.7C7.1,191.8,12,192.9,24,192.9L24,192.9z';
var data = [53, 40, 60, 50, 60, 40, 50];
var data1 = [0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01];
var data2 = [1, 1, 1, 1, 1, 1, 1];
var option = {
    backgroundColor: '#5d615d',
    tooltip: {
        show: false,
    },
    grid: {
        top: '20%',
        left: '5%',
        right: '5%',
        bottom: '10%',
    },
    xAxis: {
        data: ['01', '02', '03', '04', '05', '06', '07'],
        offset: -32,
        z: 99,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: true,
            width: 30,
            height: 25,
            lineHeight: 30,
            textStyle: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 100,
            },
        },
    },
    yAxis: {
        min: 0,
        max: 80,
        splitLine: {
            show: false,
            lineStyle: {
                color: '#ccc',
            },
        },
        axisTick: {
            lineStyle: {
                color: '#ccc',
            },
        },
        axisLine: {
            lineStyle: {
                color: '#ccc',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ccc',
            },
        },
    },
    series: [
        {
            type: 'bar',
            z: 0,
            itemStyle: {
                normal: {
                    color: '#edf2f5',
                    shadowColor: 'rgba(0,0,0,.6)',
                    shadowBlur: 15,
                    shadowOffsetX: 5,
                    shadowOffsetY: 0,
                    borderRadius: 5,
                },
                emphasis: {
                    color: '#edf2f5',
                },
            },
            barWidth: '40',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbol: path,
            symbolSize: [35, 20],
            symbolOffset: [0, -20],
            z: 2,
            itemStyle: {
                opacity: 1,
                shadowBlur: 1,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowOffsetY: 1,
                shadowOffsetX: 1,
                color: function (params) {
                    var colorList = [
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#00c1bb',
                            },
                            {
                                offset: 0.6,
                                color: '#00c1bb',
                            },
                            {
                                offset: 0.8,
                                color: '#04e2df',
                            },
                            {
                                offset: 1,
                                color: '#009b96',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#3b925b',
                            },
                            {
                                offset: 0.6,
                                color: '#3b925b',
                            },
                            {
                                offset: 0.8,
                                color: '#44bf74',
                            },
                            {
                                offset: 1,
                                color: '#357c4d',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#b66c51',
                            },
                            {
                                offset: 0.6,
                                color: '#b66c51',
                            },
                            {
                                offset: 0.8,
                                color: '#e08667',
                            },
                            {
                                offset: 1,
                                color: '#96583b',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#c63d75',
                            },
                            {
                                offset: 0.6,
                                color: '#c63d75',
                            },
                            {
                                offset: 0.8,
                                color: '#ea5492',
                            },
                            {
                                offset: 1,
                                color: '#aa3364',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#3170a2',
                            },
                            {
                                offset: 0.6,
                                color: '#3170a2',
                            },
                            {
                                offset: 0.8,
                                color: '#4c9ad8',
                            },
                            {
                                offset: 1,
                                color: '#23638c',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#8fb61c',
                            },
                            {
                                offset: 0.6,
                                color: '#8fb61c',
                            },
                            {
                                offset: 0.8,
                                color: '#adde31',
                            },
                            {
                                offset: 1,
                                color: '#7e9e18',
                            },
                        ]),
                        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#804ba1',
                            },
                            {
                                offset: 0.6,
                                color: '#804ba1',
                            },
                            {
                                offset: 0.8,
                                color: '#b166d6',
                            },
                            {
                                offset: 1,
                                color: '#72418e',
                            },
                        ]),
                    ];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data1,
        },
        {
            type: 'pictorialBar',
            symbol: 'rect',
            symbolSize: [3, '100%'],
            symbolOffset: [0, 0],
            z: 1,
            symbolPosition: 'end',
            itemStyle: {
                color: function (params) {
                    var colorList = ['#00c6bd', '#007e3e', '#975f34', '#d70052', '#1d2a86', '#8fb922', '#7e32a2'];
                    return colorList[params.dataIndex];
                },
            },
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbol: path1,
            symbolSize: [40, 18],
            symbolOffset: [0, -14],
            z: 1,
            itemStyle: {
                normal: {
                opacity: 1,
                color: '#edf2f5',
                },
                emphasis: {
                    color: '#edf2f5',
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: [12, 12],
            symbolOffset: [0, 3],
            z: 2,
            itemStyle: {
                color: function (params) {
                    var colorList = ['#00c6bd', '#007e3e', '#975f34', '#d70052', '#1d2a86', '#8fb922', '#7e32a2'];
                    return colorList[params.dataIndex];
                },
            },
            symbolPosition: 'end',
            data: data,
        },
        {
            type: 'pictorialBar',
            symbolSize: [60, 10],
            symbolOffset: [0, 3],
            z: 0,
            itemStyle: {
                opacity: 1,
                color: 'rgba(0,0,0,.1)',
                shadowColor: 'rgba(0,0,0,1)',
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
            },
            data: data2,
        },
    ],
};