数据可视化——折线图

最新推荐文章于 2024-04-16 08:22:48 发布

zcm645500

最新推荐文章于 2024-04-16 08:22:48 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_46028841/article/details/105085997

版权

数据可视化——折线图

在这里插入图片描述
代码

 <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

Date对象.getFullYear();//获取Date对象年份 2020
Date对象.getMonth()+1;//获取Date对象月份 0~11 +1
Date对象.getDate();//获取Date对象天数
Date对象.getDay();//获取Date对象星期
Date对象.getHours();//获取Date对象小时数
Date对象.getMinutes();//获取Date对象分钟数
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 区域缩放

zcm645500

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——折线图

数据可视化——折线图代码 <body> <div id="main" style="width:600px;height:400px;border:1px solid black"> </div> <script src="js/echarts.min.js"></script> <script> /...
复制链接

扫一扫