在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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
js数组操作常用方法
May 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
微信小程序实现打卡签到页面
Sep 21 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP 登录记住密码实现思路
2013/05/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Django日志模块logging的配置详解
2017/02/14 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python之字典对象的几种创建方法
2020/09/30 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
开场白怎么写
2015/06/01 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python