前段时间接到一个任务，做大数据的大屏展示，又把放了很久的echarts给捞了出来，数据展示中用到了折线图，饼图，环形图，柱状图以及中国地图等，会在下面的几篇文章为大家一一介绍。

折线图---html

<div id="confidence"></div>

折线图JS文件---当然还需要你引入echart的js文件

var confidence = echarts.init(document.getElementById('confidence'));
	confidenceOpt = {
		title:{//标题
			text:"一周信息数据展示",
			x:'center',
			textStyle:{
				color:'#fff',
				fontSize:20
			}
		},
		tooltip:{
			trigger:'axis'
		},
		legend: {
			orient : 'vertical',
			x:'right',
			data:['新增用户','活跃用户'],
			icon:'rectangle',//设置图例为长方形
			textStyle:{
				color:["#1c86f1","#f03f58"]
			}
		},
		xAxis:{
			type: 'category',
	        data: ['2019-2-14','2019-2-15','2019-2-16','2019-2-17','2019-2-18','2019-2-19','2019-2-20'],
			axisLabel:{ //坐标轴刻度位置设置
				rotate:'-30'
			},
			//坐标轴颜色
			axisLine:{
				lineStyle:{
					color:'#38f'
				}
			  }
			},
		yAxis:{
			type:'value',
			show:true,
			name:"单位(万人)",
			splitLine:{//设置网格线颜色
				show:true,
				lineStyle:{
					color:['#05293C'],
					width:1,
					type:'solid'
				  }
				},
				axisLine:{//坐标线的颜色
					lineStyle:{
						type:'solid',
						color:"#38f",
						width:'2'
					}
				},
			axisLabel:{//纵坐标字体颜色
				textStyle:{
					color:"#38f"
				}
			}
		},
		series:[
			{
			name:'新增用户',
	        type:'line',
	        symbol:'circle',
	        symbolSize:8,
	        itemStyle:{
	            normal:{
					label:{show:true},
	                color:'#1c86f1',
	                borderColor:'#1c86f1',  //拐点边框颜色
	            }
	        },
	        data:[22, 38, 90, 43, 69, 30, 70]
		},
		{
			name:'活跃用户',
		    type:'line',
		    symbol:'circle',
		    symbolSize:8,
		    itemStyle:{
		        normal:{
					label:{show:true},
		            color:'#f03f58',
		            borderColor:'#f03f58',  //拐点边框颜色
		        }
		    },
		    data:[25, 10, 91, 51, 28, 61, 31]
		}]
	}
	confidence.setOption(confidenceOpt);