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>