数据可视化--ECharts图--HBuilderX--折线图

最新推荐文章于 2024-05-31 17:00:21 发布

凤枭香

最新推荐文章于 2024-05-31 17:00:21 发布

阅读量2.6k

点赞数 3

分类专栏：可视化-Echarts 文章标签：可视化 js 数据可视化

本文链接：https://blog.csdn.net/yangzheng_520/article/details/116059652

版权

可视化-Echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<div style="width:800px;height:600px;"></div>
		<script type="text/javascript">
		var myChart = echarts.init(document.querySelector('div'))	
		var xdata= ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
		var ydata = [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
		var ydata1 = [2000,1800,900,1400,1000,1000,2400,2000,900,2000,1000,1000]
		//[3002,3004,3007,3009,3001,3003,3007,3005,3000,3009,3004,3002]
		var option = {
			color:['blue','red'],
			title:{
				text:'康师傅方便面销售情况：',
				link:'https://www.baidu.com/?tn=62095104_19_oem_dg',
				target:'blank',
				top: "0%",
				left:"5%",
				textStyle:{
					fontSize: 18,
					fontWeight:'bold',
					fontFamily: "serif",
				},
			},
			tooltip:{
				trigger:'item',//数据项图形触发
				truggerOn:'click',//提示框触发的条件;鼠标点击时触发
				formatter:function(arg){
					console.log(arg)
					return arg.name+'的'+arg.seriesName+'数量:'+arg.data
					// console.log(arg)
				}
			},
			legend: {
			    data:['销售','销售1'],
			},	
			toolbox:{
				feature:{
					saveAsImage:{},
					dataView:{},
					restore:{},
					dataZoom:{},
					magicType:{
						type:['line','bar','stack','tiled']
					},
				}
			},
			xAxis:{
				type:'category',
			    data: xdata,
				boundaryGap:false,//紧挨边缘
			},
			yAxis: {
				type:'value',
				scale:true,//缩放数据
			},
			series:[{name: '销售',
			        type: 'line',
					data: ydata,
					stack:'all',//堆叠图
					markPoint:{//最大最小值
						data:[
							{
								type:'max',
							},
							{
								type:'min',
							}
						],
						symbol: "pin",
						symbolSize: 30,
						symbolOffset: [0, -5],
					},
					markLine:{
						data:[
							{
								type:'average',
							}
						]
					},
					markArea:{},
					// smooth:true,//线是否平滑
					lineStyle:{//线的样式
						color:'red',
						type:'dotted',//dashed solid
					},
					areaStyle:{//区域颜色
						color:'yellow',
					},
					// label:{
					// 	show:true,//是否显示标签
					// 	rotate:60//标签旋转
					// },
			},{name: '销售1',
			        type: 'line',
					data: ydata1,
					stack:'all',//堆叠图
					markArea:{
						itemStyle: {
						        color: "rgba(46, 191, 196, 1)"
						      },
						data:[
							[
								{
									name:'早高峰',
									xAxis: '一月'
								},
								{
									xAxis: '三月'
								}
							],							[
								{
									name:'晚高峰',
									xAxis: '七月'
								},
								{
									xAxis: '八月'
								}
							]
						],
					},
					// smooth:true,//线是否平滑
					lineStyle:{//线的样式
						color:'red',
						type:'dotted',//dashed solid
					},
					areaStyle:{//区域颜色
						color:'pink',
					},
					// label:{
					// 	show:true,//是否显示标签
					// 	rotate:60//标签旋转
					// },
			}]
		};
		myChart.setOption(option);
		</script>
		
	</body>
</html>