{% extends "bee_django_report/base.html" %}
{% block content %}
    {% include 'bee_django_report/logo.html' %}
    {% include 'bee_django_report/nav.html' %}
    <div id="main" style="width: 100%;height:800px;"></div>
{% endblock %}
{% block scripts %}
    {#    <script src="/static/echart/map_china.js"></script>#}

    <script type="text/javascript">
        var myChart;
        var option;
        $(document).ready(function () {
            var dom = document.getElementById("main");
            myChart = echarts.init(dom);


            option = {
                title: {
                    text: '地域图表',
                    subtext: '（根据省生成）',
                    itemGap: 5,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },

                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        saveAsImage: {}
                    }
                },

                series: [
                    {
                        name: '缴费人数',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: []

                    }
                ]
            };
            // 填入数据
            myChart.setOption({
                visualMap: {
                    min: 0,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    text: ['多', '少'],           // 文本，默认为数值文本
                    calculable: true,
                    inRange: {
                        color: ['#e0ffff', '#0d3f72']
                    }
                },
                series: [{
                    // 根据名字对应到相应的系列
                    data: null
                }]
            });
        });
    </script>

{% endblock %}