关于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 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
详解js闭包
Sep 02 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
layui实现数据分页功能
Jul 27 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
Vant picker 多级联动操作
Nov 02 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概述.
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Python脚本调试工具安装过程
2021/01/11 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
C/C++程序员常见面试题一
2012/12/08 面试题
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
高考升学宴主持词
2019/06/21 职场文书