Question

嗨，我在Apue中通过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>

我尝试在顶点文档中查找饼图，但找不到关于颜色https://apexcharts.com/docs/chart-types/pie-donut/

的任何信息

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

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

非常感谢

Answer 1

所有主要图表配置都将在:options="chartOptions"属性中显示。

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

饼图中的Vue Apexcharts颜色

1 个答案: