Odoo中引入Echarts实现数据可视化
介绍：
这个模块实现将echarts用到Odoo13中做前端展示，利用Ajax从Odoo接口中获取数据库数据，最终呈现数据大屏的效果。 模块基于Odoo13，Echarts 4.9.0 ，其他版本odoo可能要做小幅调整。文末附模块的github地址。
引入模块结构：
1. 创建客户端动作并直接绑定在根目录上
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'
name='My echarts'
sequence="1" />
<!--根菜单绑定动作-->
<menuitem
id="menu_echarts_china"
name="Echarts"
action="action_echarts_china"
parent='menu_echarts'
sequence="1"/>
<!--定义客户端动作2-->
<record id="action_echarts_bargraph" model="ir.actions.client">
<field name="name">bargraph</field>
<field name="tag">load_echarts2.load_echarts_bargraph</field>
</record>
<!--二级菜单绑定动作-->
<menuitem
id="menu_echarts_bargraph"
name="bargraph"
action="action_echarts_bargraph"
parent="menu_echarts"
sequence="2" />
</data>
</odoo>
2. 准备好模板
load_echarts2.xml
<?xml version='1.0' encoding='UTF-8'?>
<templates id='template' xml:space='preserve'>
<t t-name="echarts_bargraph_template">
<div id="main" style="width:1900px;height: 900px;"></div>
<script>
//alert('木叶飞舞之处')
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'light');
// 指定图表的配置项和数据
var option = {
title: {
text: '(本月)邻寻客诉单售后原因分布'
},
tooltip: {
text: '售后原因分布'
},
legend: {
data:['售后原因','数量(单)']
},
xAxis: {
name: '售后原因',
data: ["不满意","腐坏","破损","取消订单","退差价","少发","错发","缺货","少重"]
},
yAxis: {
name: '售后单数量(单)'
},
series: [{
// name: '数量(单)',
type: 'bar',
data: []
},]
};
// 动态获取数据
$.ajax({
cache: false,
type: "POST",
url: "http://localhost:8069/inserttest",
data: null,
dataType: "json", // 返回数据形式为json
error: function(request) {
console.log("请求失败！")
},
success: function(result) {
console.log("发送请求成功!!");
console.log(result);
for (i = 0; i < 9; i++) {
console.log(i)
console.log(result[0][i])
option.series[0].data.push(result[0][i]);
};
console.log(option.series)
myChart.setOption(option);
}
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</t>
</templates>
3. 注册客户端动作打开准备好的模板
load_echarts.js
odoo.define('load_echarts', 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_china_template',
init: function(parent, data){
return this._super.apply(this, arguments);
},
start: function(){
this._setTitle('odoo&echarts');
return true;
},
});
// 对应client_action中的tag
core.action_registry.add('load_echarts.load_echarts_china', Echarts);
})
odoo.define('load_echarts2', function (require) {
"use strict";
var core = require('web.core');
var Widget = require('web.Widget');
var AbstractAction = require('web.AbstractAction');
var bargraph = AbstractAction.extend({
// 对应xml中t-name
template: 'echarts_bargraph_template',
init: function(parent, data){
return this._super.apply(this, arguments);
},
start: function(){
this._setTitle('my bargraph');
return true;
},
});
// 对应client_action中的tag
core.action_registry.add('load_echarts2.load_echarts_bargraph', bargraph);
})
4. 将注册动作的js和需要用到的js库加入到odoo中
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">
<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>
5. 利用Ajax动态获取数据库数据
5.1 js中用Ajax获取接口数据
// 动态获取数据
$.ajax({
cache: false,
type: "POST",
url: "http://localhost:8069/inserttest",
data: null,
dataType: "json", // 返回数据形式为json
error: function(request) {
console.log("请求失败！")
},
success: function(result) {
console.log("发送请求成功!!");
console.log(result);
for (i = 0; i < 9; i++) {
console.log(i)
console.log(result[0][i])
option.series[0].data.push(result[0][i]);
};
console.log(option.series)
myChart.setOption(option);
}
});
5.2 在Odoo的controllers目录下写接口函数
我数据库中有linxun.complaint_case这个表，读者可以按照自己情况做调整，或者直接返回一个写死的json数据都行。
from odoo import http
from odoo.http import request
import time
import datetime
import json
from odoo import api
from odoo.tools import misc
import logging
_logger = logging.getLogger(__name__)
class Academy(http.Controller):
# 创建接口测试
@http.route('/inserttest', auth='public', type='http',methods=['POST','GET'], csrf=False)
def inserttest(self):
_logger.info('火亦生生不息')
order_count_list = []
complaint_orders_obj = http.request.env['linxun.complaint_case']
# 获取本月一号
first_day_this_month_tmp = datetime.date.today().replace(day=1)
first_day_this_month = datetime.datetime.strftime(first_day_this_month_tmp, '%Y-%m-%d')
for r in range(1,10):
o_count = complaint_orders_obj.sudo().search_count([('complaint_reason','=', r),('created_at','>=',first_day_this_month)])
order_count_list.append(o_count)
data_list = order_count_list
return json.dumps([data_list])
效果图展示
模块git地址：
https://github.com/zhuangweijia/load_echars_to_odoo.git
如果帮到你，请动动可爱的小手点个赞，阿里噶多「狗头」