Odoo自定义引入echart页面

第一步: 创建客户端动作并直接绑定在根目录上

views/home_view.xml

<?xml version="1.0"?>

<odoo>

    <data>

        <!--定义客户端动作-->

        <record id="action_echarts_china" model="ir.actions.client">

            <field name="name">Echarts</field>

            <field name="tag">load_echarts.load_echarts_china</field>

        </record>

        <!--根菜单绑定动作-->

        <menuitem id="menu_echarts_china" name="Echarts" action="action_echarts_china" sequence="1"/>

    </data>

</odoo>

第二步:准备好模板

static/src/xml/load_echarts.xml

<?xml version='1.0' encoding='UTF-8'?>

<templates id='template' xml:space='preserve'>

    <t t-name="echarts_china_template">

        // t标签内写入echarts的代码

        <div id="main" style="width:1100px;height: 800px;"></div>

        <script....>

    </t>

</templates>

第三步: 注册客户端动作打开准备好的模板

static/src/js/load_echarts.js

odoo.define('load_echarts', function (require) {

    "use strict";

    var core = require('web.core');

    var Widget = require('web.Widget');

    // 定义打开模板

    var Echarts = Widget.extend({

        // 模板名称 对应上面xml中t-name

        template: 'echarts_china_template',

        init: function(parent, data){

            return this._super.apply(this, arguments);

        },

        start: function(){

            return true;

        },

    });

    // 将上面定义的打开模板注册成客户端动作 动作名对应client_action中的tag

    core.action_registry.add('load_echarts.load_echarts_china', Echarts);

})

第四步:将注册动作的js和需要用到的js库加入到odoo中

views/include_js.xml

<?xml version="1.0"?>

<odoo>

    <data>

         <template id="load_echarts" name="load_echarts" inherit_id="web.assets_backend">

            <xpath expr="." position="inside">

                // echarts

                <script type="text/javascript" src="/load_echarts/static/src/js/echarts.min.js"></script>

                // echarts使用中国地图所需的js

                <script type="text/javascript" src="/load_echarts/static/src/js/china.js"></script>

                // 上面注册动作的js

                <script type="text/javascript" src="/load_echarts/static/src/js/load_echarts.js"></script>

            </xpath>

        </template>

    </data>

</odoo>

最后记得将所有xml文件写入manifest中

注意xml模板是放在qweb项中

{

    'name': '引入echarts',

    'version': '10.1.0',

    'description': '',

    'author': 'grey27',

    'data': [

        'views/include_js.xml',

        'views/home_view.xml',

    ],

    'qweb': ['static/src/xml/load_echarts.xml'],

}

最终效果

在根菜单栏上直接可以打开echarts