解决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 相关文章推荐
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
JavaScript判断对象和数组的两种方法
May 31 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
浅谈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中jsonp的跨域实例
2013/06/21 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python调用百度语音REST API
2018/08/30 Python
python调用外部程序的实操步骤
2019/03/04 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
党员干部承诺书
2014/03/25 职场文书
中秋节主持词
2014/04/02 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
小王子读书笔记
2015/06/29 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB