Echarts在Vue中组件化使用

---

前言

Echarts在项目中使用场景非常广泛，其自身是由JS实现的第三方库，提供了大量的个性化表格样式，兼容性已经适配几乎所有浏览器，在各个平台都能流畅、直观的展现数据以及结构组成。

在学习Echarts后，针对可视化大屏适配项目遇到的问题以及使用流程做了以下总结。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、简单安装

1.安装引入Echarts

代码如下（示例）：

//安装指令
cnpm install echarts --save
//配置代码 mainjs
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Vue.use(echarts);

2.安装引入Flexible.js

Flexible.js将屏幕视口的大小进行划分，并赋值给rem，方便我们对可视化大屏的尺寸适配。

代码如下（示例）：

//安装指令
cnpm i -S lib-flexible
//配置代码 mainjs
import flexible from 'lib-flexible'
Vue.use(flexible);
//配置源文件的划分规则(默认划分为10等份，修改为24等份)
打开文件夹node_modules下lib-flexible下的flexible.js文件
或
import flexible from 'lib-flexible'按住Ctrl+鼠标左键点击lib-flexible
//修改以下代码
function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
		//原代码为var rem = width / 10;
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

3.安装配置VsCode插件Cssrem（方便px转rem，可不装）

1.下载安装插件

2.修改1rem对应的px值，这里是1920被分24份即80px

二、使用步骤

1.创建Echarts组件

代码如下（示例）：

<template>
  <div class="box" ref="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      myTimer: "", //定时器
      myEchart: "", //Echart对象
      myObserver: "", //ResizeObserver监听对象
    };
  },
  //接收父亲传入的配置项
  props: { options: { type: Object } },
  methods: {
    //创建Echarts方法
    drawChart() {
      //判断Echart是否已经创建，防止重复创建
      if (this.myEchart) {
        this.myEchart.dispose();
      }
      //通过ref绑定已经创建好的box，并在此初始化
      this.myEchart = this.$echarts.init(this.$refs.echart);
      //将父亲传入的配置直接使用
      let option = this.options;
      //将option交给实例对象;
      this.myEchart.setOption(option);
    },
  },
  mounted() {
    //通过ResizeObserver监听dom的大小变化
    this.myObserver = new ResizeObserver((entries) => {
      //定时器主要是为了等待页面渲染完成，否则获取不到dom
      if (this.myTimer) {
        clearTimeout(this.myTimer);
      }
      this.myTimer = setTimeout(this.drawChart(), 500);
    });
    //对echarts外的dom进行监听
    this.myObserver.observe(this.$refs.echart);
  },
  beforeDestroy() {
    //清楚定时器与监听器
    clearTimeout(this.myTimer);
    this.myObserver.unobserve(this.$refs.echart);
  },
};
</script>
<style scoped lang='less'>
.box {
  height: 3rem;
  width: 100%;
}
</style>

2.父类调用Echarts组件

代码如下（示例）：

//引入Echarts组件
import chartChild from "./components/chartChild.vue";
//定义options配置
export default {
  components: { chartChild },
  data() {
    return {
      option:{
        //配置内容
      }
    };
  },
  ... ...
}
//对应位置使用Echarts组件
<chartChild :options="option1"></chartChild>

三、问题汇总

1.监听Resize

在监听Resize时没有使用window监听大小变化，因为使用window监听时大小自适应出现了不正常现象，Echarts被挤压变形，若不使用组件而在页面直接调用Echarts，那么使用window监听不会出现异常，因此大概率是因为组件化导致，具体原因不晓得。

//window 监听
window.addEventListener('resize', () => {})
//ResizeObserve 监听
const myObserver = new ResizeObserve(entries => {
	//操作代码
})
myObserver.observe(xxx)

2.监听绑定Dom

在监听Dom时请使用ref绑定dom元素，否则会出现多次使用Echarts只显示第一次调用的结果，原因是通过其他方式获取dom则他们的id会重复，因此只显示第一个

//通过ref绑定
this.myEchart = this.$echarts.init(this.$refs.echart);
//通过其他方式绑定（无效）
this.myEchart = this.$echarts.init(document.querySelector('.box'));

3.ResizeObserver报错

在使用new ResizeObserver方法时报错，不影响代码执行，但影响开发

在main.js中添加以下代码，解决问题。

//main.js
const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200);
    super(callback);
  }
}

---

总结

以上就是我在学习Echarts中学到的内容，并整理总结了遇到的小困难，Echarts的使用很方便也很高效，希望我的分享对您有帮助。