vue echarts饼状统计

父组件
 <div class="content-container">
      <el-row>
        <el-col :span="18">
          <complexChart :mixture-data="MixtureData" />
        </el-col>
        <el-col :span="6">
          <chartRef :pie-data="optionRight2" class="cgart" />
        </el-col>

      </el-row>
    </div>
子组件
<template>
  <div class="companyList-ctn"
       :style="{ 'width': width }">
    <div :id="id"
         :style="{'width':'100%','height': screenHeight+'px'}"/>
  </div>
</template>
<script>
// 创建echarts的初始化id
const _c = {id: 1}
// 导入echarts包，导入echarts包使用require,为何不使用import
const echarts = require('echarts')
export default {
  props: {
    pieData: {
      type: Object
    },
    screenHeight: {
      type: Number
    }
  },
  data() {
    return {
      myPieChart: '', // 声明一个变量来接收echarts初始化的实例
      width: '100%',
      // height: 300 + 'px'
    }
  },
  created() {
    _c.id++
    this.id = 'c_pie_' + _c.id// 动态创建饼图的id选择器，由于id的唯一性
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(() => {
      this.initChart()
    })
    // 监听浏览器窗口变化初始化echarts，也就是当浏览器可视区域改变，让图表自适应
    window.addEventListener('resize', this.initChart, false)
  },
  // vue组件实例销毁之前移除监听事件，避免当我们切换路由时导致vue出现警告：
  // echarts.js?1be7:2160 Uncaught Error: Initialize failed: invalid dom.
  beforeDestroy() {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      // 获取dom插入echarts图表
      var chartDom = document.getElementById(this.id)
      // 在每次初始化实例之前先清除上一次创建好的实例，以便数据是最新的，避免数据错乱
      if (this.myPieChart != null && this.myPieChart != '' && this.myPieChart != undefined) {
        this.myPieChart.dispose()// 销毁
      }
      // echarts初始化方法
      this.myPieChart = echarts.init(chartDom)
      const _this = this
      // 监听页面变化图表自适应
      this.myPieChart.resize()
      // echarts配置项
      var option = {
        tooltip: { // 提示框浮层的位置，
          trigger: 'item' // 默认不设置时位置会跟随鼠标的位置。
        },
        legend: { // 饼图图例配置项
          // 类目位置
          orient: 'horizontal', // 类目排列显示
          // top: 'center', // 类目位置

          bottom: '0px', // 类目位置
          // right: 50 + '%', // 类目位置
          icon: 'circle', // 类目形状，默认圆角矩形
          itemWidth: 10, // 类目原型宽度
          itemHeight: 10, // 类目原型高度
          textStyle: {
            lineHeight: 20,
            fontSize: 14,
            color: '#333333'
          },
          data: [
            // 类目数据
            '视频',
            '图片'
          ]
        },
        // 饼图数据配置项
        series: [
          {
            type: 'pie', // echarts类型指定，这个type决定当前的图表是饼图还是折线图亦或是柱状图
            radius: '70%', // 饼图大小，传数组显示环形,
            center: ['50%', '50%'], // 饼图位置,展示在父容器内的位置
            selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选,‘single’,‘multiple’,分别表示单选还是多选。
            itemStyle: { // 饼图样式，由于饼图只有一项数据，所以只有一个itemStyle，稍后我们会介绍柱状图，会有多个itemStyle
              color: function (params) { // 设置饼图颜色-渐变
                var colorList = [ // 饼图颜色，渐变色
                  {c1: '#2DC4FF', c2: '#1492FF'},
                  {c1: '#53DEC4', c2: '#29BA91'}
                ]
                // 设置饼图渐变色
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    offset: 0,
                    color: colorList[params.dataIndex].c1
                  },
                  {
                    offset: 1,
                    color: colorList[params.dataIndex].c2
                  }
                ])
              }
            },
            label:  // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            this.pieData.series[0].itemStyle.normal.label,
            data: [// 饼图数据
              {
                name: '视频',
                value: this.pieData.series[0].data[0]
              },
              {name: '图片', value: this.pieData.series[0].data[1]}
            ],
            emphasis: { // 高亮状态的扇区和标签样式。（鼠标移入时，饼图的样式配置项，可设置阴影样式，以及文字加粗颜色还有文字大小等等）
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.myPieChart.setOption(option)// setOption这个api是echarts内置的api
    }
  }
}
</script>
<style lang="scss" scoped>
.companyList-ctn {
  border-radius: 4px;
  margin-bottom: 10px;
  background: white;

  .companyList-oneItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>