echarts 简单实用记录(1)

本贴最后更新于 2668 天前,其中的信息可能已经斗转星移

才刚开始实用 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>

如下简单效果截图:


相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...