{% extends 'base.html' %}
{% block content %}
{% load static %}
<script src="{% static 'js/plugins/echarts/echarts.min.js' %}"></script>
<script src="{% static 'js/plugins/echarts/shine.js' %}"></script>
<script src="{% static 'js/utils.js' %}"></script>
                    <script src="{% static 'js/warning.js' %}"></script>

<style type="text/css">
    body {
        background-color: #FFF !important;
    }
</style>
<div style="width:100%;height:100%;padding:10px">

    <div class="chart-title" style="height:30px;margin-bottom:10px;position:relative">
        <div class="input-group" style="position:absolute;right:5px">
            <select title="药剂资金消耗统计图" required="required" id="sYear" class="chosen-select" style="width:130px;height: 35px;font-size: 15px;">
                        <option value="{% now "Y" %}">{% now "Y" %}</option>
                        <option value="{{ last_year }}">{{ last_year }}</option>
                        <option value="{{ last_last_year }}">{{ last_last_year }}</option>
            </select>&nbsp;
        </div>
    </div>
    <div class="echarts" id="echarts" style="width:100%"></div>
</div>


<script type="text/javascript">
    $(function () {
        $("#echarts").height($(document).height() - $(".chart-title").height() - 50);
        SetChart($("#sYear").val(), 0);
        $("#sYear").change(function () {
            SetChart($("#sYear").val(), 0);
        })
        $("#sMonth").change(function () {
            SetChart($("#sYear").val(), 0);
        })
    })
    function SetChart(year, month) {
        var lineChart = echarts.init(document.getElementById("echarts"), "shine");
        $.get('/dataReport/getFundsConsumeChartJson/', { year: year, month: month }, function (obj) {
            var option = {
                title: {
                    text: '药剂资金消耗价值统计',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}元 ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: obj.data.legend
                },
                series: [
                    {
                        name: '资金消耗',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: obj.data.data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },

                ]
            };
            var lineoption = option;
            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);
        })

    }
</script>
{% endblock %}