一、数据动态交互
方法一:定时器
function getChart() {
var request = new XMLHttpRequest();
request.open("get", "http://localhost:3333/get_chart");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
var data = JSON.parse(request.responseText); //注意此时的数据是字符串类型的
option.series[0].data = data.result;
mCharts.setOption(option);
}
};
request.send();
}
setInterval(getChart, 2000);
getChart();
方法二:websocket
// 连接服务器
var ws = new WebSocket('ws://127.0.0.1:8090')
// 连接服务器成功后触发
ws.onopen = function(){
alert('连接成功')
}
// 连接服务器失败后触发
ws.onerror = function(){
alert('连接失败')
}
//接收到消息的回调方法
ws.onmessage = function(res){
console.log(res);
var data = JSON.parse(res.data)
option.series[0].data = data.message
mCharts.setOption(option)
}
二、响应式适配
window.onresize = function() {
mCharts.resize(); //容器的宽高是自适应的 100%
};