Echarts学习------柱形图

最新推荐文章于 2024-05-13 10:10:38 发布

卷王中王

最新推荐文章于 2024-05-13 10:10:38 发布

阅读量161

点赞数

分类专栏： Echarts 文章标签： html css js echarts

本文链接：https://blog.csdn.net/qq_43719634/article/details/111908347

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="bar" style="width: 1000px;height: 500px;">
			
		</div>
		
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript">
			var mycharts = echarts.init(document.getElementById('bar'));
			option = {
				title:{
					show : "true",   //是否显示标题
					text:"标题内容title",   //主标题的内容
					textStyle:{ 			//主标题字体样式
						color:"red",		//字体颜色
						fontStyle:"italic"	,	//字体样式  'normal' 'italic' 'oblique'
						fontWeight:	"bold",			//主标题文字字体的粗细。'normal''bold''bolder''lighter'数值
						//fontFamily:					//主标题文字的字体系列
						fontSize:30						//主标题文字的字体大小。
					},
					subtext:"子标题内容sub",
					subtextStyle:{
						//与主标题样式设置一致
					},
					left:"center",						//title 组件离容器左侧的距离。'left', 'center', 'right' 数值px
					//right:"",							//title 组件离容器右侧的距离。
					top:"top",								//title 组件离容器上侧的距离。
					//bottom:								//title 组件离容器下侧的距离。
					backgroundColor:"black",				//title组件背景颜色
					borderColor:"blue",							//title组件边框颜色
					borderWidth:5,							//title组件边框宽度
					borderRadius:10							//	title组件边框圆角
				},
				legend:{        //图例配置
					show:true,
					//left:""
					right:200,
					top:"top",
					//bottom:
					orient:"horizontal",					//图例列表的布局朝向  horizontal 水平，vertical：垂直
					data:[{
							name: '数量',
								// 强制设置图形为圆。
							icon: 'circle',
							// 设置文本为红色
							textStyle: {
								color: 'red'
							}
					}]							//	图例名称
				},
				grid:{      //网格大小配置
					
					//网格大小配置
					left:'10%',
					right:100,
					top:'20%',
					bottom:100,		
				},
				tooltip:{    //提示框
					show:true,
					trigger:"axis",   //触发方式  item  ,axis坐标轴
					backgroundColor:"#000000", //提示框背景颜色
					textStyle:{ 		//提示字体样式配置
						//配置类似主标题字体配置
						
					}
					
				},
				toolbox:{    //工具箱设置
					show:true,
					orient:"horizontal",    //工具箱显示方向  垂直或者水平	
					itemSize:15,			//工具箱图标icon大小
					itemGap:10,			//	icon间隔大小
					showTitle:true,			//显示icon标题
					feature:{				//工具箱所含功能设置
						saveAsImage:{		//保存为图片
							show:true
						},
						restore:{			//配置项还原
							show:true
						},
						dataView:{			//数据视图
							show:true,
							 readOnly:true,  //只读
						},
						 magicType:{ 			//动态类型切换
							
						},
						 dataZoom:{			//数据区域缩放
							 
						 }
					}
				},
			    xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {     //所有配置同样适用于xAxis
					show:true,
			        type: 'value',
					axisLine:{
						show:true,  //是否显示坐标轴
						
						
							
						lineStyle:{   //坐标轴线条设置
						}
					},
					axisTick:{  //坐标轴刻度设置
						show:true
					}
			    },
			    series: [{
					name:"数量",
			        data: [120, 200, 150, 80, 70, 110, 130],
			        type: 'bar'
			    }]
			};
			mycharts.setOption(option);
		</script>
	</body>
</html>