在vue项目中封装echarts的正确姿势 (2)

在源码中，我用到了lodash的一个公共函数merge,它表示递归合并来源对象自身和继承的可枚举属性到目标对象。后续的来源对象属性会覆盖之前同名的属性

另外一个有幸被我宠幸的函数是isEmpty，当我传入的业务数据为空时，比如空数组[]、undefined、null时，都会被认为这是一个无数据的情况，这时候我们就选用一个空状态的echarts配置，即EMPTY_OPTION

在绑定到具体的DOM元素时，我没有用querySelector选择器去选择一个类或者是用Math.random生成的id，因为这两者都不是绝对可靠的，我直接使用当前vue示例关联的根DOM 元素$el

我监听窗口大小的变化，并为这种情况添加对应的事件处理函数--echarts自带的resize方法，使echarts图形不会变形

将对应DOM的宽高设为100%，让其大小完全由使用者提供的容器控制

setOption方法的第二个参数表示传入的新option是否不与之前的旧option进行合并，默认居然是false，即合并。这显然不行，我们需要每次的业务配置都是完全独立的

命名非常语义化，一看就懂

保留了自己需要单独配置一些定制样式的灵活性，即extraOption

关于dataList和extraOption的具体含义，使用示例，都放在README.md文件做详细说明，使用者一看文档就能上手

default_option.js应该包括哪些内容

应该包括两部分：正常情况下的基础配置BASIC_OPTION，异常情况下（数据为空）的EMPTY_OPTION，如下：

组件使用示例 <template>
  <div class="echart-wrapper">
    <chart-pie :data-list="pieData" :extra-option="option" />
  </div>
</template>

<script>
import ChartPie from "@/components/echarts/echart_pie/EchartPie.vue";

export default {
  name: "home",
  data() {
    return {
      // 业务数据
      pieData: [
        {
          name: "西瓜",
          value: 20
        },
        {
          name: "橘子",
          value: 13
        },
        {
          name: "杨桃",
          value: 33
        }
      ],
      // 定制化配置覆盖默认配置
      option: {
        color: ["#e033f7", "#15c28e", "#2267e6"]
      }
    };
  },
  components: {
    ChartPie
  }
};
</script>

<style lang="less" scoped>
.echart-wrapper {
  width: 300px;
  height: 300px;
  margin: 10px auto;
}
</style>

效果图

当数据正常时，效果如下

当无数据时，效果如下

可以更进一步优化的地方

我这一手封装已经是上乘之作，如果一定说哪里不足的话，我认为在resize的节流方面可以考虑引入lodash中的throttle节流函数，进一步优化性能。