0

我正在尝试使用 react 复制在共享数据集的 echarts 中显示的此示例，但是每次更改轴时，我都会收到 Uncaught TypeError: Cannot read properties of null (reading 'setUpdatePayload') ，并且图表似乎没有在我的组件代码下方正确渲染

import React, { useState, useEffect } from 'react'
import ReactECharts from 'echarts-for-react'

function SharedDatasetComp() {
const [options, setOptions] = useState()
const [dimension, setDimension] = useState('2012')

const updateAxisInfo = (event) => {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        const newDimension = xAxisInfo.value+1;
        if(newDimension!==dimension){
            setDimension(newDimension)
        }
     }
}

const EventsDict = {
    'updateAxisPointer': updateAxisInfo
}

useEffect(() => {
    setTimeout(function() {
        setLoading(true)
        const option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                    ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                    ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                ]
            },
            xAxis: { type: 'category' },
            yAxis: { gridIndex: 0 },
            grid: { top: '55%' },
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: `{b}: ${dimension} ({d}%)`
                    },
                    encode: {
                        itemName: 'product',
                        value: dimension,
                        tooltip: dimension
                    }
                }

            ]

        }
        setOptions(option)

    })
}, [dimension])

return (
    <div style={{ paddingTop: "2%" }}>
        {options ?
                <div>
                    <ReactECharts
                        option={options}
                        onEvents={EventsDict}
                        style={{ height: 500, width: 1000 }}
                    />
                </div>
            : null
        }

    </div>
)
}

export default SharedDatasetComp

知道有什么问题吗？或如何解决？

4

0 回答 0