在vue项目中封装echarts的步骤

<template>
 <div class="chart"></div>
</template>

<script>
import { merge } from 'lodash';
import echart from 'echarts';
import { BASIC_OPTION } from './default_option';
import { COLOR_ARRAY } from '../color';
import ResizeListener from 'element-resize-detector';

export default {
 name: 'ChartPie',
 props: {
  seriesData: {
   type: Array,
   required: true,
   default: () => []
  },
  extraOption: {
   type: Object,
   default: () => ({})
  }
 },
 data() {
  return {
   chart: null
  };
 },
 watch: {
  seriesData: {
   deep: true,
   handler() {
    this.updateChartView();
   }
  }
 },
 mounted() {
  this.chart = echart.init(this.$el);
  this.updateChartView();
  window.addEventListener('resize', this.handleWindowResize);
  this.addChartResizeListener();
 },
 beforeDestroy() {
  window.removeEventListener('resize', this.handleWindowResize);
 },
 methods: {
  /**
   * 将业务数据加入到基础样式配置中
   * @returns {Object} 完整的echart配置
   */
  assembleDataToOption() {
   const formatter = name => {
    const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0);
    const data = this.seriesData.find(item => item.name === name) || {};
    const percent = data.value
     "less" scoped>
.chart {
 width: 100%;
 height: 100%;
}
</style>

<template>
 <van-empty v-if="isSeriesEmpty" />
 <chart-pie v-else v-bind="$props" />
</template>

<script>
import { isEmpty } from 'lodash';
import ChartPie from './echart_pie.vue';

export default {
 name: 'EchartPie',
 components: { ChartPie },
 props: ChartPie.props,
 computed: {
  isSeriesEmpty() {
   return (
    isEmpty(this.seriesData) || this.seriesData.every(item => !item.value)
   );
  }
 }
};
</script>

<template>
<div class="echart-pie-wrap">
 <echart-pie :series-data="dataList" :extra-option="extraOption" />
</div>
</template>

<script>
import EchartPie from '@/components/echarts/echart_pie';

export default{
 components: { EchartPie },
 data() {
  return {
   dataList: [
    {
     name: "西瓜",
     value: 20
    },
    {
     name: "橘子",
     value: 13
    },
    {
     name: "杨桃",
     value: 33
    }
   ],
   extraOption: {
     color: [ '#fe883a', '#2d90d1','#f75981', '#90e2a9']
   }
  }
 }
}

</script>

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