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


Posted in Javascript onJuly 26, 2020

解决页面echarts 图表 resize问题

关于vue 结合原生js 解决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问题 的开发心得啦 ~希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
全面理解闭包机制
Jul 11 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
You might like
php ftp文件上传函数(基础版)
2010/06/03 PHP
php连接数据库代码应用分析
2011/05/29 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
javascript常用功能汇总
2015/07/05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
解决layui弹框失效的问题
2019/09/09 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
《天安门广场》教学反思
2014/04/23 职场文书
服务标兵事迹材料
2014/05/04 职场文书
财产分割协议书范本
2014/11/03 职场文书
电影复兴之路观后感
2015/06/02 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python