将echarts 封装为vue组件 动态加载数据——以饼状图为例

基本原理：
1、创建一个用于展示图形的vue组件，保留接收数据的接口，作为子组件使用。
2、在父组件中引用上述子组件，同时传递数据给子组件。
本文在main.js中全局引入echarts，代码为：

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

子组件echartscom.vue：

<template>
  <div class="echartsCommon">
    <div style="width: 80rem; height: 20rem" class="echarts" ref="piechart"></div>
  </div>
</template>

export default {
   
    name: 'echartscom',
    mounted() {
   
      this.drawCharts(