Question

我试图在饼图的中心显示某些元素的总数，但到目前为止，我还无法在设置中找到此选项。我该怎么做：

我当前的代码：

checksChart: {
  options: {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

  },
  series: [400, 400, 400, 400, 400]
},

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>

这是我到目前为止的内容：

Answer 1

基于Apex Chart Documentation，您需要使用plotOptions来显示甜甜圈图中的数据总数。

所以您需要使用like

chartOptions: function() {
return {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

     plotOptions: {
          pie: {
            donut: {
              labels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '22px',
                  fontFamily: 'Rubik',
                  color: '#dfsda',
                  offsetY: -10
                },
                value: {
                  show: true,
                  fontSize: '16px',
                  fontFamily: 'Helvetica, Arial, sans-serif',
                  color: undefined,
                  offsetY: 16,
                  formatter: function (val) {
                    return val
                  }
                },
                total: {
                  show: true,
                  label: 'Total',
                  color: '#373d3f',
                  formatter: function (w) {
                    return w.globals.seriesTotals.reduce((a, b) => {
                      return a + b
                    }, 0)
                  }
                }
              }
            }
          }
        },
          series: [400, 400, 400, 400, 400]
      }
    },

在上面的代码中，序列的总和是通过使用seriesTotals.reduce来实现的，

   total: {
     show: true,
     label: 'Total',
     color: '#373d3f',
     formatter: function (w) {
       return w.globals.seriesTotals.reduce((a, b) => {
           return a + b
       }, 0)
      }
    }

Working Vue Apex donut codepen

Vue-Apexcharts饼图总计未显示

1 个答案: