odoo 集成Echarts 实现自定义图表页面

这篇文章将讲解Echarts的图表引入到odoo中，实现数据可视化。其中包括两个部分：1.引入第三方功能，集成到odoo中；2.实现自定义页面，将效果展示出来，并适用于odoo中。

引入Echarts等第三方包在odoo中

效果图，这里不仅引用了echarts，顶部的搜索框和底部的表格是利用layui实现：

1. 下载相关第三方js压缩包，如echarts.min.js

连接地址：echarts.apache.org/zh/builder.…

在上方地址选择自己想下载的echarts 版本和需要的图表模型和功能集；echarts官方会压缩为一个min包提供给用户使用，如📎echarts.min.js

1. 如下方我将下载的第三方js压缩包放在此路径下

2. 依据odoo14对js和scss的前置引用，将文件引入，这里我不仅引用了echarts，也引入了layui这个轻量级ui进来

红色框是我引入的第三方文件，而黄色框部分是我后面要自定义页面的js。由于我要在自定义页面用上echarts和layui 所以必须把黄色框部分放在下面

2. 自定义页面，并实现echarts引入

1. 首先需要一个qweb语法写的 template页面模板

2. 在这里自定义菜单栏

3. 需要继承 AbstractAction，与上面菜单栏打通，让其指向这里的自定义action动作在。