数据可视化——折线图

数据可视化——折线图

数据可视化——折线图_第1张图片
代码

 <body>
  <div id="main" style="width:600px;height:400px;border:1px solid black">

  </div>
  <script src="js/echarts.min.js"></script>
  <script>
  //获取长数据
  //时间在计算机中存储毫秒数,计算机元年1970/1/1 0:0:0
  var now=new Date()//获取现在的时间
  var dataX=[];//x轴显示的日期
  var datanum=[];//签到人数
  var dataV=[];//到课率
  for(var i=0;i<30;i++){
	var year=now.getFullYear();
	var month=now.getMonth()+1;//获取月份数 0~11
	var date=now.getDate();
	  dataX.push(year+"/"+month+"/"+date);//将元素放入数组
	  datanum.push(parseInt(Math.random()*100+300));//0~1获取300~400的随机数
	  dataV.push(datanum[i]/400);//到课率
	  now=new Date(now-24*60*60*1000);//当前时间减去1天


  }

  //初始化echarts实例
  var myChart=echarts.init(document.getElementById("main"))
  //设置图表内容 option里面json格式 名字:值
  var option={
  title:{
  text:"上课数据反馈",
  x:"center",
  y:"bottom"
  },
  tooltip:{show:true,
           trigger:"axis",//触发器,item数据触发,axis坐标系触发 
		   //formatter:"{b}\n{a0}:{c0}人\n{a1}\n{c1}" 
		   formatter:function(parames){
		   return (parames[0].name+parames[0].seriesName+":"+parames[0].value+parames[1].seriesName+":"+parames[1].value*100+"%");
		   }
  },
  legend:[{
    name:"签到人数",
	icon:"circle"
  }],
  xAxis:{
  type:"category",
  data:dataX
  },
  yAxis:[{name:"签到人数",type:"value",min:200,max:400},
         {name:"到课率",type:"value",min:0,max:1}],
  dataZoom:[
  { type:"inside", start:0, end:10 },
  { type:"slider", start:0,end:10},
  {type:"slider",yAxisIndex:[0]}],
  series:[{
    name:"签到人数",
    type:"line",
    data:datanum,
	itemStyle:{
	color:"#2222cc"
	}
  },
	{
	   name:"到课率",
      type:"line",
	  yAxisIndex:[1],
      data:dataV
	 }
  ]
  };
  //把图表放入实例中
  myChart.setOption(option);
  </script>
 </body>

笔记

Date对象:JavaScript中对象应用
new Date();创建一个时间对象
1.当()没有值时,返回当前时间;
2.当()有值时,返回根据 值 显示的时间;
常用API方法:
2019 12 3

  1. Date对象.getFullYear();//获取Date对象 年份 2020
  2. Date对象.getMonth()+1;//获取Date对象 月份 0~11 +1
  3. Date对象.getDate();//获取Date对象 天数
  4. Date对象.getDay();//获取Date对象 星期
  5. Date对象.getHours();//获取Date对象 小时数
  6. Date对象.getMinutes();//获取Date对象 分钟数
  7. Date对象.getSeconds();//获取Date对象 秒数
    1.echarts使用的固定5个步骤
    2.option内容怎么写?
    1.三个要素:配置组件,图表类型,数据
    配置组件
    1.title 标题
    2.series 图表 bar柱状图 line折线图
    3.坐标系 XAxis YAxis
    4.legend 图例 对数据的说明
    5.tooltip 提示框 鼠标hover效果显示提示
    6.dataZoom 区域缩放

你可能感兴趣的:(数据可视化——折线图)