当前位置 : 主页 > 网络编程 > JavaScript >

ECharts曲线显示

来源:互联网 收集:自由互联 发布时间:2021-06-30
gistfile1.txt var analogChart = echarts.init(document.getElementById('energy-efficiency')); function loadAnalogData() { var url = '%=basePath %views/Singlestation/getUnbalanceData?groupId=' + $("#selectCircuit").val(); $.ajax({ type: "GET",
gistfile1.txt
var analogChart = echarts.init(document.getElementById('energy-efficiency'));
    
    
    function loadAnalogData() {
   		var url = '<%=basePath %>views/Singlestation/getUnbalanceData?groupId=' + $("#selectCircuit").val();
   		$.ajax({
               type: "GET",
               url: url,
               success: function(data){
       			if(data.status == 1000) {
       				analogChart.clear();
       				unbalanceChart.clear();
       				loadAnalogChart(data, "");
       			}
               }
           });
   	} 
   	function getASeries(name,seriesData){
   		return {
            name: name,
            type:'line',
            label: {
            	normal: {
            		show: true
            	}
            },
            data:seriesData
        };
   	}
   	function loadAnalogChart(data, title) {
   		var dataUnits = data.dataUnits;
   		var xAxis = [];
   		var series = [];
   		var legend = [];
   		for(var i = 0; i < dataUnits.length; i++){
   			var dataUnit = dataUnits[i];
   			var seriesData = [];
   			
   			if(dataUnit.value != null){
   				for(var j = 0; j < dataUnit.value.length; j++) {
   					if(i == 1){
   						xAxis.push(dataUnit.value[j].time.replace(' ', '\n'));
   					}
   					seriesData.push(dataUnit.value[j].value);
   				}
   			}
   			
   			if(dataUnit.name.indexOf("相电流")==-1 ) {
   				continue;
   			}
   			
   			series.push(getASeries(dataUnit.name, seriesData));
   			legend.push(dataUnit.name);
   		}
   		
   		if(legend.length == 0) {
   			legend.push("A相电流");
   			legend.push("B相电流");
   			legend.push("C相电流");
   		}
   		if(series.length == 0) {
   			var seriesData = [0];
   			series.push(getASeries("A相电流", seriesData));
   			series.push(getASeries("B相电流", seriesData));
   			series.push(getASeries("C相电流", seriesData));
   		}
   		if(xAxis.length == 0) {
   			xAxis.push(new Date().Format("yyyy-MM-dd HH:mm:ss"));
   		}
   		
   		loadUnbalanceChart(series, xAxis);
   		var chartOption = {
   			    color: ['#F3C200', '#26C281', '#E43A45', '#3398DB'],
   			    title : {
      			        text: "三相电流曲线",  
      			        x:'left'
      			    },
      			    legend: {
      			    	left:'center',
      			    	top:24,
      			    	data: legend
      			    },
   			    tooltip : {
   			        trigger: 'axis',
   			    },
   			    toolbox: {
   			        show: false,
   			        feature: {
   			            dataView: {show: true, readOnly: false},
   			            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
   			            restore: {show: true},
   			            saveAsImage: {show: true}
   			        }
   			    },
   			    grid: {
   			    	top: '18%',
   			        left: '3%',
   			        right: '4%',
   			        bottom: '3%',
   			        containLabel: true
   			    },
   			    xAxis : [
   			        {
   			            type : 'category',
   			            data : xAxis,
   			            axisTick: {
   			                alignWithLabel: true
   			            }
   			        }
   			    ],
   			    yAxis : [
   			        {
   			            type : 'value'
   			        }
   			    ],
   			    series : series
   			};
   		analogChart.setOption(chartOption);
   		analogChart.resize();
   		analogChart.hideLoading();
}
网友评论