echarts3.0折线图案例

echarts3.0里面的折线图是使用频率比较高的一种数据可视化图形，今天来看个它的例子，效果如图：

echarts3.0折线图案例

对应的html代码比较简单：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="anti/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="anti/bootstrap-3.3.5/css/bootstrap-table.min.css" rel="stylesheet"/>
<script src="anti/js/jquery-1.10.2.js"></script>
<script src="anti/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="anti/echarts/echarts.min.js"></script>
<title>发起查询页面</title>
</head>
<body>
	<div class="container-fluid">
		<div class="panel panel-default noborder myborder">
	 		<div class="panel-heading"><span class="title">查询趋势</span></div>
	 		<div class="panel-body">
				 <ul class="taglist">
				 	<li class="active">近7天
				 	<span class="tip"></span>
				 	</li>
				 	<li>近30天</li>
				 	<li>自定义时长</li>
				 </ul>
					<div id="querycnt"></div>
			</div>
		</div>	
	</div>
	
</body>
</html>

相关的JavaScript代码：

<script>
	var chart = echarts.init($('#querycnt').get(0));
       var chartOption = {
        legend: {
            data:["查询量"],
            bottom:20
        },
        grid:{
            top:10,
            height:170
        },
        xAxis: {
            data: [],
            axisLabel:{rotate:0,interval:0},
			axisLine:{
				show:false
			},
			axisTick:{
				show:false
			}
        },
        yAxis:  [{
			 scale:true,
		        name:"",
				axisLine:{
					show:false
				},
				axisTick:{
					show:false
				}
		     }],
        tooltip:{},
        series: [{
            name: '查询量',
            type: 'line',
            smooth:true,
            data: [],
            itemStyle:{
                normal:{
        			color:'#5aa7fe'
               }
           },
           areaStyle: {normal: {
	           	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	         	  offset: 0, color: '#5aa7fe' // 0% 处的颜色
	         	}, {
	         	  offset: 1, color: '#bcdbff' // 100% 处的颜色
	         	}], false)    	   
           }}
        }
     ]//series
  };//option
  chart.setOption(chartOption);
  chart.showLoading();	
  chart.hideLoading();
	chart.setOption({
			xAxis: {
                     data:["20171228","20171229","20171230","20171231","20180101","20180102","20180103"]
                },
	        series: [{
              name: '查询量',
              data: ["262.21","262.82","263.48","264.33","264.12","265.19","266.02"]
          }]
	});
	</script>

详细的属性解释参考官网的http://echarts.baidu.com/option3.html#title，下面针对一些属性作出解释，一些同学在最初学习的时候不是因为它有多难而造成摸不着头脑，而是因为不知道哪个属性代表哪一块内容，下面我就解释一下：

1.legend指的是：

echarts3.0折线图案例

2.grid指的是下面的红框区域，height用来控制grid的高度：

echarts3.0折线图案例

3.xAxis用来配置x轴相关的配置，如axisTick用来配置是否显示刻度

4.yAxis类似xAxis

5.tooltip指的是下面的东西，可以通过tooltip的选项来配置这里的显示格式：

echarts3.0折线图案例

下面是官网介绍的tooltip，我截图一下：

echarts3.0折线图案例

6.series就用来配置具体要展示哪些图表了，是个数据，可以传入多个对象,上边的例子中areaStyle书写表示是否填充面积，里面的new echarts.graphic.LinearGradient写法是echarts3.0里面的渐变写法，可以实现图形色彩的线性渐变。

有关的css代码，需要注意的是一定要给显示图表的容器一个宽度和高度，不然图表将不能显示，如下面我定义了图表容器高度260px,宽度在html中定义了为panel-body的宽度：

<style>
	.taglist{
		list-style: none;
		float: left;
	}
	.taglist li{
		float: left;
		width:100px;
		margin-left: 5px;
		cursor: pointer;
		position: relative;
	}
	.active{
		color: #447bf3;
	}
	.tip{
		height:3px;
		width:34px;
		display:inline-block;
		background: #447bf3;
		position: absolute;
		top:22px;
		left:0px;
	}
	#querycnt{
		height: 260px;
	}
</style>

echarts3.0折线图案例

相关推荐