踩 ECharts 5 的坑…… 想笑?

在vue中使用 ECharts 遇到的坑。想笑……..

1. npm 安装ECharts

   npm install echarts --save
   复制代码

2. 有main.js 引入 ECharts

   import echarts from 'echarts';
   // 或者按需引入
   import echarts from 'echarts/lib/echarts';
   复制代码

3. 在组件中使用

   

4. 图表没出来 ，打开控制台一看，一脸迷茫

   什么情况，之前都是这样操作的，怎么就报错了。

   

5. 没办法只能先各种搜索，各种百度。仔细一看没错呀，一模一样。

   没有看文章的出产日期 。 哎，被自己的神操作，哈哈 ?…………连百度都不会用。

   

6. 后来才知道 自己下载的包是 "echarts": "^5.1.0", 在 v5 版本中 不支持 v4 的 import echarts from 'echarts'; 引入方式。

   

7. 解决方案 ：

   • 在 v5 版本中使用 全局引用

     import * as echarts from 'echarts';
     // 按需引入
     import * as echarts from 'echarts/lib/echarts';
     复制代码

   • 在 v5 中新增 了按需引入 接口

     import * as echarts from 'echarts/core';
     import { BarChart } from 'echarts/charts';
     import { GridComponent } from 'echarts/components';
     // 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
     import { CanvasRenderer } from 'echarts/renderers';
     
     echarts.use([BarChart, GridComponent, CanvasRenderer]);
     复制代码

   • 卸载 "echarts": "^5.1.0", 安装 低版本

     npm uninstall echarts             //卸载
     npm install echarts@4.8.0 --save  //安装 
     复制代码

   总结

   • 使用百度也需要查看出产日期 ，多查几条看看。
   • 多关注 新技术的特性，与旧版本有什么不同 。

「点赞、收藏和评论」

❤️被自己可爱了?.❤️，鼓励笔者创作更好的文章，谢谢?大家。