添加显示多个指标的统计
This commit is contained in:
chen
parent
9d84e546ef
commit
4a22d682c7
19
src/App.vue
19
src/App.vue
|
|
@ -12,6 +12,25 @@ export default {
|
|||
IndexPage
|
||||
}
|
||||
}
|
||||
const debounce = (fn, delay) => {
|
||||
let timer
|
||||
return (...args) => {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
fn(...args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
const _ResizeObserver = window.ResizeObserver;
|
||||
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
|
||||
constructor(callback) {
|
||||
callback = debounce(callback, 200);
|
||||
super(callback);
|
||||
}
|
||||
}
|
||||
const siderBarWidth = ref("200px");
|
||||
const toggleMenu = ()=>{
|
||||
if(siderBarWidth.value == "200px")
|
||||
|
|
|
|||
|
|
@ -309,93 +309,76 @@ for (let i = 0; i < years.length; i++) {
|
|||
}
|
||||
return counts;
|
||||
},
|
||||
// generateOptions(counts)
|
||||
// {
|
||||
// option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross'
|
||||
// }
|
||||
// },
|
||||
// grid: {
|
||||
// right: '20%'
|
||||
// },
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['Evaporation', 'Precipitation', 'Temperature']
|
||||
// },
|
||||
// xAxis: [
|
||||
// {
|
||||
// type: 'category',
|
||||
// axisTick: {
|
||||
// alignWithLabel: true
|
||||
// },
|
||||
// // prettier-ignore
|
||||
// data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
// }
|
||||
// ],
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: 'Evaporation',
|
||||
// position: 'right',
|
||||
// alignTicks: true,
|
||||
// axisLabel: {
|
||||
// formatter: '{value} ml'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: 'Precipitation',
|
||||
// position: 'right',
|
||||
// alignTicks: true,
|
||||
// offset: 80,
|
||||
// axisLabel: {
|
||||
// formatter: '{value} ml'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: '温度',
|
||||
// position: 'left',
|
||||
// alignTicks: true,
|
||||
// axisLabel: {
|
||||
// formatter: '{value} °C'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// name: 'Evaporation',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: 'Precipitation',
|
||||
// type: 'bar',
|
||||
// yAxisIndex: 1,
|
||||
// data: [
|
||||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: 'Temperature',
|
||||
// type: 'line',
|
||||
// yAxisIndex: 2,
|
||||
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
// },
|
||||
generateyAxis(counts)
|
||||
{
|
||||
let yAxis = [];
|
||||
|
||||
// Generate Evaporation and Precipitation yAxis
|
||||
for (let i = 0; i < counts.length; i++) {
|
||||
yAxis.push({
|
||||
type: 'value',
|
||||
name: this.srow2[i],
|
||||
position: 'right',
|
||||
offset:i*40,
|
||||
alignTicks: true,
|
||||
});
|
||||
}
|
||||
return yAxis;
|
||||
},
|
||||
generateSeries2(counts)
|
||||
{
|
||||
let Series= [];
|
||||
|
||||
// Generate Evaporation and Precipitation yAxis
|
||||
for (let i = 0; i < counts.length; i++) {
|
||||
Series.push({
|
||||
|
||||
name: this.srow2[i],
|
||||
type: this.stype,
|
||||
data: Object.values(counts[i]),
|
||||
},
|
||||
);
|
||||
|
||||
return Series;
|
||||
}
|
||||
},
|
||||
generateOptions(counts)
|
||||
{
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '20%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: this.srow2
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// prettier-ignore
|
||||
data: Object.keys(counts[0])
|
||||
}
|
||||
],
|
||||
yAxis: this.generateyAxis(counts),
|
||||
series: this.generateSeries2(counts),
|
||||
};return option;
|
||||
},
|
||||
handlerow()
|
||||
{
|
||||
this.srow='';
|
||||
|
|
@ -721,6 +704,11 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
grid: [{ bottom: '55%' }, { top: '55%' }],
|
||||
series: this.generateSeries(counts)
|
||||
};
|
||||
}
|
||||
if (this.selectedEntity=='entity4')
|
||||
{
|
||||
option=this.generateOptions(counts);
|
||||
console.log(option)
|
||||
}
|
||||
this.chartInstance.setOption(option);
|
||||
}catch(error)
|
||||
|
|
@ -834,14 +822,8 @@ currentDate.setDate(currentDate.getDate()+1);
|
|||
const counts=this.countDataByInterval();
|
||||
setTimeout(()=>this.drawChart(counts),500);
|
||||
}else if(this.selectedEntity=='entity4'){
|
||||
this.do_entity4();
|
||||
if (this.srow2!='entity'){
|
||||
const counts=this.countsumbystring();
|
||||
let counts=this.do_entity4();
|
||||
setTimeout(()=>this.drawChart(counts),500);
|
||||
} else {
|
||||
const counts=this.countStrings();
|
||||
setTimeout(()=>this.drawChart(counts),500);
|
||||
}
|
||||
}
|
||||
else if (this.selectedEntity=='entity5'){
|
||||
const counts=this.count_sum_time();
|
||||
|
|
|
|||
Loading…
Reference in New Issue