react hook + echarts折线图

新建一个组件

import React,{useEffect,useState} from 'react'
import * as echarts from 'echarts';


const index = props =>{
    const {height,option} = props
    const [id,setId] = useState()


    useEffect(() => {
        let id = ('_' + Math.random()).replace('.', '_');
        setId(id)
    },[])

    useEffect(() => {
        if(id){
            const myChart = echarts.init(document.getElementById(id));     
            myChart.setOption(option);
        }
    },[id])

    return (
        <div id={id} style={{ height:height}}  >
            
        </div>
    )
}
export default index

option.js 负责渲染的内容

option1.js

export default {
    // title: {
    //     text: '堆叠区域图'
    // },
    tooltip: {
        trigger: 'axis',
        formatter: '{b0} <br ?>{a0}: {c0}<br />{a1}: {c1}'
    },
    legend: {
        type: 'plain',
        left: true,
        icon: "roundRect",
        textStyle: {
            color: '#000000'
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisLabel: {
                formatter: function (value, idx) {
                    var date = new Date(value);
                    return idx === 0 ? value : [date.getMonth() + 1, date.getDate()].join('-');
                }
            },
            boundaryGap: false,
            data: ['12-13', '12-20', '12-27', '1-03', '1-10']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '在线',
            type: 'line',
            areaStyle: {
                color: '#6699FF'
            },
            itemStyle: {
                normal: {
                    color: '#6699FF',
                    lineStyle: {
                        color: '#6699FF',
                        width: 2,
                        type: 'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [200, 200, 200, 200, 200]
        },
        {
            name: '全部',
            type: 'line',
            areaStyle: {
                color: '#A1E6CE'
            },
            itemStyle: {
                normal: {
                    color: '#A1E6CE',
                    lineStyle: {
                        color: '#A1E6CE',
                        width: 2,
                        type: 'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [1000, 1000, 1000, 1000, 1000]
        },
    ]
}

父组件调用

import LineDiv from '@/components/....'
import option1 from './components/option/....'
....
const index = props => {

	....
	return (
		<>
			...
			<LineDiv option={option1} height={"30vh"} ></LineDiv>
		</>
	
	)
}

数据重新渲染的时候修改option1
父组件就需要修改

import LineDiv from '@/components/....'
import option1 from './components/option/....'
....
const index = props => {
	const [option, setoption] = useState(0)
	useEffect(() => {
        setoption(option1)
    }, [])
    
	....
	return (
		<>
			...
			<LineDiv option={option1} height={"30vh"} ></LineDiv>
		</>
	
	)
}

“react”: “^16.8.6”,
“echarts”: “^5.0.1”,