當我們初始化完數據后，需要更新數據時，雖然請求成功，獲取到新的數據。但是echarts的圖表沒有根據數據更新而更新，原因是數據更新了，但echarts還是初始化時的那個。

我們可以在請求成功后，重新初始化echarts。這樣圖表就能根據數據進行變化了。

<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的數字"></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 () {this.firstleft()},methods: {//餅狀圖firstleft (type=0,number=100) {//獲取數據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)})// 基于準備好的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) {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('輸入的是非數字！！')}},},}} </script>

思路：

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。