柱图的代码的方法的示例

描述:当前是关于Echarts图表中的 示例。
 
            var data1= ['50', '60', '30']
var data2= ['40', '60', '20']
var data3= ['30', '50', '10']
var data4= ['40', '60', '20']
var data5= ['30', '50', '10']
option={
    backgroundColor:"#fff",
	tooltip: {
// 		trigger: 'axis',
// 		axisPointer: {            // 坐标轴指示器,坐标轴触发有效
// 			type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
// 		}
	},
	legend: {
		show:false
	},
// 	年度完成率和季度完成率颜色
	color:['#071960','#1740B4','#02DF82','#F87A0F','#FF3574'],
	grid: {
		left: '3%',
		right: '4%',
		top:'10%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#1B3F81'
				}
			},
			axisLabel: { //坐标轴刻度标签的相关设置。
				interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
				margin:15,
				textStyle: {
					color: '#6B9DD7',
					fontStyle: 'normal',
					fontSize: 14,
				}
			},
			data: ['第一次', '第二次', '第三次']
		}
	],
	yAxis: [
		{
			type: 'value',
			axisLabel: { //坐标轴刻度标签的相关设置。
				interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
				margin:15,
				textStyle: {
					color: '#6B9DD7',
					fontStyle: 'normal',
					fontFamily: '微软雅黑',
					fontSize: 14,
				}
			},
			axisLine: {
				lineStyle: {
					color: '#1B3F81'
				}
			},
			splitLine: {
				lineStyle: {
					color: "#1B3F81",
				},
			},
		},
//         {
//             name: '比率(%)',
//             // 单位 显示位置
//             // nameLocation: 'start',
            
//             type: 'value',
// 			axisLabel: { //坐标轴刻度标签的相关设置。
// 				interval: 0,//设置为 1,表示『隔一个标签显示一个标签』
// 				margin:15,
//                 formatter: '{value}%',
// 				textStyle: {
// 					color: '#6B9DD7',
// 					fontStyle: 'normal',
// 					fontFamily: '微软雅黑',
// 					fontSize: 14,
// 				}
// 			},
// 			axisLine: {
// 				lineStyle: {
// 					color: '#1B3F81'
// 				}
// 			},
// 			splitLine: {
// 				lineStyle: {
// 					color: "#1B3F81",
// 				},
// 			},
//         }
	],
	series: [
		{
			name: '年度指标',
			type: 'bar',
            yAxisIndex:0,
			barWidth:'40px',
			itemStyle: {
                normal: {
                    show: true,
                    borderWidth: 0,
                }
            },
			data:data1
		},
		{
			name: '半年指标',
			type: 'bar',
            yAxisIndex: 0,
			itemStyle: {
                normal: {
                    show: true,
                    borderWidth: 0,
                }
            },
			barWidth:'40px',
			data: data2
		},
		{
			name: '完成值',
			type: 'bar',
            yAxisIndex: 0,
			barWidth:'40px',
			itemStyle: {
                normal: {
                    show: true,
                    borderWidth: 0,
                }
            },
			data: data3
		}
// 		,{
//             name:'年度完成率',
//             type:'line',
//             yAxisIndex: 1,
//             symbolSize:6,
// 			data: data4
//         },{
//             name:'季度完成率',
//             type:'line',
//             yAxisIndex: 1,
//             symbolSize:6,
//             data:data5
//         },
     

	]
};