Echarts学习------折线图

最新推荐文章于 2024-02-04 18:15:27 发布

卷王中王

最新推荐文章于 2024-02-04 18:15:27 发布

阅读量149

点赞数

分类专栏： Echarts 文章标签：数据可视化 css html echarts

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

版权

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:"left",						//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",   //图例显示方向  垂直或水平
			        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
			    },
			    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',
			        boundaryGap: true,   //距离坐标轴边界是否留空隙
			        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			    },
			    yAxis: {     //
					show:true,
			        type: 'value',	
					axisLine:{
						show:true,  //是否显示坐标轴	
						lineStyle:{   //坐标轴线条设置
						}
					},
					axisTick:{  //坐标轴刻度设置
						show:true
					}
					
			    },
			    series: [
			        {
			            name: '邮件营销',    //必须和图例一致
			            type: 'line',       //展示类型
			            stack: '总量',		//数据堆叠，同个类目轴上系列配置相同的stack值后，
						//后一个系列的值会在前一个系列的值上相加。  如果名称一样会进行累加展示
			            data: [120, 132, 101, 134, 90, 230, 210],
						lineStyle:{    //折线线条设计
							color:"#656565"
						},
						itemStyle:{   //拐点样式设计
							color:"#000000"
						}
			        },
			        {
			            name: '联盟广告',
			            type: 'line',
			            stack: '总量',
			            data: [220, 182, 191, 234, 290, 330, 310]
			        },
			        {
			            name: '视频广告',
			            type: 'line',
			            stack: '总量',
			            data: [150, 232, 201, 154, 190, 330, 410]
			        },
			        {
			            name: '直接访问',
			            type: 'line',
			            stack: '总量',
			            data: [320, 332, 301, 334, 390, 330, 320]
			        },
			        {
			            name: '搜索引擎',
			            type: 'line',
			            stack: '总量',
			            data: [820, 932, 901, 934, 1290, 1330, 1320]
			        }
			    ]
			};

			mycharts.setOption(option);
		</script>
	</body>
</html>