当我们初始化完数据后，需要更新数据时，虽然请求成功，获取到新的数据。但是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是，动态获取数据，动态更新图表数据。相关推荐

MySQL删除退出后数据未更新,mysql一不小心删除了数据或更新了数据没有加where 条件...
mysql一不小心删除了数据或更新了数据没有加where 条件 1,show variables like '%log_bin%'; 2.show master logs; 3.show master ...
vue 动态设置 echarts 画布大小更新图表数据
在筛选条件修改后,echarts的图表需要动态修改图表. 动态修改echarts 画布大小监听width,height的改变,在更新图表时,使用resize()方法更新图表画布的大小 const c ...
html前台数据自动更新,网页数据如何实现实时刷新？
本文仅为学技术而简单举例,后端框架是Django,具体业务逻辑是否合理可以不用管,下方是工作中需要实现的需求自动化程序脚本运行的三种任务状态: 1.未执行 2.执行成功 3.执行失败任务状态在 ...
Qt工作笔记-以配置文件的方式动态获取Mysql数据库中的数据
场景修改配置文件,获取表头,再遍历数据库! 实时监控文件,一旦修改马上重新遍历数据库! 程序运行截图如下: 静态运行图如下: 技术原理及源码使用QFileSystemWatcher对文件进行监控 ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...
echarts——实现地图——获取全国+各省市的数据js——基础积累
前几天写了一篇关于 echarts实现地图的博文,关于全国+各省市的数据js的获取,下面做一下记录. 1.阿里云获取地图数据的网址阿里云获取全国+各省市数据js的链接:http://datav.al ...
mysql更新数据_MySQL更新表数据
更新数据是使用数据库时最重要的任务之一. 在本教程中,您将学习如何使用MySQL UPDATE语句来更新表中的数据. 1. MySQL UPDATE语句简介我们使用UPDATE语句来更新表中的现有数 ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
ngx-echarts 图表数据动态更新
使用echarts绘制图表时,初次赋值数据正常展示,重新获取数据之后,图表没有跟着动态刷新.解决的办法是: html文件 <div echarts [options]="chartOp ...

vue使用echarts是，动态获取数据，动态更新图表数据。

函数设置

vue使用echarts是，动态获取数据，动态更新图表数据。相关推荐

最新文章

热门文章