如何从odoo中加入echarts

odoo14中添加echarts图表

主要的文件结构

我的代码已经放到gitee仓库地址，懒得写代码的童鞋们可以直接去下载来看：https://gitee.com/qinzhihui/odoo14_venv

 

 1.引入固定的需要导入的echarts文件

 

 2.添加出菜单和动作

 

 

 

 下面是代码：

<?xml version="1.0"?>
<odoo>
    <data>
        <!--定义客户端动作-->
        <record id="action_echarts_china" model="ir.actions.client">
            <field name="name">Echarts</field>
            <field name="tag">load_echarts2.echarts_sale_order_template</field>
        </record>

        <!--根菜单-->
        <menuitem
            id='menu_echarts'
            name='数据展示'
            sequence="1" />
        <!--根菜单绑定动作-->
        <menuitem
            id="menu_echarts_china"
            name="销售数据"
            action="action_echarts_china"
            parent='menu_echarts'
            sequence="1"/>
    </data>
</odoo>
3.定义js去调用qweb界面

 

 下面是js代码：

odoo.define('load_echarts_data_show', function (require) {
    "use strict";
    var core = require('web.core');
    var Widget = require('web.Widget');
    var AbstractAction = require('web.AbstractAction');

    var Echarts = AbstractAction.extend({
        // 对应xml中t-name
        template: 'echarts_sale_order_template',

        init: function(parent, data){
            return this._super.apply(this, arguments);
        },

        start: function(){
            this._setTitle('odoo&echarts');
            return true;
        },
    });
    core.action_registry.add('load_echarts2.echarts_sale_order_template', Echarts);

});
4.定义qweb

 

 下面是定义qweb的代码：

 

<?xml version='1.0' encoding='UTF-8'?>
<templates id='template' xml:space='preserve'>
    <t t-name="echarts_sale_order_template">
        <div id="main" style="width:100%;height: 100%;"></div>
        <script>
            option = {
                title: {
                    text: '销售数据',
                    subtext: '每月销售',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {
                                value: 1048, name: '搜索引擎'
                            },
                            {
                                value: 735, name: '直接访问'
                            },
                            {
                                value: 580, name: '邮件营销'
                            },
                            {
                                value: 484, name: '联盟广告'
                            },
                            {
                                value: 300, name: '视频广告'
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            }
        </script>
    </t>
</templates>


5.最后把

 

 以下是代码：

<?xml version="1.0"?>
<odoo>
    <data>
         <template id="load_echarts_sale_order_data" name="my model echarts data" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/load_echarts/static/src/js/echarts.min.js"></script>
                <script type="text/javascript" src="/load_echarts/static/src/js/china.js"></script>
                <script type="text/javascript" src="/load_echarts/static/src/js/load_echarts.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

最后出来的效果：

 

 

 加油(ง •_•)ง你也可以!