TypeError: Cannot read properties of undefined (reading '__original')

cheungww commented 2 years ago

问题：在 React 里面使用报错了，如下图

依赖：

"dependencies": {
    "echarts": "^5.0.2",
    "echarts-dagre": "^0.1.0",
}

Code(option 完全是按照你此项目 test/build.html)：

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

const option = {
  series: [
      {
          type: 'graph',
          layout: 'dagre',
          symbolSize: 20,
          roam: true,
          label: {
              normal: {
                  show: true,
                  position: 'right'
              }
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
              normal: {
                  textStyle: {
                      fontSize: 20
                  }
              }
          },
          data: [{
              name: '节点1'
          }, {
              name: '节点2'
          }, {
              name: '节点3'
          }, {
              name: '节点4'
          }],
          links: [{
              source: '节点1',
              target: '节点2',
              symbolSize: [5, 20]
          }, {
              source: '节点1',
              target: '节点3'
          }, {
              source: '节点2',
              target: '节点3'
          }, {
              source: '节点2',
              target: '节点4'
          }, {
              source: '节点1',
              target: '节点4'
          }]
      }
  ]
};

const style = {
  height: 600,
  width: '100%'
};

const Index: FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chart = echarts.init(chartRef.current);
      chart.setOption(option);
    }
    console.log('chartRef.current', chartRef.current, 'echarts', echarts);
  }, [chartRef.current]);

  return (
    <div ref={chartRef} id="main" style={style}></div>
  );
};

export default Index;

想请教一下大佬，这个是什么问题，是我漏配置了什么吗？ @cnberg @Ovilia

cheungww commented 2 years ago

我直接在此项目里的 test/build.html 里面直接更改 echart 为 5.1.1 版本却可以运行正常 test/build.html

<html>
    <head>
        <meta charset='utf-8'>
        <!-- <script src='https://cdn.bootcss.com/echarts/3.1.10/echarts.min.js'></script> -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
        <script src='../dist/echarts-dagre.js'></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id='main'></div>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                series : [
                    {
                        type: 'graph',
                        layout: 'dagre',
                        symbolSize: 20,
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                position: 'right'
                            }
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        data: [{
                            name: '节点1'
                        }, {
                            name: '节点2'
                        }, {
                            name: '节点3'
                        }, {
                            name: '节点4'
                        },
                        {
                            name: '节点5'
                        }
                    ],
                        links: [{
                            source: '节点1',
                            target: '节点2',
                            symbolSize: [5, 20]
                        }, {
                            source: '节点1',
                            target: '节点3'
                        }, {
                            source: '节点2',
                            target: '节点3'
                        }, {
                            source: '节点2',
                            target: '节点4'
                        }, {
                            source: '节点1',
                            target: '节点4'
                        }, {
                            source: '节点5',
                            target: '节点4'
                        }]
                    }
                ]
            };

            chart.setOption(option);

        </script>
    </body>
</html>

@ pissang 想请教下大佬，此库在 react 项目里引用是会出什么问题吗？

surabande commented 1 year ago

I am also getting same issue 'Cannot read properties of undefined (reading '_in')'. Seems need to handle some cases.

omerfaruk84 commented 1 year ago

Hi, Were you able to solve this issue? Thanks

andricX91 commented 1 year ago

I'm using angular and It work's fine on my side. Import dagre algorithm like this:

import * as dagre from '../../dagre/echarts-dagre'; dagre.title = 'Test';

riteshjagga commented 1 month ago

Above solution didn't work for me. Getting the same issue.

ecomfe / echarts-dagre

TypeError: Cannot read properties of undefined (reading '__original') #8