关于vue 结合原生js 解决echarts resize问题

解决页面echarts 图表 resize问题

左侧的菜单栏模块是可以收缩的,点击左上角的 icon 可以收缩,但是点击左上角的icon后,右侧的echarts图并未进行对应的收缩,使用 element-resize-detector 插件能够解决问题(如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题)但是会有点卡顿,所以采用原生的方法来处理,再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化,可以不使用插件来处理问题了。

<template>
 <div
 id="leftEchartPie"
 ref="leftEchartPie"
 ></div>
</template>

<script>
export default {
 props: {
 leftPieData: {
  type: Object,
  default: {}
 }
 },
 data() {
 return {
  myChart: null,
  option: null,
  observe: null,
  optionData: []
 };
 },
 watch: {
 leftPieData: {
  deep: true,
  handler(leftPieData) {
  if (leftPieData) {
   this.initChart(leftPieData);
  }
  }
 }
 },
 mounted() {
 const option = {
  title: {
  zlevel: 0,
  text: null,
  rich: {
   value: {
   color: "#3F495A",
   fontSize: 14,
   lineHeight: 16
   },
   name: {
   color: "#3F495A",
   fontSize: 14,
   lineHeight: 16
   }
  },
  top: "center",
  left: "19.3%",
  textAlign: "center",
  textStyle: {
   rich: {
   value: {
    color: "#3F495A",
    fontSize: 14,
    lineHeight: 16
   },
   name: {
    fontSize: 16,
    color: "#3F495A",
    lineHeight: 30
   }
   }
  }
  },
  tooltip: {
  show: true,
  trigger: "item",
  formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {},
  series: [
  {
   name: "Security Status",
   type: "pie",
   center: ["20%", "50%"],
   radius: ["80%", "45%"],
   itemStyle: {
   borderWidth: 6,
   borderColor: "#fff"
   },
   hoverAnimation: false,
   avoidLabelOverlap: false,
   label: {
   show: false,
   position: "center"
   },
   emphasis: {
   label: {
    show: false,
    fontSize: "30",
    fontWeight: "bold"
   }
   },
   labelLine: {
   show: false
   },
   data: []
  }
  ]
 };
 this.option = option;
 var dom = document.getElementById("leftEchartPie");
 var myChart = this.echarts.init(dom);
 this.myChart = myChart;

	// 使用浏览器原生的MutationObserver来处理
 const observer = new MutationObserver(() => {
  setTimeout(this.myChart.resize, 201);
 });
 const config = { attributes: true, childList: true, subtree: false };
 this.observe = observer;
 observer.observe(document.getElementsByClassName("spoc-menu")[0], config);
 	// 处理浏览器窗口大小变化触发resize
 window.addEventListener("resize", this.resizeEchart, true);
 },
 beforeDestroy() {
 this.observe.dis;
 window.removeEventListener("resize", this.resizeEchart, true);
 },
 methods: {
 resizeEchart() {
  this.myChart.resize();
 },
 initChart(leftPieData) {
  this.option.text = [
  "{name|Total}",
  "{value|" + leftPieData.totalNum + "}"
  ].join("\n");
  this.option.legend.data = [
  `Very High Risk`,
  `High Risk`,
  `Medium Risk`,
  `Low Risk`,
  `Very Low Risk`
  ];

  this.option.series[0].data = [
  {
   value: this.leftPieData.veryHighRiskNum,
   name: `Very High Risk`,
   itemStyle: {
   color: "#FF4D4F"
   }
  },
  {
   value: this.leftPieData.highRiskNum,
   name: `High Risk`,
   itemStyle: {
   color: "#FA9314"
   }
  },
  {
   value: this.leftPieData.mediumRiskNum,
   name: `Medium Risk`,
   itemStyle: {
   color: "#FACB14"
   }
  },
  {
   value: this.leftPieData.lowRiskNum,
   name: `Low Risk`,
   itemStyle: {
   color: "#4ED6CC"
   }
  },
  {
   value: this.leftPieData.veryLowNum,
   name: `Very Low Risk`,
   itemStyle: {
   color: "#2BD374"
   }
  }
  ];

  this.optionData = this.option.series[0].data;
  const optionData = this.optionData;
  this.option.legend = {
  textStyle: {
   fontSize: 14,
   color: "#3F495A"
  },
  orient: "vertical",
  left: "60%",
  itemGap: 30, // 字高
  top: "middle",
  icon: "circle",
  itemHeight: 10, //改变圆圈大小
  // data: [],
  formatter(params) {
   if (optionData.length) {
   switch (params) {
    case "Very High Risk":
    return params + "  " + optionData[0].value;
    break;
    case "High Risk":
    return params + "    " + optionData[1].value;
    break;
    case "Medium Risk":
    return params + "  " + optionData[2].value;
    break;
    case "Low Risk":
    return params + "    " + optionData[3].value;
    break;
    case "Very Low Risk":
    return params + "  " + optionData[4].value;
    break;
    default:
    return "";
   }
   }
  }
  };
  // 绘制图表
  this.myChart.setOption(this.option);
 }
 }
};
</script>

<style>
#leftEchartPie {
 width: 100%;
 height: calc(100% - 60px);
}
</style>

