美文网首页
引用获取实例

引用获取实例

作者: 曼木子 | 来源:发表于2021-07-22 13:51 被阅读0次

    子组件

    import * as echarts from 'echarts';
    import React,{forwardRef} from "react";
    import ReactECharts from 'echarts-for-react';
    // var chartDom = document.getElementById('main');
    // var myChart = echarts.init(chartDom);
    // var option;
    
    const Line = (props,ref) => {
        const {data} = props
        const getOption = () => {
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    type: 'line'
                }]
            };
            return option
        }
    
        return (
            <>
                <ReactECharts option={getOption()}  ref={ref}/>
            </>
        )
    
    }
    
    export default  forwardRef(Line);
    
    

    父组件

      const ref = createRef();
      useEffect(() => {
        var echarts = require('echarts')
        const { current } = ref;
        const echartsInstanceone = current.getEchartsInstance();
        echartsInstanceone.group = 'group1';
        console.log(echartsInstanceone)
        echarts.connect('group1')
      }, [])
    
    render中
    Line data={item} ref={ref} ></Line></>
    

    相关文章

      网友评论

          本文标题:引用获取实例

          本文链接:https://www.haomeiwen.com/subject/ljosmltx.html