echarts 동적 로딩

var oEnvironmentOption = {};
var oMethaneOption = {};
chartInterval이었습니다.

/ **

• 환경 센서 인포 그래픽

• @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 : '' }, 툴팁 : { trigger : 'axis' } , xAxis : { data : [], axisLine : { lineStyle : {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  color : '# 15b5cd'
  }
  },
  axisLabel : { color : '# ffffff', formatter : function (value, index) { // 월 / 일 형식, 첫 번째 척도로 연도 표시 // var date = new Date (value); // var texts = [(date.getMonth () + 1), date.getDate ()]; // if (index === 0) { // texts.unshift (date.getYear () ); //} // 리턴 texts.join ( '/'); VAR 시간 = value.split ( "") [1] 반환 시간 } } } y 축 { splitLine { 표시 : 사실 을 lineStyle { color : 'rgba (0,0,0,0.2)' } }, axisLine : { lineStyle : {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  color : '# 15b5cd'
  }
  },
  axisLabel : { color : '#ffffff' }, }, 그리드 : { 상단 : '10 % ', 왼쪽 :'0 % ', 오른쪽 :'4 % ', 하단 :'0 % ', containLabel : true }, 도구 상자 : { 표시 : false, 왼쪽 :'center ', 기능 : { dataZoom : { yAxisIndex :'none ' }, 복원 : {}, saveAsImage : {} } }, visualMap : { 표시 : false, 상단 : 10, 오른쪽 : 10, 조각 : [], outOfRange : { color : '# ff4f51' } }, 시리즈 : {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  이름 : '',
  유형 : 'line',
  데이터 : [],
  markLine : { 무음 : true, 데이터 : [] } } } // 设置 阈 值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; 숫자 = -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);

  // 마우스를 차트로 이동하여 재생을 중지합니다.
  document.getElementById ( 'x-sensor-environment'). addEventListener ( 'mouseover', function (e) { if (e.currentTarget.id == 'x-sensor-environment ') { clearInterval (chartInterval); } }) // 계속 재생하려면 차트 밖으로 마우스를 이동합니다. 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 : 이름 = [ 'ch4', 'Methane'] 중단, 사례 2 :
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  이름 = [ 'pm25', 'PM 2.5']
  break;
  사례 3 :
  이름 = [ 'pm10', 'PM 10']
  break;
  사례 4 :
  이름 = [ 'tps', 'TSP']
  break;
  사례 5 :
  이름 = [ '습도', '湿度']
  휴식;
  case 6 :
  name = [ 'noise', '噪音']
  break;
  사례 7 :
  이름 = [ 'atmosphericPressure', '气压']
  break;
  사례 8 :
  이름 = [ 'windSpeed', '风速']
  break;
  case 9 :
  이름 = [ '온도', '温度']
  break;
  }
  반환 이름;
  }