【odoo15】猫头鹰owl使用eCharts详细教程

1.文件目录排版，如图

 2.各个文件的作用

china.js 、echarts.min.js 这两文件可以官网去拉，也可以联系博主获取git源代码地址。

eChartsExample.js为页面操作文件，可以用来创建组件还有注册动作。

/** @odoo-module **/
    //必须引入部分
    const { Component, useState ,hooks} = owl;
    const { xml } = owl.tags;
    const { useRef, onMounted, onWillStart} = hooks;
    const {ComponentWrapper} = require("web.OwlCompatibility");

    import core from 'web.core';
    import Widget from 'web.Widget';
    import AbstractAction from 'web.AbstractAction';

    class EchartsWidget extends Component {
        static template= "echartsWidget";
        setup() {
            this.data = useState({ title: "图表首页"})
        }
        mounted (){
            console.log('图表')
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: 100,
                      name: 'A'
                    },
                    {
                      value: 200,
                      name: 'B'
                    },
                    {
                      value: 300,
                      name: 'C'
                    },
                    {
                      value: 400,
                      name: 'D'
                    },
                    {
                      value: 500,
                      name: 'E'
                    }
                  ],
                  roseType: 'area'
                }
              ]
            };
            // 绘制图表
            myChart.setOption(option);
        }
    }

    //实例化qweb页面
    var index_echarts= AbstractAction.extend({
        start: function () {
            self = this
            $(document).ready(function () {
                for(const element of self.el.querySelectorAll(".o_content")){
                    //创建实例并挂载到对应元素中
                    (new ComponentWrapper(self, EchartsWidget)).mount(element);
                }
            });
        },
    })
    core.action_registry.add('owl_index_echarts_view', index_echarts);
    return index_echarts

xml/eChartsExample.xml主要用来编写组件模板，这里用owl编写。

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
     <t t-name="echartsWidget" owl="1">
        <div id="main" style="width:100%;height: 100%;">123</div>
     </t>
</templates>

views/all_menuitem.xml用来给页面添加动作，主要用来测试效果。

<?xml version="1.0"?>
<odoo>
    <data>
        <record id="action_echarts_" model="ir.actions.client">
            <field name="name">index_owl_page</field>
            <field name="tag">owl_index_echarts_view</field>
            <field name="target">current</field>
        </record>
        <menuitem name="数据展示" id="home_page_menuitem" action="action_echarts_"/>
    </data>
</odoo>

最后，在__manifest__.py引入这些文件，注册到全局就大功告成了！

# -*- coding: utf-8 -*-
{
    'name': "ECharts Example 15",
    'summary': """
       ECharts Example
        """,
    'description': """
       ECharts Example
    """,
    'author': "小白",
    'website': "",
    'category': '',
    'data': [
        'views/all_menuitem.xml',
    ],
    'version': '15.0.0.1',
    'depends': [],
    'assets': {
        'web.assets_qweb': [
            "/eChartsExample/static/src/xml/eChartsExample.xml",
        ],
        "web.assets_backend": [
            "/eChartsExample/static/src/js/echarts.min.js",
            "/eChartsExample/static/src/js/china.js",
            "/eChartsExample/static/src/js/eChartsExample.js",
        ],
    },
}