在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 相关文章推荐
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
JavaScript字符串对象
Jan 14 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
精读《Vue3.0 Function API》
May 20 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js转义字符介绍
2013/11/05 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
python实现网站微信登录的示例代码
2019/09/18 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
升职自荐信范文
2013/10/05 职场文书
酒后驾车标语
2014/06/30 职场文书
超市周年庆活动方案
2014/08/16 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
庭外和解协议书
2016/03/23 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
vue 自定义组件添加原生事件
2022/04/21 Vue.js