ODOO引用Echarts数据展示

作为一个后端开发，首先想到的是将需要的数据进行处理反馈给前端。

具体如下：

然后就是专门的echarts模块（我这样写主要是因为echarts会用到的地方比较多，后续直接调用）

1、

2、echarts_action.xml

3、actions.js

 ir_actions_act_window_expense_income_echarts: function (action, options) {
             var self = this;
             console.log(action)
             var dialog = new Dialog(
                 this,
                 _.extend({
                     $content: QWeb.render('Expense_Income_Chart', {
                         data: action.data,
                         help_text: action.help_text,
                         flags: action.flags,
                     }),
                     size: action.size || 'large',
                     title: action.name || _t('销售情况'),
                     buttons: [
                         {
                             text: _t('Close'),
                             close: true
                         }
                     ],
                 }, options)
             );

             dialog.opened().then(function () {
                 self._rpc({
                     route: '/web/sales_report_chart',
                     params: {
                         data: action.data
                     }
                 }).then(function (result) {
                     console.log(result)
                     var myChart = echarts.init(document.getElementById('chart-expense-income-report'));

                     var waterMarkText = 'ECHARTS';
                     var themeJson = result.hes_objs;
                     var canvas = document.createElement('canvas');
                     var ctx = canvas.getContext('2d');
                     canvas.width = canvas.height = 100;
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
                     ctx.globalAlpha = 0.08;
                     ctx.font = '20px Microsoft Yahei';
                     ctx.translate(50, 50);
                     ctx.rotate(-Math.PI / 4);
                     ctx.fillText(waterMarkText, 0, 0);
                     if (result.total_amount) {
                         var option = {
                         backgroundColor: {
                             type: 'pattern',
                             image: canvas,
                             repeat: 'repeat'
                         },
                         tooltip: {},
                         title: [{
                             text: result.title,
                             subtext: '总计： ' + result.sum_sales,
                             x: '25%',
                             textAlign: 'center'
                         },
                             {
                             text: '类型占比',
                             x: '75%',
                             textAlign: 'center'
                         }],
                         grid: [{
                             top: 100,
                             width: '70%',
                             bottom: '5%',
                             height: '80%',
                             left: 10,
                             containLabel: true
                         },],
                         xAxis: [{
                             type: 'category',
                             data: result.expense_name,
                             axisLabel: {
                                 interval: 0,
                             },
                             splitLine: {
                                 show: false
                             }
                         },],
                         yAxis: [{
                             type: 'value',
                             splitLine: {
                                 show: false
                             },
                             axisLabel: {
                                 interval: 0,
                                 rotate: 30,
                                 formatter: '{value} 元'
                             },
                         },],
                         series: [{
                             type: 'bar',
                             stack: 'chart',
                             z: 3,
                             label: {
                                 normal: {
                                     position: 'top',
                                     show: true
                                 }
                             },
                              itemStyle: {
                                         normal: {
                                             color: '#55A9AF'
                                         }
                                     },
                             data: result.total_amount
                         }, {
                             type: 'pie',
                             radius: [0, '30%'],
                             center: ['75%', '30%'],
                             data: Object.keys(themeJson).map(function (key) {
                                 return {
                                     name: key.replace('.js', ''),
                                     value: themeJson[key]
                                 }
                             }),
                             itemStyle: {
                                 emphasis: {
                                     shadowBlur: 10,
                                     shadowOffsetX: 0,
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             }
                         }]
                     };
                     }
                     else {
                         var option = {
                             title: {
                                 text: "无数据！",
                             },
                         }
                     }
                     myChart.setOption(option);
                 }).fail(function (error, event) {
                     event.preventDefault();
                 }).always(function () {
                 });
             });
             return dialog.open();
         },

js示例