reactjs - 如何更新饼图上的系列

Question

在我的 index.js 中，我定义了饼图:

import pieChart1 from './chart/pie-chart-1';

然后将其添加到 render() 函数下:

        <Col md={6}>
                <Card>
                    <Card.Header>
                        <Card.Title as="h5">BALANCE</Card.Title>
                    </Card.Header>
                    <Card.Body>
                        <Chart {...pieChart1} />
                    </Card.Body>
                </Card>
            </Col>

我在 ./chart/pie-chart-1.js 中定义了一个饼图，如下所示:

export default {
    height: 320,
    type: 'pie',
    options: {
        labels: ['Call', 'Put'],
        colors: ['#4680ff', '#0e9e4a'],
        legend: {
            show: true,
            position: 'bottom',
        },
        dataLabels: {
            enabled: true,
            dropShadow: {
                enabled: false,
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    },
    series: [50, 50]

我有一个调用 API 的函数，做一些数学运算并将值保存到状态。

  this.setState({CallPrem : callPrem, PutPrem : putPrem})

在这一点上，我想用这些值更新饼图......我该怎么做？基本上希望 series[0] 具有 callPrem 值，而 series[1] 具有 putPrem。
请原谅我的菜鸟式行话，第一次使用 reactjs，我喜欢它，但我正在慢慢拼凑所有这些是如何工作的。谢谢

Answer 1

您有多种更新图表的选项。
第一种也是推荐的方法是更新您传递给组件的 Prop

const newOptions = {
  ...pieOptions,
  options: {
    ...options,
    labels: [newLabels]
  },
  series: [newSeries]
}

更新 Prop 将自动重新渲染图表。

另一种方式是使用内核ApexCharts.exec()功能。为此，您需要先在 pie-chart-1.js 文件中设置图表 ID。

export default {
    height: 320,
    type: 'pie',
    options: {
      chart: {
        id: "chart-id"
      }
    }
}

设置图表 ID 后，您将能够调用以下方法

ApexCharts.exec('chart-id', 'updateOptions', {
  series: newSeries,
  labels: newLabels
})