echarts dynamic loading

var oEnvironmentOption = {};
var oMethaneOption = {};
was chartInterval;

/**

• Environmental Sensor Infographic

• @param {id:'device ID',type:'device type',etype:'environment type',datas:'sensor information',thresholds:'threshold list'} params
  */
  function environmentChart(params,refreshtime) { var myChart = echarts.init(document.getElementById('x-sensor-environment')); var oEnvironment = {} oEnvironment.id = params.id; oEnvironment.type = params.type; oEnvironment.etype = params.etype; oEnvironment .datas = params.datas; oEnvironment.aThresholds = params.thresholds || []; oEnvironmentOption = { title: { text:'' }, tooltip: { trigger:'axis' }, xAxis: { data: [], axisLine : { lineStyle: {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  color:'#15b5cd'
  }
  },
  axisLabel: { color:'#ffffff', formatter: function (value, index) { // Format as month/day, only display the year on the first scale // var date = new Date(value); // var texts = [(date.getMonth() + 1), date.getDate()]; // if (index === 0) { // texts.unshift(date.getYear() ); //} // return texts.join('/'); var time = value.split(" ")[1]; return time } } }, yAxis: { splitLine: { show: true, lineStyle: { color:'rgba(0,0,0,0.2)' } }, axisLine: { lineStyle: {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  color: ‘#15b5cd’
  }
  },
  axisLabel: {
  color: ‘#ffffff’
  },
  },
  grid: {
  top: ‘10%’,
  left: ‘0%’,
  right: ‘4%’,
  bottom: ‘0%’,
  containLabel: true
  },
  toolbox: {
  show: false,
  left: ‘center’,
  feature: {
  dataZoom: {
  yAxisIndex: ‘none’
  },
  restore: {},
  saveAsImage: {}
  }
  },
  visualMap: {
  show: false,
  top: 10,
  right: 10,
  pieces: [],
  outOfRange: {
  color: ‘#ff4f51’
  }
  },
  series: {
  name: ‘’,
  type: ‘line’,
  data: [],
  markLine: {
  silent: true,
  data: []
  }
  }
  }
  // 设置阈值
  var marklineData = [], piecesData = [];
  for (var i = 0; i < oEnvironment.aThresholds.length; i++) {
  var oThreshold = oEnvironment.aThresholds[i];
  if (oEnvironment.etype == oThreshold.type) {
  // oEnvironmentOption.yAxis.min = 0;
  // oEnvironmentOption.yAxis.max = oThreshold.excessValue + 50;
  piecesData.push({ ‘gt’: 0, ‘lte’: oThreshold.alertValue, ‘color’: ‘#3ef6ff’ }, { ‘gt’: oThreshold.alertValue, ‘lte’: oThreshold.excessValue, ‘color’: ‘#fff100’ })
  marklineData.push({ ‘yAxis’: oThreshold.alertValue }, { ‘yAxis’: oThreshold.excessValue });
  break
  }
  }
  oEnvironmentOption.series.markLine.data = marklineData
  oEnvironmentOption.visualMap.pieces = piecesData
  // 设置系列
  var seriesData = [], xAxisData = [];
  var typename = getEnvironmentName(oEnvironment.etype);
  var typenamezh = typename[1];
  var typenameen = typename[0];
  for (var i = 0; i < oEnvironment.datas.length; i++) {
  var oData = oEnvironment.datas[i];
  xAxisData.push(oData.createDate);
  seriesData.push(oData[typenameen]);
  }
  var endLen = seriesData.length/2;
  oEnvironmentOption.series.name = typenamezh;
  oEnvironmentOption.xAxis.data = xAxisData.splice (0, endLen);
  oEnvironmentOption.series.data = seriesData.splice (0, endLen);
  // oEnvironmentOption.xAxis.data = xAxisData;
  // oEnvironmentOption.series.data = seriesData;
  myChart.setOption (oEnvironmentOption);

  // 隔1秒增减数值
  var totalNum = xAxisData.length;
  var num = 0;
  var newDatas = [];
  function loopplay(){
  num++;
  if (num == totalNum) {
  refreshRenderChart(oEnvironment.id,oEnvironment.type,function(datas){
  newDatas = datas
  if(newDatas.length > 0) {
  for (var i = 0; i < newDatas.length; i++) {
  var newData = newDatas[i];
  xAxisData.push(newData.createDate);
  seriesData.push(newData[typenameen]);
  }
  totalNum = xAxisData.length;
  num = 0;
  }
  });
  }
  if (num > totalNum) {
  totalNum = xAxisData.length;
  num = -1;
  clearInterval(chartInterval);
  // chartInterval = null;
  setTimeout(function(){
  chartInterval = setInterval(loopplay, 1100);
  },refreshtime)
  // return
  }
  if(totalNum > 1){
  var sdata = oEnvironmentOption.series.data;
  var val = seriesData.splice(0, 1).toString();
  sdata.shift()
  sdata.push(val);

       var date = xAxisData.splice(0, 1).toString();
       oEnvironmentOption.xAxis.data.shift();
       oEnvironmentOption.xAxis.data.push(date);
       myChart.setOption(oEnvironmentOption);
       // console.log(new Date())
   }
  

  }
  clearInterval(chartInterval);
  chartInterval = setInterval(loopplay, 1100);

  // Move the mouse to the chart to stop playing
  document.getElementById('x-sensor-environment').addEventListener('mouseover',function(e){ if(e.currentTarget.id =='x-sensor-environment'){ clearInterval(chartInterval); } }) // Move the mouse out of the chart to continue playing document.getElementById('x-sensor-environment').addEventListener('mouseleave',function(e){ if(e.currentTarget.id =='x -sensor-environment'){ clearInterval(chartInterval); chartInterval = setInterval(loopplay, 1100); } }) } function getEnvironmentName(type) { var name = [] switch (type) { case 1: name = ['ch4' ,'Methane'] break; case 2:
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  name = [‘pm25’, ‘PM 2.5’]
  break;
  case 3:
  name = [‘pm10’, ‘PM 10’]
  break;
  case 4:
  name = [‘tps’, ‘TSP’]
  break;
  case 5:
  name = [‘humidity’, ‘湿度’]
  break;
  case 6:
  name = [‘noise’, ‘噪音’]
  break;
  case 7:
  name = [‘atmosphericPressure’, ‘气压’]
  break;
  case 8:
  name = [‘windSpeed’, ‘风速’]
  break;
  case 9:
  name = [‘temperature’, ‘温度’]
  break;
  }
  return name;
  }