数据可视化——折线图
代码
<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 区域缩放