自制echarts双y轴折线图

对着官网边学边做，这些数据都是虚拟的，但是已经够普通使用了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图表</title>
		<script src="http://guangzhou.auto.qq.com/js/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <div id="main" style="width: 1180px;height:450px;"></div>
	</body>
	<script type="text/javascript">
		var myChart=echarts.init(document.getElementById('main'));
		var dataX=["2018-2-26","2018-2-24","2018-2-22","2018-2-20","2018-2-18","2018-2-16","2018-2-14","2018-2-12","2018-2-10","2018-2-8","2018-2-6","2018-2-4"],
			dataY1=[523, 700, 825, 620, 873, 943, 432, 721,201,340,462,243],
			dataY2=[175, 260, 345, 592, 320, 431, 142, 189,80,150,124,89];
		var option = {
			title:{
			},grid:{
				bottom: 70
			},toolbox:{
				show:true,
				right:160,
				feature:{
					magicType: {
					        type: ['line', 'bar']
					   },
					saveAsImage:{},
					dataView:{},
					restore: {},
				}
			},tooltip:{
				trigger: 'axis'
			},dataZoom: [
		        {
		        	type:'slider',
		            show: true,
		            realtime: true,
		            start: 0,
		            end: 50
		        },
		        {
		            type: 'inside',
		            show: true,
		            realtime: true,
		            start: 0,
		            end: 50
		        }
    		],legend:{
				data:['PV','报名人数'],
				itemGap:30,
				itemWidth:70,
				itemHeight:12,
			}, xAxis:{
				data: dataX,
			},yAxis:[{
				name:'PV',
				nameTextStyle:{
					color:'#666666',
					fontWeight:'bolder',
					fontSize:14
				},
				axisLabel:{
					color:'#333333',
					fontSize:14
				}
			},{
				name:'报名人数',
				nameTextStyle:{
					color:'#666666',
					fontWeight:'blod',
					fontSize:14
				}
			}],series:[
			{
				name: 'PV',
				type: 'line',
				data: dataY1,
				yAxisIndex: 0,
				symbol:'circle',
				symbolSize:9,
				//拐点标志样式
				itemStyle: {
					normal: {
		            	color:'#FF5100',  
		            	lineStyle:{color:'#FF5100',width:'3'},
		            	areaStyle:{type:'default'}
		        	}
				},
				//渐变橙白
				areaStyle:{
					normal: { 
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
		                    offset: 0, 
		                    color: 'rgba(255,213,193,0.3)' 
		                }, { 
		                    offset: 0.8, 
		                    color: 'rgba(255,255,255,0.2)' 
		                }]) 
		            }
				}
			},{
				name: '报名人数',
				type: 'line',
				data: dataY2,
				yAxisIndex: 1,
				symbol:'circle',
				symbolSize:9,
				//拐点标志样式
				itemStyle: {
					normal: {
		            	color:'#2B9BF8',  
		            	lineStyle:{color:'#2B9BF8',width:'3'},
		            	areaStyle:{type:'default'}
		        	}
				},
				//渐变蓝白
				areaStyle:{
					normal: { 
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
		                    offset: 0, 
		                    color: 'rgba(189,221,248,1)' 
		                }, { 
		                    offset: 0.8, 
		                    color: 'rgba(255,255,255,0.2)' 
		                }]) 
		            }
				}
			}]
		};
		myChart.setOption(option);
	</script>
</html>
有不足之处还望多多包含和欢迎提出来：670448045
自制echarts双y轴折线图

猜你喜欢
