有个项目的需求将odoo上的销售记录在中国地图上进行直观展示,了解了一下echart框架挺符合的,记录一下在odoo中如何引入echarts
思路是调用odoo的qweb,在qweb中引入js从而使用echarts.
- 首先做一个普通的向导模型作为qweb页面的入口(没找到方法在菜单栏上的action直接打开qweb的方法)
class EchartsWizard(models.Model):
_name = 'test_model.echarts.wizard'
_description = u'引入echarts的向导模块'
name = fields.Char()
# 既然使用的向导,那么也可以设几个字段做数据筛选...
# 打开qweb方法
def render_qweb(self):
return {
'name': u'echarts',
'type': 'ir.actions.report.xml',
'report_name': 'test_model.echarts_qweb',
'report_type': "qweb-html",
}
# 传递数据方法
def transfer_data(self):
return ["apple", "banana", "peach", "pear", "grape", "orange"]
<?xml version="1.0"?>
<odoo>
<data>
<!--向导视图-->
<record id="echarts_wizard_form" model="ir.ui.view">
<field name="name">echarts.wizard.form</field>
<field name="model">test_model.echarts.wizard</field>
<field name="arch" type="xml">
<form >
<group>
<field name="name"/>
</group>
<footer>
<!--按钮绑定模型中打开qweb的方法-->
<button name='render_qweb' string='确定' type='object' class='oe_highlight'/>
</footer>
</form>
</field>
</record>
<!--向导动作-->
<record id="echarts_wizard_action" model="ir.actions.act_window">
<field name="name">引入echarts</field>
<field name="res_model">test_model.echarts.wizard</field>
<field name="view_mode">form</field>
<field name='target'>new</field>
</record>
<menuitem id="echarts_wizard_menu" name="echarts" action="echarts_wizard_action" sequence="5"/>
</data>
</odoo>
-
这就完成了一个简单的向导,可以增加写字段后面的echarts展示做一些数据筛选
image.png
-
设置qweb报表
正常的报表入口都是在模型的打印下拉菜单中,使用menu屏蔽这个入口
<report
id="echarts_report" // 报表id
string="echarts" // 报表名字
model="test_model.echarts.wizard" // 报表对应的模型
report_type="qweb-html" // 报表类型 选择html类型
file="test_model.echarts_qweb" // qweb_id
name="test_model.echarts_qweb" // qweb_id
menu="False" // 打印菜单下拉不可见
/>
- qweb模板
<?xml version="1.0"?>
<odoo>
<data>
// qweb_id
<template id="echarts_qweb">
// 在页面上设个div标签作为echarts的容器
<t t-call="report.html_container">
<div id="main" style="width:600px;height: 600px;"></div>
</t>
// 引入echarts.js,我这里使用的是cdn,也可以将js文件下载下来作为本地文件引用
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
// 引入中国地图js,但是这个cdn不太稳定,不一定能访问
<!-- <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>-->
// 以下就是js代码了
<script>
// 用于接收模型穿过来的数据,docs代表模型
var data = <t t-esc="docs.transfer_data()"></t>
console.log(data)
// 下面开始就是echarts的常规操作了,这里放一个官方入门示例,x轴坐标使用odoo中传入的数据
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: data
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
window.onresize = function(){
myChart.resize();
}
</script>
</template>
</data>
</odoo>
-
结果展示
image.png
-
整个项目简单的骨架:
image.png
最后这个界面如何做的足够好看就看你的前端功力了,目前还存在点瑕疵就是不能直接通过菜单栏直接打开qweb,欢迎知道方法的小伙伴和我交流一下,另外就是odoo向qweb中传入数据中文的编码问题,16进制的中文在前端会显示乱码,py2字符的编码真是难搞,我尝试过向前端传输十六进制值但是会js报错,
更新
- 传值中文的解决方法
由于我实在odoo10进行的测试 ,使用的是python2,使用中文要使用u''字符串,但是js语法并不认识u'',导致语法报错,最后只能手动去除'u'了
def transfer_data(self):
data = [u'中文1',u'中文2',u'中文3',u'中文4',u'中文5',u'中文6',]
serialize_data = str(data).replace('u\'','\'')
return serialize_data
网友评论