Ant design pro引入Echarts报错：TypeError: Cannot read property 'x_data' of undefined

朴灿烈づ我的快乐病毒、 2022-03-06 15:58 489阅读 0赞

**目录**

（1）报错：TypeError: Cannot read property 'x\_data' of undefined

（2）报错：× Error: Component series.line not exists. Load it first

（3）报错：Unexpected token ：

--------------------

### （1）报错：TypeError: Cannot read property 'x\_data' of undefined ###

Ant design pro中引入Echarts图表是十分方便的，在网上找了一些例子，按照下面的链接进行了配置，发现报错TypeError: Cannot read property 'x\_data' of undefined，这个问题很简单，但对于初学者来说可能会有些麻烦，

[https://www.missshi.cn/api/view/blog/5b05226413d85b3c71000000][https_www.missshi.cn_api_view_blog_5b05226413d85b3c71000000]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70][]

**解决办法：**

在你的**router.js路由文件中一定要引入你所用到的相应models文件**，比如上面图片中的报错说找不到‘x\_data’定义，而这个参数是从models下的test.js文件引入的，所以在router.js需要引入‘test’这个models文件

![20190321100758504.png][]

### （2）报错：× Error: Component series.line not exists. Load it first ###

**解决办法：**

替换导入echars的语句，如下所示：

// import echarts from 'echarts/lib/echarts'; 
    import echarts from 'echarts';

### （3）报错：Unexpected token ：<div id="main" style="\{ \{" width:="" 400,="" height:="" 400="" \}\}=""></div> ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1][]

**解决办法：**

将下面的一行代码进行替换：

替换后：

[https_www.missshi.cn_api_view_blog_5b05226413d85b3c71000000]: https://www.missshi.cn/api/view/blog/5b05226413d85b3c71000000
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70]: /images/20220302/c67cb154b4014dd78d6bda0a43276664.png
[20190321100758504.png]: /images/20220302/cf9e9ee57313434d98a3d325f3eade66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1]: /images/20220302/57c784a7bf584cf3b303bb248b0fe95f.png