从后台简单的获取数据
后台的代码
const express = require("express");
const server = express();
server.listen(8200);
server.use('/getData',(req,res)=>{
// res.send();
// res.send([Math.random()*9000,Math.random()*9000,Math.random()*9000])
res.setHeader("Access-Control-Allow-Origin","*");
res.send([Math.random()*30
,Math.random()*20
,Math.random()*30
,Math.random()*40
,Math.random()*50
,Math.random()*10]);
// console.log('get');
});
server.use(express.static('./'));
这个 需要 下载 一下 express 包
前端动态获取的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="echarts.min.js"></script>
<style>
div{
border: 1px solid black;
margin: 50px auto;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// let $ = document.querySelector.bind(document);
//1.获取容器
// let oBox = $('.box');//document.querySelector('.box');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
subtext:'2018年度(单位:元)',
x:'center',
textStyle:{
fontSize:'20',
color:'black'
}
},
// tooltip: {},
legend: {
data:['AAA','BBB','CCC'],
right:0,
top:'50%',
orient:'vertical'
},
xAxis: {
type:'category',
data: ['1月','2月','3月','4月','5月','6月']
},
yAxis: {
type:'value'
},
series: [{
name: 'AAA',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: 'BBB',
type: 'bar',
data: [15, 4, 21, 65, 32, 78]
},{
name: 'CCC',
type: 'bar',
data: [50, 12, 76, 12, 65, 3]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 向后app.js发送请求
setInterval(()=>{
for(let index = 0;index<3;index++){
let xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:8200/getData',true);
xhr.send();
xhr.onload = function(){
let arr = eval('('+ xhr.responseText +')');
// console.log(arr);
// option.series[0].data = arr;
// myChart.setOption(option);
option.series[index].data = arr;
};
}
myChart.setOption(option);
},2000);
</script>
</body>
</html>
实行结果
每隔一段时间,数据会随机动态变化一下