在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实现下拉菜单效果的代码
Jul 25 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
canvas实现图像截取功能
Feb 06 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
javascript实现弹幕墙效果
Nov 28 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
劣质的PHP代码简化
2010/02/08 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php中static和const关键字用法分析
2016/12/07 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
详解javascript void(0)
2020/07/13 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014年食堂工作总结
2014/11/20 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
合同纠纷调解书
2015/05/20 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Python中如何处理常见报错
2022/01/18 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技