react echarts的正确使用方式

import React, { Component, createRef } from 'react'

import * as echarts from 'echarts';

export default class index extends Component<any, any> {
    ref = createRef<any>();
    myChart: any = null;
    render() {
        return (
            <div ref={this.ref} style={{  ...(this.props.style || {}) }}></div>
        )
    }

    componentDidMount(): void {
        var myChart = echarts.init(this.ref.current);
        // 绘制图表
        myChart.setOption(this.props.option);
        this.myChart = myChart;
    }


    componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void {
        console.log('componentDidUpdate');
        this.myChart.setOption(this.props.option);
    }
}

  option: {

        title: {

          text: 'ECharts 入门示例'

        },

        tooltip: {},

        xAxis: {

          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

        },

        yAxis: {},

        series: [

          {

            name: '销量',

            type: 'bar',

            data: [5, 20, 36, 10, 10, 20]

          }

        ]

      }

 

对于option的能力，应该使用 _.set 进行数据的merge