110 lines
2.5 KiB
JavaScript
110 lines
2.5 KiB
JavaScript
//初始化echarts图表
|
|
function getData(variable, callback){
|
|
var params = {variable: variable};
|
|
$.get( "/observe/data", params, function( data ) {
|
|
callback(data);
|
|
});
|
|
}
|
|
|
|
function makeChart(legendsList, categoriesList, seriesList){
|
|
var myChart = echarts.init(document.getElementById('observe'));
|
|
|
|
var option = {
|
|
title : { text: '监测数据可视化' },
|
|
tooltip : { trigger: 'axis' },
|
|
legend: { data: legendsList },
|
|
toolbox: {
|
|
show : true,
|
|
feature : {
|
|
mark : {show: true},
|
|
}
|
|
},
|
|
calculable : false,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
data : categoriesList
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLabel : {
|
|
formatter: '{value}'
|
|
}
|
|
}
|
|
],
|
|
series : seriesList
|
|
};
|
|
|
|
myChart.setOption(option, true);
|
|
|
|
return myChart;
|
|
}
|
|
|
|
var series = [];
|
|
var legends = [];
|
|
var currentCategory = [];
|
|
|
|
getData('ta_1_avg', function(data){
|
|
var values = [];
|
|
for(var i in data){
|
|
values.push(data[i][0]);
|
|
currentCategory.push(data[i][1]);
|
|
}
|
|
|
|
var legendTitle = "气温";
|
|
|
|
legends.push(legendTitle);
|
|
|
|
series.push({
|
|
name: legendTitle,
|
|
type: 'line',
|
|
data: values
|
|
});
|
|
|
|
makeChart(legends, currentCategory, series)
|
|
});
|
|
|
|
$('.variable').click(function(){
|
|
var variable = $(this).val();
|
|
var legend = $(this).parent().text();
|
|
if (this.checked === false) {
|
|
for(var i in legends){
|
|
if(legends[i] === legend){
|
|
legends.splice(i, 1)
|
|
}
|
|
}
|
|
|
|
for(var k in series){
|
|
if(series[k].name === legend){
|
|
console.log(series[k].name)
|
|
series.splice(k, 1)
|
|
console.log(series)
|
|
}
|
|
}
|
|
|
|
makeChart(legends, currentCategory, series)
|
|
} else {
|
|
getData(variable, function(data){
|
|
var values = [];
|
|
currentCategory = [];
|
|
for(var i in data){
|
|
values.push(data[i][0]);
|
|
currentCategory.push(data[i][1]);
|
|
}
|
|
|
|
legends.push(legend);
|
|
|
|
series.push({
|
|
name: legend,
|
|
type: 'line',
|
|
data: values
|
|
});
|
|
|
|
makeChart(legends, currentCategory, series)
|
|
})
|
|
}
|
|
});
|