目的

1. 減少重復(fù)代碼量
2. 統(tǒng)一風(fēng)格
3. 全局事件處理方便維護(hù)
4. 可以根據(jù)實(shí)際需求暴露對(duì)應(yīng)的事件和方法

### 代碼
<template>
  <div ref="chart" class="my-chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EChart',
  props: {
    option: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    option(newValue) {
      if (newValue) {
        this.loadChart()
      }
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart)
    if (this.option) {
      this.loadChart()
    } else {
      this.myChart.showLoading({
        text: '數(shù)據(jù)加載中...',
        color: '#81B5FD',
        textColor: '#81B5FD',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        showSpinner: false,
        zlevel: 0
      })
    }
  },
  methods: {
    loadChart() {
      this.myChart.hideLoading()
      this.myChart.setOption(this.option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.my-chart {
  width: 100%;
  height: 100%;
}
</style>

使用

<template>
  <my-card title="業(yè)務(wù)類別">
    <e-chart :option="option" />
  </my-card>
</template>
<script>
export default {
  name: 'BusinessCategory',
  data() {
    return {
      option: null,
      seriesData: [
        { value: 1048, name: '房建' },
        { value: 735, name: '鐵路' },
        { value: 580, name: '公路' },
        { value: 484, name: '貿(mào)易' },
        { value: 300, name: '境外開礦' }
      ]
    }
  },
  mounted() {
    this.handleChartInit()
  },
  methods: {
    handleChartInit() {
      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: ' </br>{c}(u0z1t8os%)'
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|}\n{time|{c}} ({time|u0z1t8os}%)',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '70%'],
            data: this.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }
}
</script>