一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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打开的是一个独立视图(独立于View组件),如果要使用导航功能需要补全配置
  • validateOWL框架提供的工具函数,用于校验,组件的props在进行校验时也是调用的该函数。这里使用该函数对用户定义的的params进行校验
  • getEchartsOptionsgetEchartsDatas为传递到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模块。

原文链接:https://juejin.cn/post/7314488568968953866 作者:月到风来

(0)
上一篇 2023年12月21日 上午10:47
下一篇 2023年12月21日 上午10:57

相关推荐

发表评论

登录后才能评论