柱状图

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            var legend13 = ['村级班子','村小组长'],
option = {
    backgroundColor: '#1e457d',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        right:'10%',
        textStyle: {
            fontStyle: 'normal',
            fontSize: 13,
            color: "#bec4d0"
        }
    },
    xAxis: [{
        type: 'category',
        axisLabel: {
            color: '#fff',
			interval:0
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#7486a3'
            }
        },
        axisTick: {
            show: false,
        },
        data: ['博雅社区','曹家村','城东社区','大草坝村','大东关社区','东环路社区','杜家漕村','黄家村','栗子园村','莲花池村','廉家庄村','吕家村','马家店村','庙坡村','石家庄村','五郎庙村','小东关社区','小西关村','谢家井社区','湑水村','翟家寺']
    }],
    yAxis: [
        {
            type: 'value',
            name: "次",
            min: 0,
            position: 'left',
            nameTextStyle: {
                color: "#fff",
                fontSize: 11,
                padding:[0,0,0,-40]
            },
            axisLine: {
                lineStyle: {
                    color: '#0a3e98'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#8fa5c9'
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: "#fff",
                }
            },
        },
        {
            type: 'value',
            name: "",
            min: 0,
            position: 'right',
            nameTextStyle: {
                color: "#fff",
                fontSize: 11,
            },
            axisLine: {
                lineStyle: {
                    color: '#0a3e98'
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#0a3e98',
                    type: "dotted",
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: "#fff",
                }
            },
        }
    ],
	dataZoom: [
	    {
	      type: 'slider',
	      realtime: false,
	      start: 0,
	      end: 30,
          height:10,
	    }
	  ],
    series: [
        {
            name: '外委培训',
            type: 'bar',
            // stack: 'one',
            barWidth: 10, //柱子宽度
            barGap: 0.3, //柱子之间间距
            itemStyle: {
                normal: {
                    color: "#05deec",
                    barBorderRadius: 13,
                }
            },
            data: [85,24,43,35,42,189,28,50,30,34,42,50,46,53,20,32,25,32,22,32,40],
        },{
            name: '现场培训',
            type: 'bar',
            barWidth: 10, //柱子宽度
            barGap: 0.3, //柱子之间间距
            itemStyle: {
                normal: {
                    color: "#e8ff00",
                    barBorderRadius: 13,
                }
            },
            data: [20,10,15,10,20,20,10,10,10,10,10,10,10,10,10,10,20,20,10,10,10],
        },{
            name: '线上培训',
            type: 'bar',
            // stack: 'one',
            barWidth: 10, //柱子宽度
            barGap: 0.3, //柱子之间间距
            itemStyle: {
                normal: {
                    color: "#2eea32",
                    barBorderRadius: 13,
                }
            },
            data: [10,20,10,20,20,20,10,20,10,10,10,10,20,10,20,20,10,20,10,10,20],
        }
    ]
};