核心代码

 // 使用浏览器原生的MutationObserver来处理
 const observer = new MutationObserver(() => {
  setTimeout(this.myChart.resize, 201);
 });
 const config = { attributes: true, childList: true, subtree: false };
 this.observe = observer;
 observer.observe(document.getElementsByClassName("spoc-menu")[0], config);
 // 处理浏览器窗口大小变化触发resize
 window.addEventListener("resize", this.resizeEchart, true);

关于MutationObserver的使用 参考

最后注意需要beforeDestroy 里面销毁掉 监听的时间和 MutationObserver 监听的事件,避免事件一直在页面里面,消耗内存。

最后开发完后,对比了下和之前使用的插件,原生js处理的体验比插件反应快,插件给人的感觉盾一点

ok 这就是关于 vue 结合原生js 解决echarts resize问题 的开发心得啦 ~希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue 给window添加和移除resize事件遇到的坑

    在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件:确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效. //之前的写法,这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ '改变窗口大小时需要做的处理' }); }, beforeDestroy() { window.removeEventListener("resi

  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) //根据窗口的大小变动图表 --- 重点 window.onresize = function(){ myChart.resize(); //myChart1.resize(); //若有多个图表变动,可多写 } 代码如下: mounted() { con

  • 解决Echarts 显示隐藏后宽度高度变小的问题

    Echarts 是现在程序员做图表用到比较多的一种技术,前段时间,我就用了一下Echarts,我原本是将饼图先隐藏,然后点击按钮让它再显示出来,但是再显示时,饼状图出现了问题,它变得特别小,根本不能用,然后,就此,我找了下原因 原因:Echarts 图表是根据你定义的div 的样式来确定图表的大小,当图表隐藏时,Echarts会找不到div的宽和高,再次显示时它会给自己一个非常小的默认宽高值,所以在隐藏显示后会发现它变得非常非常的小. 解决:将初始化放在click事件里,给一个flag 控制显示

  • 解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)

    1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新: 2.解决办法: 数据更新时以为drawLine()函数在updated()里面执行(这种情况之前碰到过),后来发现热更新之后视图更新了,所以跟周期函数没有关系:参考了一下网上的一些资料,发现可以用vue中的watch()函数来监听数据的更新,一旦数据更新了,那么就在watch()函数中调用drawLine()函数,发现视图更新了,完美解决. 补充知识:vue echarts line动态刷新数据

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

  • 关于vue 结合原生js 解决echarts resize问题

    解决页面echarts 图表 resize问题 左侧的菜单栏模块是可以收缩的,点击左上角的 icon 可以收缩,但是点击左上角的icon后,右侧的echarts图并未进行对应的收缩,使用 element-resize-detector 插件能够解决问题(如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题)但是会有点卡顿,所以采用原生的方法来处理,再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化,可以不使用插件来处理问题了. <template>

  • vue使用wavesurfer.js解决音频可视化播放问题

    目录 1.安装wavesurfer 2.在页面导入 3.上源码 4.注释: 之前给大家介绍过vue中音频wavesurfer.js的使用方法,感兴趣的朋友可以点击查看,今天继续给大家普及vue解决音频可视化播放,使用wavesurfer.js问题,效果图如下所示: 上效果: 1.安装wavesurfer npm install wavesurfer.js 2.在页面导入 import WaveSurfer from 'wavesurfer.js' 注:我没有使用时间轴,所以没有引入,如果需要再引

  • vue通过video.js解决m3u8视频播放格式的方法

    前言 今天被这个关于m3u8视频播放不了搞了一下午,这个项目所有的视频流都是m3u8格式的,后台给我们返回的都是m3u8格式的视频流,解决了好长时间,看了好多博客,只有这个博客给我点启发,去解决这个问题,请查看.会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用,不能使用7以上的版本,用5版本的,

  • Vue结合原生js实现自定义组件自动生成示例

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一

  • vue使用原生js实现滚动页面跟踪导航高亮的示例代码

    需要使用vue做一个专题页面.滚动页面指定区域导航高亮. 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class. html结构 main.vue <template> <div class="qz-hom

  • vue.js集成echarts时遇到的一些问题总结

    前言 最近在做Beetlex的数据分析平台,在开发这个产品过程中涉及到大量的数据图表展示功能:由于产品前端使用的是vuejs开发,所以在集成echarts或多或少会碰到一些问题,在这里主要讲解一下碰到的问题和解决方法. 在讲解之前先分享一下实际使用效果.具体可以查看 http://data.beetlex.io 控件ID 在vuejs中往往会对常用的功能进行组件封装,同样为了让不同图表复用所以也封装成组件来使用.在这个封装过程存在一个问题就是图表元素DIV的ID问题,所以组件建构建图表DIV的I

  • 原生JS封装vue Tab切换效果

    本文实例为大家分享了原生JS封装vue Tab切换的具体代码,供大家参考,具体内容如下 先看效果图 使用的技术 vue,js,css3 vue组件 可以直接使用 <template> <div class="bookcircle-header"> <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'"> <li @cli

  • vue.js项目使用原生js实现移动端的轮播图

    目录 前言 一.了解原生js移动端的事件 二.轮播图实战 第一部分:template模板 第一部分解读: 第二部分:script标签内代码 第二部分解读: 第三部分:css样式部分 三.效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接下来跟大家分享一下我的解决问题的过程. 一.了解原生js移动端的事件 原生js移动

  • 原生js的ajax和解决跨域的jsonp(实例讲解)

    最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d

随机推荐