jc
/
odoo16


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/jc_data/static/lib/echarts.min.js" type="text/javascript"></script>
    <style>
        .clearfix{zoom:1} /*zooom 属性：IE 浏览器的专用属性。这一句是专门针对老版本的IE浏览器所写的，为了兼容*/
        .clearfix:after{ /* :after伪对象选择符---在这个对象被浏览器渲染后添加一定的内容*/
            content:"."; /*content属性：添加的内容即为这个属性的值。这个属性是专门与伪对象搭配使用的*/
            display: block; /*将添加进去的内容转换为块状元素*/
            visibility: hidden; /*visibility：可视化属性，控制元素是否可见，但无论是否隐藏都保留物理空间。{与display:none的比较}*/
            height: 0;/*将添加进去的内容高度设置为0，消除其占位*/
            clear: both;/*将添加进去的内容作为清除浮动的对象，实现外围容器中有内容存在，因此可以自动判定高度，解决塌陷*/
        }
        .label-link{
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }
        .label-link-select{
            color: red;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="wrap clearfix">
        <div style="float: left;">
            <div>
             {% for item in data.labels %}
                {% if item.id==data.selectedID1 %}
                    <text class="label-link-select" onclick="click_label(1,{{item.id}})">{{item.name}}</text>
                {% else %}
                    <text class="label-link" onclick="click_label(1,{{item.id}})">{{item.name}}</text>
                {% endif %}
             {% endfor %}
            </div>
            <div>
                {% if data.show2 %}
                     {% for item in data.labels2 %}
                        {% if item.id==data.selectedID2 %}
                            <text class="label-link-select" onclick="click_label(2,{{item.id}})">{{item.name}}</text>
                        {% else %}
                            <text class="label-link" onclick="click_label(2,{{item.id}})">{{item.name}}</text>
                        {% endif %}
                     {% endfor %}
                {% endif %}
            </div>
            <div>
                {% if data.show3 %}
                     {% for item in data.labels3 %}
                        {% if item.id==data.selectedID3 %}
                            <text class="label-link-select" onclick="click_label(3,{{item.id}})">{{item.name}}</text>
                        {% else %}
                            <text class="label-link" onclick="click_label(3,{{item.id}})">{{item.name}}</text>
                        {% endif %}
                     {% endfor %}
                {% endif %}
            </div>
        </div>
        <div style="float: right;">
            <div style="float: left;">日期:</div>
            <div style="float: right;">
                <input type="date" id="date-start" value="{{data.date_start}}"/>~<input type="date" id="date-end" value="{{data.date_end}}"/>
            </div>
        </div>
    </div>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data_table = {{data_table|safe}};

        if(data_table){
            var data_table = (new Function("return " + data_table))();
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(data_table);
        }

        function click_label(level, data_id) {
            let start = document.getElementById('date-start').value;
            let end = document.getElementById('date-end').value;
            let url = "";
            if (level === 1){
                url = "/report/data/" + data_id + "?s=" + start + "&e=" + end;
            }
            if (level === 2){
                url = "/report/data/{{data.selectedID1}}/" + data_id + "?s=" + start + "&e=" + end;
            }
            if (level === 3){
                url = "/report/data/{{data.selectedID1}}/{{data.selectedID2}}/" + data_id + "?s=" + start + "&e=" + end;
            }
            window.location.href = url;
        }

    </script>
</body>
</html>