二、利用JS实现图形升降序
ascending(){
console.log(this.radio)
let y=parseInt(this.nongchan.year)
let m=parseInt(this.nongchan.month)
let asclist={
year:y,
month:m
}
this.$axios.post('/cityclimate/avg_rain_asc',asclist,
).then(res =>{
console.log("__________")
console.log("打印升序")
console.log(res.data)
this.ascendingList=res.data
const myChart1 = this.$echarts.init(document.getElementById('main2'));
let option = myChart1.getOption();
let xAxis = option.xAxis;
let series = option.series;
let d=[];
series.splice(0, series.length)
xAxis[0].data.splice(0, xAxis[0].data.length)
for(let i=0;i<this.ascendingList.length;i++){
console.log(this.ascendingList[i].city)
xAxis[0].data.push(this.ascendingList[i].city)
d.push(this.ascendingList[i].rain)
}
series.push({
data: d,
type: 'line',
smooth: true,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
})
//series更新
myChart1.clear()
myChart1.setOption(option)
})
},
descending(){
console.log(this.radio)
let y=parseInt(this.nongchan.year)
let m=parseInt(this.nongchan.month)
let asclist={
year:y,
month:m
}
this.$axios.post('/cityclimate/avg_rain_desc',asclist,
).then(res =>{
console.log("__________")
console.log("打印升序")
console.log(res.data)
this.descendingList=res.data
const myChart1 = this.$echarts.init(document.getElementById('main2'));
let option = myChart1.getOption();
let xAxis = option.xAxis;
let series = option.series;
let d=[];
series.splice(0, series.length)
xAxis[0].data.splice(0, xAxis[0].data.length)
for(let i=0;i<this.descendingList.length;i++){
console.log(this.descendingList[i].city)
xAxis[0].data.push(this.descendingList[i].city)
d.push(this.descendingList[i].rain)
}
series.push({
data: d,
type: 'line',
smooth: true,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
})
//series更新
myChart1.clear()
myChart1.setOption(option)
})