解决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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript 闭包详解
Jul 02 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
一篇不错的Python入门教程
2007/02/08 Python
python time模块用法实例详解
2014/09/11 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Django设置Postgresql的操作
2020/05/14 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
后勤工作职责
2013/12/22 职场文书
爱情保证书大全
2014/04/29 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
工作推荐信模板
2015/03/25 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Python中异常处理用法
2021/11/27 Python