有个项目的需求将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