Vue Apexcharts 饼图中的颜色

Question

您好，我在 vue 中通过 Apex 图表制作了这个饼图。我想自定义每个部分的颜色。

  new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: {

      series: [44, 55, 13],
      chartOptions: {
        chart: {
          width: 380,
          type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      },


    },

  })

这是 html 部分：

 <div id="chart">
        <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
      </div>

我尝试在 apex 文档中查找饼图，但找不到任何关于颜色的信息 https://apexcharts.com/docs/chart-types/pie-donut/

那么我应该如何编辑代码，让 A 队显示为红色，B 队显示为蓝色，C 队显示为绿色？我真的不喜欢默认颜色，但在上面的代码中找不到它们。

我想我需要在某处添加某种属性。

非常感谢

Answer 1

所有主要图表配置都将放在 :options="chartOptions" prop.

中

data: {
  chartOptions: {
    colors: ['#5C4742', '#A5978B', '#8D5B4C', '#5A2A27', '#C4BBAF']
  },
}

Vue Apexcharts 饼图中的颜色

Vue Apexcharts colors in pie chart

html

vue.js

apexcharts