vue项目中在同一页面多次引入同一个echarts图表的自适应问题
在父组件页面引入两次该图表子组件显示的效果:
由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦。
先看下完整的图表子组件代码(在父组件就是直接引入,不需要传参哦):
<template>
<div ref="pieDom" style="width: 100%;height: 100%;"></div>
</template> <script>
export default {
data () {
return {
pieEcharts: "",
pieOption: {},
datas: [],
hideColor: '#6f76ac'
}
},
mounted() {
this.datas = [
{
value: 20,
name: "25%"
},
{
value: 80,
name: "75%"
}
]; this.pieEcharts = this.$echarts.init( this.$refs.pieDom );
this.setPieOption();
this.setPieEvents();
},
methods: {
setPieOption(){
this.pieOption = {
color: ['#ff106e', this.hideColor], //环形的分段色值设置
tooltip: {
trigger: 'item',
position: (point, params, dom, rect, size)=> {
return [point[0], point[1]];
},
},
series: [{
type: 'pie',
radius: ['60%', '80%'], //内存 、外层
avoidLabelOverlap: false,
hoverAnimation: true,
hoverOffset: 2,
label: {
normal: {
show: false, //中间的标签
position: 'center',
textStyle: {
fontSize: '18',
fontWeight: 'bold'
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
selectedOffset: 0,
itemStyle: {
emphasis: { },
},
data: this.datas
}]
};
// 渲染图表
this.pieEcharts.setOption( this.pieOption );
},
/**
* 设置图表的事件
*/
setPieEvents(){
/**
* 刷新时默认显示第一条
*/
this.pieEcharts.dispatchAction(
{
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
}
);
/**
* 鼠标移入图表时,不为第一条时就取消第一条的高亮效果
*/
this.pieEcharts.on('mouseover',(v) => {
if(v.dataIndex != 0){
this.pieEcharts.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
});
}
});
/**
* 鼠标图表时默认显示第一条
*/
this.pieEcharts.on('mouseout',(v) => {
this.pieEcharts.dispatchAction(
{
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
}
);
});
// 监听窗口变化 - 只刷新最后一个图表
window.onresize = ()=> {
this.pieEcharts.resize();
} // 监听窗口变化 - 多个图表同时刷新
window.addEventListener('resize', ()=> {
this.pieEcharts.resize();
})
},
}
}
</script> <style scoped> </style>
窗口改变时图表自适应代码在最后,这里分别提出来做说明:
1. 只刷新最后一个图表的情况:(第二种情况的代码记得注释!)
// 监听窗口变化 - 只刷新最后一个图表
window.onresize = ()=> {
this.pieEcharts.resize();
}
可以看到,只有第二个才发生了变化,而且会自动居中和适应大小
2. 多个图表同时刷新的情况:
// 监听窗口变化 - 多个图表同时刷新
window.addEventListener('resize', ()=> {
this.pieEcharts.resize();
})
两个同时变化了哦!
但是为什么两个监听方法会有这样不同的效果呢??? 这个有空的时候再研究。。。知道的朋友可以留言告诉我哦,万分感谢
vue项目中在同一页面多次引入同一个echarts图表的自适应问题的更多相关文章
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue项目中使用百度统计
统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...
- Vue项目中应用TypeScript
一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
随机推荐
- cdnbest获取,删除,增加,修改域名列表,高级设置api示例
<?php $uid = 28; $vhost = 'asdfw'; $token = getToken($uid, $vhost); print_r($token); //获取token fu ...
- WMS接口平台配置培训
供应链管理平台地址:https://twms.ninestargroup.com/ibus/#/processconfig?scShortcutld=3_17__1_303 WMS提供WSWMS固定的 ...
- java各历史版本官网下载
java各历史版本官网下载: http://www.oracle.com/technetwork/java/javase/archive-139210.html
- Idea+maven+testNG+Selenium+ReportNG自动化框架搭建
1.Idea创建一个空的Maven项目 创建后默认项目目录如图所示 2.配置pom.xml文件 <?xml version="1.0" encoding="UTF- ...
- jsp相关笔记(三)
在往数据库的表中写入数据时,一定要与表中的每一项对应,比如表中有三项,则写入的值也应该是三类: String getTitle=request.getParameter("title&quo ...
- 九校联考_24OI——餐馆restaurant
凉心模拟D1T1--最简单的一道题 TAT 餐馆(restaurant) 题目背景 铜企鹅是企鹅餐馆的老板,他正在计划如何使得自己本年度收益增加. 题目描述 共有n 种食材,一份食材i 需要花ti 小 ...
- 20175316盛茂淞 迭代和JDB
迭代和JDB 题目 1 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 2 m,n 要通过命令行传入 3 提交测试运行截图(至少三张:正常如c( ...
- 达里奥:典型的去杠杆化过程是怎么进行的zz
猛人RayDalio的“三部曲”之三:关于去杠杆化的深入理解 作者系统地阐述了去杆杠化过程并深入探讨去杆杠化的运作机理,对我们理解当前全球乃至中国.即将或者已经面临的去杠杆化过程,应当能够带来一些帮助 ...
- sass基础常用指南
一.变量 $global-color:red; .nav{ background:$global-color; } 二.sass命名时横杠和下划线不区分 $global-color:yellow; . ...
- ABP框架系列之四十七:(SignalR-Integration-SignalR-集成)
Introduction Abp.Web.SignalR nuget package makes it easily to use SignalR in ASP.NET Boilerplate bas ...