Odoo丨如何使用Odoo集成ECharts ？

本期内容

Odoo集成ECharts

Odoo框架中自带的视图非常丰富，能给我们展示的数据关系和标准的流程体系。但是在实际的业务场景中，除了能将数据关系和流程体系展示出来，我们希望能够以更直观更美观更具科技感的形式的展示多维度的业务数据，以便给决策者提供依据。

故此数据可视化的应用场景也开始变得更加多样且视觉要求更高，下面就给大家介绍一下Odoo如何集成ECharts，在Odoo上实现数据的可视化场景。

*ECharts介绍*

ECharts，一个使用 JavaScript 实现的开源可视化库。可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭，Echarts作为国内的优秀可视化库，兼容大部分场景，很容易进行定制化开发，所以选择使用Echarts。

更多详细的内容，可查看官方文档 ⬇

https://echarts.apache.org/zh/index.html

*如何使用Odoo*

*集成ECharts*

页面效果

我们希望使用 Echarts 来做活动分布和活动统计方面的相关展示，以下就是我们的最终效果。

Odoo集成ECharts

Step 1 :

下载ECharts源码到本地

echarts源码：

https://github.com/apache/echarts/blob/5.3.0/dist/echarts.min.js

Step 2 :

下载中国地图源码到本地

China.js源码：

https://github.com/apache/echarts/tree/master/test/data/map/js

还有中国各省份地图和世界地图，请按需下载。

Step 3 :

将ECharts集成到Odoo中

将 ECharts.min.j s和 China.js 放到对应模块的 static/js 中，并在 template.xml 中引入这两个js。

ECharts使用

Step 1 :

在menu.xml中创建一个地图菜单

Step 2 :

在action.xml中绑定地图菜单的action

Step 3:

创建QWeb页面

<?xml version="1.0" encoding="utf-8" ?>
<template>
    &lt;t t-name="quotation_map_page">
        <div style="padding: 5px 10px 0 10px;">
            <div id="center" style="width:100%; height:58vh;background-color: #f7f9ff;display: flex;border-radius: 20px;">
                <div id="map" style="width: 40%; height: 80%;margin-top: 20px;"></div>
                <div id="activeFlows" style="width: 10%; height: 70%;margin-left: 40px;margin-top: 40px;">
                    <div class="innerbox">
                        <ul style="padding: 10px;background-color: white;border-radius: 6px;overflow-y: auto;margin-bottom: 0;">
                            <li class="image-click">
                                <img src="/xc_order/static/description/1.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/>
                            </li>
                            <li class="image-click">
                                <img src="/xc_order/static/description/2.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/>
                            </li>
                            <li class="image-click">
                                <img src="/xc_order/static/description/3.jpg" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/>
                            </li>
                            <li class="image-click">
                                <img src="/xc_order/static/description/4.png" style="height: 100%;vertical-align: baseline;width: 100%;border-radius: 4px;"/>
                            &l