在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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
简单谈谈json跨域
Mar 13 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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
php注入实例
2006/10/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
MSN消息提示类
2006/09/05 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
使用matplotlib中scatter方法画散点图
2019/03/19 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
C语言基础笔试题
2013/04/27 面试题
公务员的自我鉴定
2013/10/26 职场文书
大学生职业生涯规划范文
2013/12/31 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang