饼图中的Vue Apexcharts颜色答案

【问题标题】：Vue Apexcharts colors in pie chart饼图中的Vue Apexcharts颜色
【发布时间】：2020-03-26 15:56:00
【问题描述】：

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

  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？我真的不喜欢默认颜色，但在上面的代码中找不到它们。

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

非常感谢

【问题讨论】：

标签： html vue.js apexcharts

【解决方案1】：

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

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

【讨论】：