echarts动态加载

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

/**

• 环境传感器信息图表

• @param {id:‘设备ID’,type:‘设备类型’,etype:‘环境类型’,datas:‘传感器信息’,thresholds:‘阈值列表’} 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) {
  // 格式化成月/日，只在第一个刻度显示年份
  // 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);

  // 鼠标移至图表停止播放
  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:
  name = [‘ch4’, ‘甲烷’]
  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;
  }