odoo集成Echart报表和升级到最新nvd3报表

1：安装应用：

此应用集成了echart 和 nvd3 最近版本，和对报表标准的扩展。

项目地址：https://github.com/billhepeng/web_reportchart

报表测试地址：https://github.com/billhepeng/web_reportchart_test

安装此应用后报表会出来水平柱状图报表：

 

2：在自己项目中创建人echart 报表

自定义报表目录结构:

需要的文件:

graph_rendererttest.js :定义报表JS 此文件用户于展示echart报表，可以在些js中获取页面数据。

base.xml： 用户于定义报表图标，是否展示报表图。

templates.xml : 引用文件

web_reportchart.css：报表的样式，如报表图标显示为什么样式，样式引用于Font Awesome

testreport.xml : 测试报表

graph_rendererttest.js

odoo.define('web.GraphRenderertest', function (require) {

    'use strict';

    var ajax = require('web.ajax');

    var core = require('web.core');

    var Widget = require('web.Widget');

    var field_utils = require('web.field_utils');

    var config = require('web.config');

    //var data = require('web.data');

    var qweb = core.qweb;

    var _t = core._t;

    //扩展于标准报表生成，用于生成自己的报表。

    var GraphRenderer = require('web.GraphRenderer');

    GraphRenderer.include({

        //自己定义报表，名称，配合base.xml中 data-mode="echart1"  注意在标准中定义echart1-echart9  9个报表可用于扩展

        //名字必需是echart1-echart9   函数名称必需命名为_render+ data-mode + Chart的名称

        _renderEchart1Chart: function (stateData) {

               var self = this;

            //以下是数据获取方式 可以从页面获取报表数据

    echarts.init($svgContainer[0]).setOption({

base.xml：

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">

    <!--增加自己定义报表配置是否显示，和显示的位置 data-mode 必需从echart1-echart9  -->

    <!--class 样式可以通过  fa-echart1-chart 使用 Font Awesome-->

    <t t-extend="GraphView.buttons">

           <t t-jquery="div.btn-group:last" t-operation="after">

               <t t-if="type === 'echart1'">

                   <button class="btn btn-secondary fa fa-echart1-chart o_graph_button" title="echart test" aria-label="echart test" data-mode="echart1"/>

               </t>

            </t>

        </t>

</templates>

templates.xml：

<!--增加自己定义报表图像-->

<template id="assets_backend" name="graph_view_test" inherit_id="web.assets_backend"  priority="1000">

     <xpath expr="//script[@src='/web_reportchart/static/src/js/graph_controller1.8.6.js']" position="after">

        <link href="/web_reportchart_test/static/src/css/web_reportchart.css" rel="stylesheet" type="text/css"/>

        <script type="text/javascript" src="/web_reportchart_test/static/src/js/graph_rendererttest.js"></script>

    </xpath>

</template>

testreport.xml

<!--自己定义报表  echart="True" 设置为True 显示 echart 报表，否则显示默认Nvd3报表，type为默认需要显示的报表类型-->

<record id="helpdesk_ticket_view_graph_analysis_test" model="ir.ui.view">

    <field name="name">helpdesk.ticket.graph.analysis.test_1</field>

    <field name="model">helpdesk.ticket</field>

    <field name="arch" type="xml">

        <graph string="Helpdesk Ticket Analysis" stacked="True" echart="True"  type='echart1'>

            <field name="team_id" type="row"/>

            <field name="stage_id" type="col"/>

        </graph>

    </field>

</record>