Odoo Web：在Odoo16中使用echarts

echarts是一个功能丰富易于使用的开源可视化库，本篇文章将介绍如何通过组件的形式将echarts集成到Odoo中，并通过client action打开该组件展示后台数据。文章中的代码基于Odoo16，模块的源码。

声明Echarts组件

<templates xml:space="preserve">
    <t t-name="echarts_action.Echarts" owl="1">
        <div class="o_echarts_main" id="echarts"/>
    </t>
</templates>

定义模板，注意id="echarts"，echarts会使用这个div对图表进行初始化

/** @odoo-module **/

import { loadJS } from "@web/core/assets";

import { Component, onWillStart, useEffect } from "@odoo/owl";

export class Echarts extends Component {
    setup() {
        onWillStart(async () => {
            await loadJS("/echarts_action/static/lib/echarts/echarts.min.js");
            this.echartsOptions = await this.props.getEchartsOptions();
            this.echartsDatas = await this.props.getEchartsDatas();
            Object.assign(this.echartsOptions, { dataset: this.echartsDatas });
        });
        useEffect(
            () => {
                this.echarts = echarts.init(document.getElementById('echarts'));
                this.echarts.setOption(this.echartsOptions);
            },
            () => []
        );
    }
}

Echarts.template = "echarts_action.Echarts";

Echarts.props = {
    getEchartsOptions: { type: Function },
    getEchartsDatas: { type: Function },
};

• echarts的文件还是比较大的，压缩后还有1M，因此使用loadJS按需加载
  • loadJS使用memoize函数对结果进行了缓存，不会重复加载
• this.props.getEchartsOptions()与this.props.getEchartsDatas()是外部传递的，用于获取图表的配置与图表数据，这两个属性是必填的，类型为Function
• 组件使用echarts的数据集组件来管理数据，这是echarts官方推荐的方式。这也意味着外部传入的getEchartsDatas方法，返回的数据需要以数据集的方式来组织。

使用client action打开Echarts组件

下面的client action展示了如何使用Echarts组件

<t t-name="echarts_action.EchartsAction" owl="1">
    <div class="o_action">
        <Layout display="hasBreadcrumb ? {
            controlPanel: {
                'top-right' : false,
                'bottom-right': false,
                'bottom-left': false,
            }
        } : {controlPanel: false}">
            <Echarts getEchartsOptions.bind="getEchartsOptions" getEchartsDatas.bind="getEchartsDatas"/>
        </Layout>
    </div>
</t>

• hasBreadcrumb：布尔类型，定义client action时，可以在params中设置该值来控制是否显示导航
• 使用.bind指令将方法的执行环境绑定到client action组件，具体参考这篇文章

/** @odoo-module **/

import { Layout } from "@web/search/layout";
import { registry } from "@web/core/registry";
import { getDefaultConfig } from "@web/views/view";
import { useService } from "@web/core/utils/hooks";
import { Echarts } from "../echarts/echarts";

import { Component, useSubEnv, validate } from "@odoo/owl";

export class EchartsAction extends Component {
    setup() {
        useSubEnv({
            config: {
                ...getDefaultConfig(),
                ...this.env.config,
            },
        });

        this.ormService = useService("orm");
        this.actionParams = this.props.action.params;
        validate(this.actionParams, {
            res_model: String,
            get_echarts_options: String,
            get_echarts_datas: String,
            hasBreadcrumb: { type: Boolean, optional: true }
        });
        this.hasBreadcrumb = this.actionParams.hasBreadcrumb;
        this.resModel = this.actionParams.res_model;
    }

    async getEchartsOptions() {
        return await this.ormService.call(
            this.resModel,
            this.actionParams.get_echarts_options,
            []
        );
    }

    async getEchartsDatas() {
        return await this.ormService.call(
            this.resModel,
            this.actionParams.get_echarts_datas,
            []
        );
    }
}

EchartsAction.template = "echarts_action.EchartsAction";
EchartsAction.components = { Layout, Echarts };

registry.category("actions").add("echarts_action", EchartsAction);

• 使用useSubEnv配合getDefaultConfig来补全client action的配置信息，client action不属于Odoo的视图（list/form/kanban），如果要使用导航功能需要补全配置
• validate是OWL框架提供的工具函数，用于校验，组件的props在进行校验时也是调用的该函数。这里使用该函数对用户定义的的params进行校验
• getEchartsOptions与getEchartsDatas为传递到Echarts组件的方法

使用方法

在一些不适合使用client action的情况下例如将图表嵌套到Odoo视图中，可以直接使用Echarts组件，具体的使用方法可以参考上面client action的用法。

大多数情况下使用上面的定义的client action就可以完成echarts图表的展示需求，具体的流程如下：

1. 通过echarts的在线编辑器设计图表，设计完成后将配置保存，作为get_echarts_options方法的返回值
2. 根据图表组织数据集，如果数据比较简单可以直接通过ORM进行查询，如果涉及的数据比较复杂，设计的模型比较多，推荐使用SQL VIEW的方式来提升数据查询效率参考这里
3. 最后定义一个client action，将后端的配置获取与数据获取方法的名称以及方法所在model的名称定义到params字段

使用client action展示图表的详细方式可以参考这个Demo。

如果想将echarts作为Odoo视图（类似于graph视图）展示模型数据，可以参考14.0分支下的echarts_view模块。