这是我参与「第四届青训营 」笔记创作活动的第16天

前言

在笔者的开篇Echarts学习笔记中，对Echarts进行了介绍和简单使用，在这篇中将描述如何封装Echarts。

---

为什么要封装Echarts

在上一篇系列文中已经详细介绍，在使用Echarts时需要事先准备dom，要给style，即宽，高，原生Echarts没有响应式系统，在本次大作业的项目中，因为笔者选择了前端监控系统，需要对各类数据做可视化，所以用到Echarts的地方很多，挨个实例化Echarts实在太呆笨，所以封装起来，以自定义json的形式，只要将自己画图所用到的数据传入即可轻松将图呈现出来，可以摆脱重复机械代码的步骤。

---

Echarts组件基本功能

1. 准备dom
   
2. 准备实例
   
3. 配置options
   
4. 响应式设计
   

---

Echarts组件之准备dom

在开始之前，咱们去componts目录下生成.vue文件，该文件未来会作为封装组件使用。
回到正题：准备dom，即让组件自动生成，不需要用户再额外设置什么。笔者在这里用上文的例子: <div id="main" style="height:500px;width:500px"></div>

在该例中，我们可以自动生成id，例如:<div :id="uuid" style="height:500px;width:500px"></div> 如何自动生成uuid呢，笔者在这里用的是生成16位字符串的方式，对于笔者的项目而言，上界也就100个图，这种方式冲突的概率就跟用哈希用质数冲突一样的低量级，当然也可以用其他方式，例如 Date().getTime(),可以手动设置隔100ms左右准备一个dom，这种方式也是稳如老狗的一种。但笔者运行如果不隔时间就设置uuid的话，uuid为相同，图有些会显示不出来。以下为代码部分：

const idGen = 
 * @param len 指定生成字符串长度
function (len = 16){
        //伪代码，len也可以调高
    }
    return _str;
}
   export default{
      created() {
        this.uuid = idGen();
      },
   }

配置style同理，不再详细介绍直接给出代码：
<div :id="uuid" :style="style"></div>

  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },

---

Echarts组件之准备实例

完成了上一步后，准备实例已经相当简单，跟前一篇文中使用Echarts用法一样，先init再setoption。

  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uuid));
    this.myChart.setOption(this.option);
  },
  

---

总结

通过本文的学习，大家应该对封装Echarts组件的前两步不陌生了，也能自己动手封装自己想要的配置，在本系列的下一篇中会继续介绍如何封装Echarts组件。大家敬请期待！