关于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 select多选框的左右移动 具体实现代码
Jul 03 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
loading动画特效小结
Jan 22 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue实现表单录入小案例
Sep 27 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php基本函数汇总
2015/07/09 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
短信提示使用 特效
2007/01/19 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
趣味运动会简讯
2015/07/20 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis