vue ecahrts组件开发

开发背景

新需求需要使用echarts和vue开发，在开发的过程中，发现网上已有的组件不符合自己的需求，所以准备自己开发一个。
经历了两版，第一版的写完之后每次传递给子组件的时候需要一堆数据，所以今天在第一版的基础上开发了第二版。

第一版

ecahrts组件

<template>
  <div :id="id" :style="style" class="chartcom"></div>
</template>
<script>
export default {
    
  name: 'chart',
  data () {
    
    return {
    
      chart: ''
    }
  },
  props: {
    
    id: {
    
      type: String
    },
    width: {
    
      type: String,
      default: '100%'
    },
    height: {
    
      type: String,
      default: '400px'
    },
    margin: {
    
      type: String,
      default: '0 auto'
    },
    option: {
    
      type: Object,
      default () {
    
        return {
    
          title: {
    
            text: 'vue-Echarts'
          },
          legend: {
    
            data: ['销量']
          },
          xAxis: {
    
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', 'tuoxie']
          },
          series: [
            {
    
              name: