在vue中实现清除echarts上次保留的数据(亲测有效)


Posted in Javascript onSeptember 09, 2020

因为我是将echarts封装好后,父组件只要传递值就可以进行渲染。

但是点击多次数据请求的时候echarts会多次渲染。如果试过

clear() 与setOption(this.options, true)没用之后。可以试一下下面的方法。

首先是在父组件中对数据进行请求,在赋值之前,先清空。

data里定义的三组echarts数据

在vue中实现清除echarts上次保留的数据(亲测有效)

在axios发送请求后

先清空再赋值。

在vue中实现清除echarts上次保留的数据(亲测有效)

补充知识:vue.js使用vue-echarts给柱形图绑定点击事件

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div class="echarts">
 <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"></IEcharts>
 <button @click="doRandom">Random</button>
 </div>
</template>
 
<script type="text/babel">
 import IEcharts from 'vue-echarts-v3/src/full.js';
 export default {
 name: 'view',
 components: {
  IEcharts
 },
 props: {
 },
 data: () => ({
  loading: true,
  bar: {
  title: {
   text: 'ECharts Hello World'
  },
  tooltip: {},
  xAxis: {
   data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']
  },
  yAxis: {},
  series: [{
   name: 'Sales',
   type: 'bar',
   data: [5, 20, 36, 10, 10, 20]
  }]
  }
 }),
 methods: {
  doRandom() {
  const that = this;
  let data = [];
  for (let i = 0, min = 5, max = 99; i < 6; i++) {
   data.push(Math.floor(Math.random() * (max + 1 - min) + min));
  }
  that.loading = !that.loading;
  that.bar.series[0].data = data;
  },
  onReady(instance) {
  console.log(instance);
  },
  onClick(event, instance, echarts) {
  console.log(arguments);
  }
 }
 };
</script>
 
<style scoped>
 .echarts {
 width: 400px;
 height: 400px;
 }
</style>

以上这篇在vue中实现清除echarts上次保留的数据(亲测有效)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取xml
Nov 04 Javascript
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
详解vue中移动端自适应方案
May 05 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
You might like
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python实现购物车购物小程序
2018/04/18 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python通过len函数返回对象长度
2020/10/22 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
安全资金保障制度
2014/01/23 职场文书
读书之星事迹材料
2014/05/12 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
投标单位介绍信
2015/05/05 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
意外事故赔偿协议书
2016/03/22 职场文书