echarts 简单实用记录（1）

才刚开始实用 echarts ，因为公司项目需要有 日期曲线统计图，故实用 echarts(之前也听说过，当然另外的 d3.js 好像也挺强大的，需要好好学习)

贴上代码：

首先得引入 echarts.js 文件
<div class="container">
  <div class="typeSelect">
	<label id="selectPv" class="active">pv统计</label> | <label id="selectUv">uv统计</label>
  </div>
  <hr>
  <div id="statisticsCharts" style="width:100%;height:500px;"></div>
</div>

<script>
  var xAxis = {
	data: [],
	type: "catagory",
	boundaryGap: false,
	show: true,
	axisLabel: {
	  interval: 0, //0 表示x轴间隔全部显示，auto自动，n 表示自己设置值
	  ratate: 45,//旋转角度
	  textStyle: {
		color: "#222",
	  }
	}
  };//将 xAxis 抽出，可以只修改data，
  var series = [
	{
	  name: "数量",
	  type: "line",//表格类型
	  smooth: true,//平滑
	  data: [],
	}
  ];//series中可以有多个对象，这时charts中就会绘制多个，改变data以改变填充的数据
  
  var charts = echarts.init(document.getElementById("statisticsCharts"));//这里我使用jq语法是不行的，
  charts.showLoading();//显示正在加载的遮罩
  xAxis.data.splice(0,xAxis,data.length);//清空数据，我自己需求需要，这一步可以不需要
  var now = new Date();
  for(var i=30;i>=1;i--){
	xAxis.data.push(addDate(now,-i));//初始化x轴
  }
  var url = globalPath + "/statistics/visit?type=pv";
  $.get(url,function(data){
	charts.hideLoading();
	var obj = JSON.parse(data);//json转对象
	series[0].data = obj.result;
	var chartTitle = "pv统计图";
	var option = {
	  title: {
		text: chartTitle,
	  },
	  tooltip: {},
	  xAxis: xAxis,
	  yAxis: {},
	  series: series,
	};
	charts.setOption(option);//这个动作会开始绘制图
  });
  
  function addDate(date,days){
	var d = new Date(date);
	d.setDate(d.getDate()+days);
	var month = d.getMonth()+1;
	var day = d.getDate();
	if(month < 10){
	  month = "0"+month;
	}
	if(day < 10){
	  day = "0"+day;
	}
	return d.getYear()+""+month+""+day;
  }
</script>
​

如下简单效果截图：