解决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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
element-ui表格数据转换的示例代码
Aug 24 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
python调用fortran模块
2016/04/08 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
简单了解python的内存管理机制
2019/07/08 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
小学毕业感言300字
2014/02/19 职场文书
年会搞笑主持词
2014/03/27 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
党员个人自我评价
2015/03/03 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
学生病假条范文
2015/08/17 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL