vue echarts饼图封装

// main.js引入echarts
import * as echarts from 'echarts'
2.pie.js
// 我是饼图
const echarts = require('echarts/lib/echarts')

require('echarts/lib/chart/line')
// import 'zrender/lib/svg/svg'
export function drawChartPie(param, element) {
  const myChart = echarts.init(element)
  const pzx = {
    // 图例
    legend: param.legend ? param.legend : [],
    title: param.title ? param.title : [],
    series: [],
    // color
    color: param.color ? param.color : []
  }

  if (pzx.color.length === 0) {
    delete pzx.color
  }

  if (param.series) {
    // 开始处理series
    pzx.series = []
    param.series.forEach((val, index) => {
      const tempValue = {
        type: 'pie',
        data: val.data ? val.data : [],
        radius: val.radius ? val.radius : '50%',
        center: val.center ? val.center : [],
        left: val.left ? val.left : 0,
        right: val.right ? val.right : 0,
        top: val.top ? val.top : 0,
        bottom: val.bottom ? val.bottom : 0,
        itemStyle: val.itemStyle ? val.itemStyle : {},
        avoidLabelOverlap: val.avoidLabelOverlap ? val.avoidLabelOverlap : true,
        labelLine: {
          show: val.labelLine ? (val.labelLine.show ? val.labelLine.show : false) : false,
          length: val.labelLine ? (val.labelLine.length ? val.labelLine.length : 15) : 30
        },
        label: val.label ? val.label : {}
      }
      pzx.series.push(tempValue)
    })
  }
  pzx.legend.type = 'scroll'
  if (!pzx.legend.right && pzx.legend.right !== 0 && pzx.legend.right !== '0') {
    delete pzx.legend.right
  }
  if (!pzx.legend.left && pzx.legend.left !== 0 && pzx.legend.left !== '0') {
    delete pzx.legend.left
  }
  if (!pzx.legend.top && pzx.legend.top !== 0 && pzx.legend.top !== '0') {
    delete pzx.legend.top
  }
  if (!pzx.legend.bottom && pzx.legend.bottom !== 0 && pzx.legend.bottom !== '0') {
    delete pzx.legend.bottom
  }
  myChart.setOption(pzx)
  return myChart
}
3.封装子组件
<template>
  <div class="daily-record-echarts">
    <div ref="dateChart" class="chart" />
  </div>
</template>
<script>
import { drawChartPie } from '@/utils/echartsAll/pie'
import 'zrender/lib/svg/svg'
export default {
  name: 'DailyRecordEcharts',
  props: {
    tableArray: {
      type: Object,
      default: () => {
        return {
          legend: [],
          title: [],
          series: [],
          color: []
        }
      }
    }
  },
  data() {
    return {
      mycharts: null
    }
  },
  watch: {
    tableArray: {
      handler(newName, oldName) {
        this.getChart(newName)
      },
      deep: true
    }
  },
  beforeDestroy() {
    // ----------这个是用来释放图表
    const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateChart)
    if (dcharts) {
      this.$echarts.dispose(dcharts)
      // 这是调用ie内存回收
      if (window.CollectGarbage) {
        window.CollectGarbage()
      }
    }

    /** ****自动适应缩放模块******/
    window.removeEventListener('resize', this.resizefun)
    this.resizefun = null
  },
  mounted() {
    this.getChart(this.tableArray)
    /** ****自动适应缩放模块******/
    this.resizefun = () => {
      if (this.mycharts) {
        // 防止重复性渲染
        this.mycharts.resize()
      } else {
        this.$echarts.init(this.$refs.dateChart).resize()
      }
    }
    window.addEventListener('resize', this.resizefun)
  },
  methods: {
    getChart(val) {
      const dcharts = this.$echarts.getInstanceByDom(this.$refs.dateChart)
      if (dcharts) {
        this.$echarts.dispose(dcharts)
        // 这是调用ie内存回收
        if (window.CollectGarbage) {
          window.CollectGarbage()
        }
      }
      this.mycharts = drawChartPie(val, this.$refs.dateChart)
    }
  }
}
</script>
<style scoped lang="scss" type="text/scss">
.daily-record-echarts{
  width:100%;
  height:100%;
  .chart{
      width:100%;
      height:100%;
  }
}
</style>
4.使用
const options = {
  title: [
    {
      text: '',
      x: 'center',
      y: 'top',
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 'normal',
            color: '#000',
            padding: [10, 0]
          },
          val: {
            fontSize: 32,
            fontWeight: 'bolder',
            color: '#000'
          }
        }
      }
    }
  ],
  legend: [
    {
      data: [],
      orient: 'vertical',
      x: 'right',
      align: 'left',
      type: 'scroll',
      y: 'center'
    }
  ],
  color: [],
  series: [
    {
      data: [],
      left: 0,
      right: 'center',
      top: 10,
      bottom: 0,
      radius: ['0', '60%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 0,
        borderColor: '#fff',
        borderWidth: 0
      },
      label: {
        position: 'outside',
        fontSize: 12,
        formatter: '{d}%\n({c}人)', // 只要百分比
        rotate: false
      },
      labelLine: {
        show: true,
        length: 10
      },
      center: ['50%', '50%']
    }
  ]
}
<s-echart-pie :table-array="tableChildSexArray" style="height:362px;" />

this.tableChildSexArray = JSON.parse(JSON.stringify(options))