從後臺簡單的獲取數據
後臺的代碼
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>
實行結果
每隔一段時間，數據會隨機動態變化一下
