为echarts的叠加柱状图设置颜色

1、废话少说,直接上代码(前提先引入echarts先关文件)

				var myChart = echarts.init(document.getElementById('chartOne'));
					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '近'+days+'天各类型通知发布数量',
							textStyle: {
								color: '#c23531',
								fontSize: 14
							}
						},
						tooltip : {
							trigger: 'axis',
							axisPointer : {
								type : 'shadow'
							}
						},
						legend: {
							data:['扶贫局通知','云平台通知','其他']
						},
						grid: {
							left: '3%',
							right: '2%',
							bottom: '3%',
							containLabel: true
						},
						xAxis : [
							{
								type : 'category',
								data : xAData //X轴坐标
							}
						],
						yAxis : [
							{
								type : 'value'
							}
						],
						series : [
							{
								name:'扶贫局通知',
								type:'bar',
								//data:fu,
								data:[11,33,45],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#ab78ba'}
								}
							},
							{
								name:'云平台通知',
								type:'bar',
								//data:yun,
								data:[11,28,45],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#72b201'}
								}
							},
							{
								name:'其他',
								type:'bar',
								//data:qi,
								data:[22,33,66],
								//设置柱体颜色
								itemStyle:{
									normal:{color:'#08a9f2'}
								}
							}

						]
					};
					myChart.setOption(option);

2、效果截图

为echarts的叠加柱状图设置颜色_第1张图片

你可能感兴趣的:(H5,前端数据可视化)