Echarts 动态刷新数据导致CPU占用过高卡死该怎么解决？

Question

我的环境是echarts5.1.1+Electron+React+win,目前的情况是每1秒会从com口接收一次数据并且setOption一次，在120W条数据的时候内存占用400mb正常但是cpu占用率会高达百分之60%以至于直接导致Electron卡死，我在每5000条数据时会dispose释放一次，而且动画也被禁用了，内存占用没问题，但是CPU应该怎么解决呢？

const option = {
    animation: false,
    tooltip: {
        trigger: 'axis',
        show: true
    },
    legend: {
        left: '31%',
        data: ['P_P', 'P_I', 'SA', 'FMT']
    },
    grid: [{
        left: '2%',
        top: '8%',
    }],
    dataZoom: [
        {
            type: 'inside',
            xAxisIndex: [0],
        },
        {
            type: 'slider',
            xAxisIndex: [0],
            realtime: false
        },
    ],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            onZero: false
        },
        data: [],
    },
    yAxis: [{
        position: 'right',
        type: 'value',
        show: false,
        min: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.min, operation(this_number, 3, 'mul'), 'sub');
        },
        max: function (value) {
            return value.max;
        }
    }, {
        position: 'right',
        type: 'value',
        show: false,
        min: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.min, operation(this_number, 2, 'mul'), 'sub');
        }, max: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.max, operation(this_number, 1, 'mul'), 'add');
        }
    }, {
        position: 'right',
        type: 'value',
        show: false,
        min: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.min, operation(this_number, 1, 'mul'), 'sub')
        }, max: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.max, operation(this_number, 2, 'mul'), 'add')
        }
    }, {
        position: 'right',
        type: 'value',
        show: false,
        min: function (value) {
            return value.min;
        }, max: function (value) {
            let this_number = operation(value.max, value.min, 'sub')
            return operation(value.max, operation(this_number, 3, 'mul'), 'add');
        },
    }],
    series: [{
        name: 'P_P',
        type: 'line',
        data: [],
        sampling: "lttb",
        yAxisIndex: 0,
        animation: false
    }, {
        name: 'P_I',
        type: 'line',
        data: [],
        sampling: "lttb",
        yAxisIndex: 1,
        animation: false
    }, {
        name: 'SA',
        type: 'line',
        data: [],
        sampling: "lttb",
        yAxisIndex: 2,
        animation: false
    }, {
        name: 'FMT',
        type: 'line',
        data: [],
        sampling: "lttb",
        yAxisIndex: 3,
        animation: false
    }]
};

这是我的option配置

    initChart() {
        chartDom = document.getElementById('main');
        if (!myChart) {
            myChart = echarts.init(chartDom);
        }

    }

    append_series(data) {
        for (let i = 0; i < data.length; i++) {
            option.series[i].data.push(data[i]);
        }
        option.xAxis.data.push(this.state.x_data)
        this.setState({x_data: this.state.x_data + 1, num: this.state.num + 1})
        myChart.setOption(option)
        if (this.state.num === 5000){
            this.clearChart()
        }
    }

    clearChart() {
        this.setState({num:0})
        echarts.dispose(chartDom);
        myChart.dispose()
        chartDom = null
        myChart = null
        this.initChart()
    }

这是操作图表的函数，因为直接添加数据测试与不停的setOption(option)测试的结果不一样，所以每次测试都需要2-3天，现在正在挨个排查，不明白具体是什么原因导致的。

Answer 1

echarts是展示系统，并不是分析系统，这么多数据你也分析不出来，你应该考虑你到底是用echarts来做什么的？

你应该考虑数据的窗口化滑动，保证数据量不要那么大。

感觉你是数据在重复的进行计算，虽然你说你5000条的时候清理了，但从逻辑上来说，你的数据还在进行处理，所以CPU负载很高。你最好再撸一下逻辑。