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 ...
随机推荐
- 加入 Jungle Testnet
[加入 Jungle Testnet] 主网测试需要消耗大量 EOS,JungleTestnet为我们提供了一个测试用的EOS主链,上面的EOS可以通过申请获得.每6小时可以申请100EOS. [创建 ...
- django 环境配置.
1. 一个虚拟环境对应一个 dajngo项目 2. mkvirtruenv pycham 创建Pure Python 新项目,不是Django 2018.3 其他版本 3. Add Configur ...
- linux环境下tomcat安装
1.安装tomcat前安装jdk(前提下) 2.下载安装包apache-tomcat-8.0.36.tar.gz 解压:tar -zxvf apache-tomcat-8.0.36.tar.gz ...
- 分布式01-Dubbo基础背景
分布式01-Dubbo基础 1-分布式基础理论 分布式系统是由一组通过网络进行通信.为了完成共同的任务而协调工作的计算机节点组成的系统.分布式系统的出现是为了用廉价的.普通的机器完成单个计算机无法完成 ...
- [leetcode]62. Unique Paths 不同路径
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- 使用jmail发送短信
原文链接 https://blog.csdn.net/sdaujsj1/article/details/79248469 pom <!-- https://mvnrepository.com/a ...
- 微擎开发------day04
(1) cache_write($key,$data) 按照指定键名缓存数据 cache_write('test', $data) (2) cache_load($key) 读取指定键名的缓存数据 ...
- js data日期初始化的5种方法
var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh:mm:ss"); ...
- Git 在团队中的使用--如何正确使用Git Flow
Git的优点 Git的优点很多,但是这里只列出我认为非常突出的几点. 由于是分布式,所有本地库包含了远程库的所有内容. 优秀的分支模型,打分支以及合并分支,机器方便. 快速,在这个时间就是金钱的时代, ...
- 转载:C# 将引用的DLL文件放到指定的目录下
当软件引用的DLL比较多的时候,全部的DLL都放在exe同目录下,显得比较乱,如果能把dll放到响应的文件夹下面,就方便很多 下面是解决该问题的一种方法: 右键点击项目:属性->设置,项目会生成 ...