当我们初始化完数据后，需要更新数据时，虽然请求成功，获取到新的数据。但是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是，动态获取数据，动态更新图表数据。的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。