一个vue echart嵌套饼图的编写

一个vue echart嵌套饼图的编写

额。需求实现是一个嵌套的饼图，其实vue网上的demo上已经写好了 chart何种类型的组件但是由于项目需要，再在
他原有的PieChart上扩展显得有些麻烦，索性照猫画虎加上echarts文档搞了一嵌套饼图：

代码：

下面是模板的dom代码

<template>

  <div :class="className" :style="{'height':height,'width':width}">

  </div>


</template>

定义宽高 以及class 以及表的title等props以供组件内部调用

props: {
     title: {
       type: String,
       default: ''
     },
     className: {
       type: String,
       default: 'chart'
     },
     width: {
       type: String,
       default: '100%'
     },
     height: {
       type: String,
       default: '300px'
     },
     chartName: {
       type: String,
       default: ''
     },
     chartData: {
       type: Object,
       default: null
     },
     chartColor: {
       type: Array,
       default: function() {
         return []
       }
     },
     hasLegend: {
       type: Boolean,
       default: true
     },
     hasTooltip: {
       type: Boolean,
       default: true
     },
     hasLabel: {
       type: Boolean,
       default: true
     },
     //一些数据字段用于计算后转换成charts数据
     qqs: {
       type: Number,
       default: ''
     },
     xzs: {
       type: Number,
       default: null
     },
     zl: {
       type: Number,
       default: ''
     }
   },

下面是chart的配置数据
this.chart是data的里面定义的

const qqsPercentage = parseInt(this.qqs / this.zl * 100) + '%'
const xzsPercentage = parseInt(this.xzs / this.zl * 100) + '%'
this.chart = echarts.init(this.$el, 'macarons')
let legendObj = {
  left: 'center',
  bottom: '10',
  data: ['实例1', '实例2', '实例3', '剩余']
}
let toolTipObj = {
  trigger: 'item',
  formatter: '{a} <br/>{b} : {c} ({d}%)'
}
if (this.hasLegend === 'false') {
  legendObj = null
}
if (this.hasTooltip === 'false') {
  toolTipObj = null
}
let xzsObj = {
  hoverAnimation: false,
  legendHoverLink: false,
  color: ['#6A91EB', '#E4E4E4'],
  name: '先限制值',
  type: 'pie',
  selectedMode: 'single',
  radius: ['41%', '30%'],
  center: ['50%', '30%'],
  label: {
    normal: {
      position: 'inner'
    }
  },
  labelLine: {
    show: false,
    normal: {

      show: false
    }
  },
  data: [
    { value: this.xzs, name: xzsPercentage },
    {
      value: this.zl - this.xzs, name: 'xx', label: {
        normal: {
          show: false
        }
      }
    }
  ]
}
if (!this.xzs) {
  xzsObj = null
}
const chartOptions = {
  series: [
    // 内
    xzsObj,
    // 外
    {
      hoverAnimation: false,
      legendHoverLink: false,

      color: ['#50D27E', '#E4E4E4'],
      name: '访问来源',
      type: 'pie',
      radius: ['42%', '55%'],
      center: ['50%', '30%'],
      labelLine: {
        show: false,
        normal: {

          show: false
        }
      },
      label: {
        normal: {
          position: 'inner'

        }
      },
      data: [
        { value: this.qqs, name: qqsPercentage },
        {
          value: this.zl - this.qqs, name: 'xx', label: {
            normal: {
              show: false
            }
          }
        }
      ]
    }
  ]
}

this.chart.setOption(chartOptions)

在父亲组件中使用：

<echarts-content :qqs="cpuqqs" :xzs="cpuxzs" :zl="cpuzl" height="380px" class="grid-content" title="cpu allocation(cores)">

具体的配置意义请看echarts的文档 以及熟悉组件之间的通信方法
应该在mounted中调用方法 在method中定义方法文章中并没写全代码 贴出的也只函数内的代码段,
今天看到一句话：代码是生存,不是生活