v-chart 饼图嵌套

template

<template>
  <div class="histogram">
     <ve-pie :colors="colors" :data="chartData" :settings="chartSettings" :extend='extend' height='24rem' ></ve-pie>
  </div>
</template>

script

<script>
   export default {
    props:['MonthOrderData'],
    data () {
      this.chartSettings = {
        radius: 100,
        label: { show: false },   
        labelLine: { show: false },
        level: [
          ['现金支付','非现金支付'],
          ['异常订单量','正常订单量'],
          ['订单总量'],
        ]
      }
      this.colors = [
          "#19d4ae",
          "#f3f9ff",
          "#f18b98",
          "#fff8eb",
          "#5ab1ef",
        ]
      this.extend = {
        legend: {
            show: true,
            type: 'scroll',
            data: ['现金支付', '异常订单量', '订单总量'],
            orient:'vertical',
            left:20,
            top:20
        },
      }
      return {
        chartData: {
          columns: ['名称', '数量'],
          rows: []
        },
      }
    },
    watch:{
      MonthOrderData(val){
        this.chartData.rows = [
          {
            名称: "订单总量",
            数量: val[0].barcodeNum
          },
          {
            名称: "异常订单量",
            数量: val[0].messageNum
          },
          {
            名称: "正常订单量",
            数量: val[0].barcodeNum - val[0].messageNum
          },
          {
            名称: "现金支付",
            数量: val[0].cashNum
          },
          {
            名称: "非现金支付",
            数量: val[0].barcodeNum - val[0].cashNum
          },
        ];
        this.extend.legend.formatter = function (name) {
          console.log(name,'-0')
          if(name == '订单总量'){
            return  `订单数 / ${val[0].barcodeNum}`
          }
          if(name == '现金支付'){
            return  `现金支付 / ${val[0].cashNum} / ${(val[0].cashRate * 100).toFixed(2)}%`
          }
          if(name == '异常订单量'){
            return  `异常订单量 / ${val[0].messageNum} / ${(val[0].messageRate * 100).toFixed(2)}%`
          }
        }
      }
    }
  }
</script>