单条树状图

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            var myColor = ['#006af1', '#01a9f0', '#3fa967', '#ffb310', '#ff7611', '#f55555'];
var colorList = ['#d6e6fd', '#d6f0fd', '#e0f1e7','#fff3d9','#ffead9','#fee4e5']
option = {
    tooltip: {
        show: "true",
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#e9e9e9',
            }
        },
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#333',
                fontWeight: 'normal',
                fontSize: 12,
            }
        },
        data: ['应到', '正常', '请假', '迟到', '早退', '旷课']
    }, {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: []
    }, ],
    yAxis: {
        type: "value",
        name: '',
        splitNumber: 6,
        axisLabel: {
            textStyle: {
                color: "#333"
            }
        },
        nameTextStyle: {
            color: "#fff",
            fontSize: 12
        },
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#e9e9e9"
            }
        },
        axisTick: {
            show: false
        }
    },
    series: [{
            type: 'bar',
            xAxisIndex: 1,
            animation: false,
            itemStyle: {
                normal: {
                    show: true,
                    color: function(params) {
                        return colorList[params.dataIndex]
                    },
                    barBorderRadius: 0,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barWidth: '30%',
            data: [33, 33, 33, 33, 33, 33]
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    color: function(params) {
                        return myColor[params.dataIndex]
                    },
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            label: {
                normal: {
                    show: false,

                }
            },
            barWidth: '30%',
            data: [8, 15, 10, 6, 8, 15]
        }
    ],
};