当我们初始化完数据后，需要更新数据时，虽然请求成功，获取到新的数据。但是echarts的图表没有根据数据更新而更新，原因是数据更新了，但echarts还是初始化时的那个。
我们可以在请求成功后，重新初始化echarts。这样图表就能根据数据进行变化了。
<div style="height: 220px;width: 500px">
</div>
<div class="first-left-input">
<el-input ="pie_count" placeholder="输入50-300的数字"></el-input>
</div>
<el-button type="warning" @click="pie_submit(0,pie_count)">提交</el-button>
效果图是这个。
我设计的功能是：
1、进来时，就有默认的数据展示出来。
2、在input框中输入数字，提交到后端，获取到特定数据条数，更新图表。
函数设置
export default {
name: 'LogAnalyse',
data () {
return {
pie_count: '',//绑定输入框
pie_data: [], //后端数据可以保存到这里
}
},
mounted () {
()
},
methods: {
//饼状图
firstleft (type=0,number=100) {
//获取数据
let pie_data = this.get_pie_data(type,number)
pie_data.then(res => {
this.pie_data =
this.pie_leng =
let myChart = (('first-line-left'))
// 绘制图表
var option = {
title: { text: '告警类型占比' },
series: [
{
type: 'pie',
data: this.pie_data
}
]
}
(option)
})
// 基于准备好的dom，初始化echarts实例
},
//请求函数，这里使用同步请求，才能将后端返回的数据给echarts使用
get_pie_data (pie = 0, number = 100) {
return new Promise((resolve, reject) => {
axios({
url: this.$settings.base_url + `/user/logdata/?number=${number}&type=${pie}`,
method: 'post'
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
//点击提交的时候，触发这个函数
pie_submit (pie = 0, number = 100) {
(this.pie_count, 123)
if ((number)) {
if (number <= 300 && number >= 10) {
(pie,number)
} else {
this.$('范围需要在50-300之间')
}
} else {
this.$('输入的是非数字！！')
}
},
},
}
}
</script>思路：
