解决vue一个页面中复用同一个echarts组件的问题


Posted in Javascript onJuly 19, 2020

因为页面中要用echarts图表的地方比较多,所以封装了组件,方便复用,如图:

我需要这样一个饼图,并且接下来在很多次地方要用到。

解决vue一个页面中复用同一个echarts组件的问题

直接复制官网的代码,再改改数据,需要用的时候直接拿来用。

但是接下来出现了一个问题:如果我在同一个页面多次使用这个组件,图表将不能正常显示。分析了一下, echarts通过id获取对象

// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

当封装为组件使用的时候,id固定,同一个页面多次出现相同id,所以不能正常显示。

所以想出来以下解决方案:

举个栗子,如果我需要在一个页面中使用该组件两次,

在组件的data中,另外赋一个变量,暂且定为type。在父组件的data中,第一个图标的数据pieData1中添加一个type:1,第二个添加一个type:2

pieData1:{
 type: 1,
 title: '失败次数',
 list:[
  {value:335, name:'502 Bad Gateway'},
  {value:310, name:'404 Not Found'},
  {value:234, name:'无法连接服务器'},
  {value:135, name:'请求超时'},
  {value:1548, name:'Trace LOSS'},
 ],
 pieStyle: {
  width: '400px',
  height: '400px',
  float: 'right'
 }
 },
 
 pieData2:{
 type: 2,
 title: '失败次数',
 list:[
  {value:335, name:'502 Bad Gateway'},
  {value:310, name:'404 Not Found'},
  {value:234, name:'无法连接服务器'},
  {value:135, name:'请求超时'},
  {value:1548, name:'Trace LOSS'},
 ],
 pieStyle: {
  width: '400px',
  height: '400px',
  float: 'right'
 }
 }

接下来改需要在同一个vue页面中用两次的子组件:

html:

<div id="demo1" :style="pieStyle" v-if="pieData.type==1"></div>

<div id="demo2" :style="pieStyle" v-if="pieData.type==2"></div>

js:

var myPie 
 if(this.pieData.type==1){
 myPie = echarts.init(document.getElementById("demo1"));
 }else if(this.pieData.type==2){
 myPie = echarts.init(document.getElementById("demo2"));
 }

好了,问题解决了,效果图如下:

解决vue一个页面中复用同一个echarts组件的问题

如果想到其它方法再补充。

补充知识:vue中,封装的Echart组件被同一个页面多次调用,数据被覆盖问题解决办法。

大概率是echarts init有问题,是不是用class或id选择器选择元素来init了

错误版本:

解决vue一个页面中复用同一个echarts组件的问题

解决vue一个页面中复用同一个echarts组件的问题

正确版本:

解决vue一个页面中复用同一个echarts组件的问题

解决vue一个页面中复用同一个echarts组件的问题

以上这篇解决vue一个页面中复用同一个echarts组件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
JS中作用域以及变量范围分析
Jul 18 #Javascript
JS中的变量作用域(console版)
Jul 18 #Javascript
js里面的变量范围分享
Jul 18 #Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
JavaScript效率调优经验
2009/06/04 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python面试题小结附答案实例代码
2019/04/11 Python
在python中使用nohup命令说明
2020/04/16 Python
python实现在线翻译
2020/06/18 Python
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
QA工程师岗位职责
2013/11/20 职场文书
员工晚婚的请假条
2014/02/08 职场文书
优秀团队获奖感言
2014/02/19 职场文书
历史学专业求职信
2014/06/19 职场文书
药剂专业求职信
2014/06/20 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
Linux中文件的基本属性介绍
2022/06/01 Servers
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL