當(dāng)我們初始化完數(shù)據(jù)后，需要更新數(shù)據(jù)時(shí)，雖然請(qǐng)求成功，獲取到新的數(shù)據(jù)。但是echarts的圖表沒有根據(jù)數(shù)據(jù)更新而更新，原因是數(shù)據(jù)更新了，但echarts還是初始化時(shí)的那個(gè)。

我們可以在請(qǐng)求成功后，重新初始化echarts。這樣圖表就能根據(jù)數(shù)據(jù)進(jìn)行變化了。

<div id="first-line-left" style="height: 220px;width: 500px"></div><div class="first-left-input"><el-input v-model.number="pie_count" placeholder="輸入50-300的數(shù)字"></el-input></div><el-button type="warning" @click="pie_submit(0,pie_count)">提交</el-button>

效果圖是這個(gè)。

我設(shè)計(jì)的功能是：

1、進(jìn)來時(shí)，就有默認(rèn)的數(shù)據(jù)展示出來。

2、在input框中輸入數(shù)字，提交到后端，獲取到特定數(shù)據(jù)條數(shù)，更新圖表。

函數(shù)設(shè)置

export default {name: 'LogAnalyse',data () {return {pie_count: '',//綁定輸入框pie_data: [], //后端數(shù)據(jù)可以保存到這里}},mounted () {this.firstleft()},methods: {//餅狀圖firstleft (type=0,number=100) {//獲取數(shù)據(jù)let pie_data = this.get_pie_data(type,number)pie_data.then(res => {this.pie_data = res.data.datathis.pie_leng = res.data.lenthlet myChart = echarts.init(document.getElementById('first-line-left'))// 繪制圖表var option = {title: { text: '告警類型占比' },series: [{type: 'pie',data: this.pie_data}]}myChart.setOption(option)})// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例},//請(qǐng)求函數(shù)，這里使用同步請(qǐng)求，才能將后端返回的數(shù)據(jù)給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)})})},//點(diǎn)擊提交的時(shí)候，觸發(fā)這個(gè)函數(shù)pie_submit (pie = 0, number = 100) {console.log(this.pie_count, 123)if (Number.isInteger(number)) {if (number <= 300 && number >= 10) {this.firstleft(pie,number)} else {this.$message.error('范圍需要在50-300之間')}} else {this.$message.error('輸入的是非數(shù)字！！')}},},}} </script>

思路：

?

總結(jié)

以上是生活随笔為你收集整理的vue使用echarts是，动态获取数据，动态更新图表数据。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。