关于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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
JS继承 笔记
Jul 13 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
JavaScript实现打字游戏
Feb 19 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP7新增函数
2021/03/09 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Python 通配符删除文件的实例
2018/04/24 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python实现超市商品销售管理系统
2019/11/22 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
python中元组的用法整理
2020/06/15 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
学生爱国演讲稿
2014/01/14 职场文书
初三政治教学反思
2014/01/30 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
2014年党支部学习材料
2014/05/19 职场文书
法人代表任命书范本
2014/06/05 职场文书
结对共建协议书
2014/08/20 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript