odoo echarts

### 集成ECharts到Odoo 为了在 Odoo 中集成 ECharts 来实现数据可视化，需遵循特定步骤来确保图表能够正常工作并提供所需的数据展示功能[^1]。 #### 准备资源文件 首先应准备必要的 JavaScript 文件 `ECharts.min.js` 和地理坐标库 `China.js` 并放置于自定义模块下的静态目录 `/static/js/` 下。这一步骤对于加载地图类型的图表尤为重要[^3]。 ```xml <!-- template.xml --> <script type="text/javascript" src="/module_name/static/src/js/ECharts.min.js"></script> <script type="text/javascript" src="/module_name/static/src/js/china.js"></script> ``` #### 创建视图模板 接着要在 XML 模板中创建一个容器用来承载 ECharts 图表实例，并通过 QWeb 模板引擎渲染 HTML 结构： ```xml <template id="echarts_container"> <div class="o_echarts_wrapper"> <!-- 容器元素 --> <div t-att-id="'chart_' + str(uuid.uuid4())" style="width: 600px;height:400px;"></div> </div> </template> ``` #### 编写JavaScript逻辑 最后编写初始化图表所需的 JavaScript 脚本，这部分代码负责配置选项以及设置初始数据源： ```javascript odoo.define('module_name.echarts', function (require) { "use strict"; var core = require('web.core'); var AbstractAction = require('web.AbstractAction'); // 继承抽象动作类以便扩展其行为 var MyChartWidget = AbstractAction.extend({ template: 'echarts_container', start: function () { var chartDom = this.$el.find('div')[0]; // 初始化 echarts 实例对象 let myChart = echarts.init(chartDom); // 设置图表配置项和数据集 const option = { title : { text: '销售统计' }, tooltip : {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项显示图表 myChart.setOption(option); return this._super.apply(this, arguments); } }); core.action_registry.add('my_chart_widget', MyChartWidget); return MyChartWidget; }); ``` 上述过程展示了如何将流行的中国开源项目 ECharts 成功嵌入至企业级 ERP 系统——Odoo 当中，从而增强系统的数据分析能力。