echarts封装组件（动态数据）

封装echarts饼图组件（其他同理），动态更新数据

---

父组件

<templete>
    <div>
        <div>
            <span :style="{display:'inline-block',textIndent: '2em'}">简介...</span>
        </div>
        <Piechart
            @propData="propData"
            :id="pieData.id"
            :echartStyle="pieData.s"
            :titleText="pieData.title.text"
            :colorful="pieData.b"
            :opinion="pieData.c"
            :seriesName="pieData.d"
            :opinionData="pieData.e"
        />
    </div>
</templete>

import Piechart from '@comp/chart/pieChart'  // 引用子组件

子组件

<template>
  <div :id="id" :style="echartStyle"></div>
</template>

<script>
import Echarts from 'echarts'

export default {
  props: { // 接收父组件的传值
    echartStyle: { // 样式
      type: Object,
      default() {
        return {}
      }
    },
    id: {
      type: String,
      default: 'echarts_id'
    },
    titleText: { // 标题文本
      type: String,
      default: '默认标题'
    },
    opinion: { // 扇形区域名称
      type: Array,
      default() {
        return []
      }
    },
    colorful: { // 颜色
      type: Array,
      default() {
        return []
      }
    },
    seriesName: { // 提示框标题
      type: String,
      default: ''
    },
    opinionData: { // 扇形区域数据
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {  // 监听父组件传过来的数据，动态更新
    opinionData: {
      handler(newVal, oldVal) {
        if (this.charts) {
          newVal ? this.setOption(newVal) : this.setOption(oldVal);
        }
      },
      deep: true,
      immediate: true,
    }
  },
  data() {
    return {
      charts: null,
    }
  },
  mounted() {
    this.drawPie(this.id);
  },
  beforeDestroy() {
    this.charts.dispose();  // 销毁实例
    this.charts = null;
  },
  methods: {
    
    drawPie(id) { // 绘制饼状图
      this.charts = Echarts.init(document.getElementById(id));
      this.setOption(this.opinionData);

      // setTimeout(() => {
      //   let xxx = this.charts.getDataURL({
      //     pixelRatio: 2,
      //     backgroundColor: '#fff'
      //   });
      //   this.$emit('propData', xxx);  // 回调，导出图
      // },2000)
    },
    setOption(option) {
      this.charts.setOption({
        title: {
          text: this.titleText, // 标题文本
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: (d) => {
            let list = `<div style="text-align:left;font-size:12px">
              数量: <span style="font-size:16px;font-weight:bolder;">${d.data.top}</span></div>
            <div style="text-align:left;font-size:12px">
              占比: <span style="font-size:16px;font-weight:bolder;">${d.data.proportion}</span></div>`
            return list
          }
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          bottom: 20,
          data: this.opinion // 扇形区域名称
        },
        series: [
          {
            name: this.seriesName, // 提示框标题
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: this.opinionData, // 扇形区域数据
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            }
          }
        ],
        color: this.colorful, //自定义的颜色
      })
    }
  }
}
</script>

效果图