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

前言

在笔者的上一篇Echarts系列中，对Echarts的封装前两步进行了介绍和简单使用，在这篇中将描述如何封装Echarts的options和响应式设计。这两步也是非常重要的两步，能直接影响到图的显示。

---

Echarts组件之配置options

读过该系列第一篇的读者都不陌生，用户必须要在option中配置数据才能让自己想要的图显示出来，所以option也是完全由用户定义的功能，该步骤中，我们要把这一步骤写成用户传参的方式，让用户具有可支配性。具体使用方法：在自己想要显示图的页面中(例如 HomeView.vue)其目录下创建options.js文件，该js文件为option数据文件。如下所示：

export const option1 = {
    title: {
      },
      tooltip: {
      },
      legend: {
      },
      series: [
      ]
};

<template>
    <div class = "homeview">
        <MCharts :option="option1"></Mcharts>
    </div>
</template>

<script>
    import MCharts from './components/MCharts.vue'
    import option1 from './options.js'
    export default {
    components: {
            name: 'MCharts',
        },
    data(){
        return {
            option:option1
         }
    }
    };
</script>

还需要去Mcharts组件构造接受option函数:

    option: {
      type: Object,
      default: null,
    },
  },

至此我们就实现了由用户传参式的组件开发。接下来是Echarts组件的额外设计，以提高用户体验度。

---

Echarts组件之响应式设计

在使用中，将图标的style样式设置为固定的高和宽实在不够灵活，我们可以用百分比让图标自适应父级容器。例如<MCharts :option= "option3" style="width: 100%; height: 100%;"/>
在使用中，例如电脑端页面的拉伸也会让图显示不全，会出现各种各样的情况，我们在组件的mounted()函数中加上监听事件：

  methods: {
    resize() {
      this.myChart.setOption(this.option);
      this.myChart.resize();
    }
  }, 
  mounted() {
      window.addEventListener('resize', this.resize.bind(this))
  }

最后，在笔者的项目中发现，vue结合echarts在使用时(例如切换路由)会存在内存泄露问题，所以当用户用vue开发时最后对图表进行销毁操作，回收资源。

beforeDestory(){
  echarts.dispose(this.chart);
  this.chart = null;
}

---

总结

通过本文的学习，大家应该具备封装Echarts组件的能力了。笔者的在Echarts的使用过程中感受还是不错的，用户在使用Echarts时还可以用annimation等功能美化图表，Echartsd基本的功能也都是具备的。最后对于性能方面，比如加载大数据等，还未有比较实验，等笔者有空会进行实验，到时候会跟监控系统的白屏异常的深度优先遍历算法判断权重同步更新，大家敬请期待！