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

最新推荐文章于 2025-06-24 16:51:29 发布

Take_Dream

最新推荐文章于 2025-06-24 16:51:29 发布

阅读量2.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： H5 前端数据可视化

本文链接：https://blog.youkuaiyun.com/Take_Dream_as_Horse/article/details/53928518

H5 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端数据可视化

3 篇文章

订阅专栏

本文介绍如何使用ECharts绘制柱状图展示近几天不同类型的通知发布数量，并提供了一个具体的代码实例，包括图表配置项和数据设定等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、效果截图