Echarts+基础+实时展示+自适应响应式
2020-03-01 本文已影响0人
五四青年_4e7d
核心技术：
1.掌握基础的用法，坐标轴，颜色，背景，配置；
2.掌握和后端接口的对接;https://www.jianshu.com/p/a7f09cb08ba9这个文章有实例；
3.实时数据的获取更新，目前主要是（定时器，和websocket）两种；
4.自适应的使用：
index.html(首页)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#echarts1, #echarts2{
width:100%;
height:300px;
}
</style>
<script src="https://zycftcenter.gdwlcloud.com:90/jushi/js/jquery-1.11.1.min.js"></script>
<script src="https://zycftcenter.gdwlcloud.com:90/yangxian/screen/js/echarts.common.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div id="echarts1"></div>
<div id="echarts2"></div>
<div id="echarts3"></div>
</body>
</html>
demo.js逻辑：
window.onload =function(){
//初始化实例
var option = {
color:['#409cef'],
title:{
text:''
},
tooltip:{},
legend:{
data:['销量']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
lineStyle:{
color:'#409cef'
},
}
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#409cef'
},
}
},
grid:{ //修改对应的位置
left:'2%',
right:'3%',
bottom:'5%',
top:'5%',
containLabel:true
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
areaStyle: {}
}]
};
let myChart = echarts.init(document.getElementById('echarts1'));
//模拟定时器刷新数据：
var res = [
[120, 932, 601, 934, 1290, 1530, 1320],
[520, 932, 901, 934, 290, 330, 120],
[820, 932, 801, 934, 190, 1330, 320],
[420, 932, 901, 934, 190, 330, 920],
[220, 932, 101, 934, 290, 1330, 120]
]
setInterval(getList, 3000);
function getList(){
var i = parseInt(Math.random()*res.length)
option.series[0].data = res[i]
myChart.setOption(option);
}
getList()
window.onresize = function(){
myChart.resize()
myChart2.resize()
}
//初始化实例
var option2 = {
color:['#409cef'],
title:{
text:''
},
tooltip:{},
legend:{
data:['销量']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
lineStyle:{
color:'#409cef'
},
}
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#409cef'
},
}
},
grid:{ //修改对应的位置
left:'2%',
right:'3%',
bottom:'5%',
top:'5%',
containLabel:true
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
};
let myChart2 = echarts.init(document.getElementById('echarts2'));
myChart2.setOption(option2);
}
效果预览：
pc端：
image.png
移动端：
image.png
