功能说明

上节我们已经把把图表展示出来了，这节我们将说明，如何跟我们开发好的接口连接，展示我们的数据。

第一步 认识ComponentRestApi函数

ComponentRestApi函数是请求远程APi接口数据，

ComponentRestApi(Type,URL,params).then(function (res){}).catch(function(e){})

参数	描述
Type	必需。要调用的函数或要执行的代码串
URL	必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。
params	可选。 APi请求的参数 json对象
res	必需。 接口返回的数据
e	可选。 接口请求异常

例子参考

  ComponentRestApi("Get","http://16.100.1.60:18089/ApiDemo",{}).then(function (res){
    //res包含了接口返回的数据
    //比如我们刚才的接口返回的是
    //   "Code": 0,
    // "Msg": "成功",
    // "ResponseData": {
    // 	"Register0": 0,
    // 	"Register1": 0
    }
    //按照此代码就可以获取到接口返回的数值
    //res.ResponseData.Register0
    //.ResponseData.Register1

      //完整的接口数据信息
	    console.log(res)
  }).catch(function(){

      //这里是API接口异常捕捉
  })

第二步 认识setInterval函数

如果我们想实时获取我们采集到数据，并通过图表展示出来，我们就要用到setInterval函数

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
提示：1000 毫秒= 1 秒。具体参照:https://baike.baidu.com/item/setInterval/2519822?fr=ge_ala

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串
millisec	必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang	可选。 JScript 、 VBScript 、 JavaScript

  //此段代码演示的就是1秒调用一次我们开发好的接口
  setInterval(function(){
  ComponentRestApi("Get","http://16.100.1.60:18089/ApiDemo",{}).then(function (res){
						
    }).catch(function(){

    })
}, 1000);

第三步 使图表动起来

this.echartsView是echarts初始化完成后的变量，用户可以调用echarts官网上的函数

this.echartsView.setOption(option,true);这里就是把echarts的图表选项重新绘制
注意：在定时器中不能使用this去指向，用户需要通过定义全局变量去指向此值

var thatEchartsView = this.echartsView;
thatEchartsView.setOption(option,true);

通过以前章节的积累，那么我们现在开始写接口和echarts结合的代码
完整的代码如下

//定义eharts的选项参数变量
let option = {
   xAxis: {
    type: 'category',
    data: ['Register0', 'Register1']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230],
      type: 'line'
    }
  ]
};
//定义全局的thatChartView变量用于指向echartsView结构
let thatChartView = this.echartsView
//初始化显示
thatChartView.setOption(option,true);

//开始周期性的调用开发的接口，并把接口返回的数据绘制到图表上
setInterval(function(){
  ComponentRestApi("Get","http://16.100.1.60:18089/ApiDemo",{}).then(function (res){
    //获取Register0的值
		console.log(res.ResponseData.Register0)
    //获取Register1的值
    console.log(res.ResponseData.Register1)
    //把Register0和Register1的值赋值给option.series[0].data变量
    option.series[0].data = [res.ResponseData.Register0,res.ResponseData.Register1]
    //重新绘制图表
    thatChartView.setOption(option,true);
}).catch(function(){
    //异常处理
})
}, 1000);

运行效果

Alt text