{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类型分析</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .mainContent {
            padding: 30px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .mainContent>div:nth-child(2) {
            margin-top: 30px;
        }

        /*  */

        .echart {
            width: 100%;
            height: 300px;
        }


        /*  */
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>类型分析</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div class="widget-title">
                <h2>类型分析 {% if area_list|length %}
                    <form class="layui-form" action="" style="display:inline-block;vertical-align: middle;">
                        <div class="layui-form-item" style="margin-bottom: 0;">
                            <label class="layui-form-label" style="color:#029eef">地块选择：</label>
                            <div class="layui-input-inline">
                                <select name="areaSelct" id="areaSelct" lay-verify="required">
                                    {% for area in area_list %}
                                    <option value="{{area.id}}">{{area.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </form>
                    {% else %} {% endif %}
                </h2>
            </div>
            <div class="">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                        <div id="pie-chart" class="echart"></div>
                    </div>

                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md8">
                        <div id="line-chart" class="echart"></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="widget-title">
                    <h2>销售额
                    </h2>
                </div>
                <div id="bar-chart" class="echart" style="height:400px"></div>
            </div>
        </div>

    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script>
        var element, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            // layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                , range: true
                , done: function (value, date) {
                    var dateArray = value.split(' - ')
                    $('#tableBegin').val(dateArray[0])
                    $('#tableEnd').val(dateArray[1])
                }
            });

            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                , count: 30
                // , count: data.dat.length
                , theme: '#2ca9f9'
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {

                }
            });

        })

        // 1基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('line-chart'));

        // 指定图表的配置项和数据
        var line_option = {
            title: {
                text: '面积收益对比',
                textStyle: {
                    color: '#029eef'
                }
            },

            tooltip : {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    console.log(params);
                    var showHtm='<span>'+params[0][1]+'</span>农场<br>';
                    for(var i=0;i<params.length;i++){
                        //名称
                        var text = params[i][0];
                        //值
                        var value = params[i].value;
                        if(text == '面积'){
                            showHtm += text+'：'+ value+'亩<br>'
                        }else{
                            showHtm += text+'：'+ value+'元<br>'
                        }
                    }
                    return showHtm;
                },
            },
            legend: {
                data: ['面积','收益']
            },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            dataZoom: {
                show: false,
                // start: 70
            },
            series: [
                {}
            ]
        };

        // setTimeout(function () {
        //     var lineChart = echarts.init(document.getElementById('line-chart'));
        //     lineChart.setOption(line_option, true);
        // })

        // 1基于准备好的dom，初始化echarts实例
        var pieChart = echarts.init(document.getElementById('pie-chart'));
        var pie_option = {
            title: {
                text: '面积占比（%）',
                textStyle: {
                    color: '#029eef'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                show: true,
                x: 'left',
                y: '30',
                feature: {
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    saveAsImage: { show: true }
                }
            },
            // legend: {
            //     orient: 'vertical',
            //     x: 'left',
            //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            // },
            calculable: true,
            series: [
                {
                    name: '面积占比',
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    data: [

                    ],
                    itemStyle: {
                        // normal: {
                        //     label: {            //饼图图形上的文本标签
                        //         show: true,
                        //         position: 'inner', //标签的位置
                        //         textStyle: {
                        //             color: "#fff",
                        //             fontWeight: 300,
                        //             fontSize: 14    //文字的字体大小
                        //         },
                        //         formatter: '{b}\n({d}%)'
                        //     },

                        //     labelLine: {
                        //         show: false   //隐藏标示线
                        //     }
                        // }
                    },
                }
            ]
        };

        // 1基于准备好的dom，初始化echarts实例
        var barChart = echarts.init(document.getElementById('bar-chart'));

        // 指定图表的配置项和数据
        var bar_option = {
            title: {
                text: '销售额（亿）',
                textStyle: {
                    color: '#029eef'
                }
            },

            tooltip: {
                trigger: 'axis',
            },
            // legend: {
            //     data: ['销售金额']
            // },
            grid: {
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: { show: true, type: ['line', 'bar'] },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['第一季度', '第二季度', '第三季度', '第四季度']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {}
            ]
        };

        // setTimeout(function () {
        var barChart = echarts.init(document.getElementById('bar-chart'));
        barChart.setOption(bar_option, true);
        // })

        $.ajax({
            url: 'type',
            type: 'post',
            data: {
                id: $('#areaSelct').val()
            },
            dataType: 'json',
            success: function (data) {
                if (data.dat.length) {
                    var pieData = [];
                    var lineChartName = [];
                    var lineMoneyData = [];
                    var lineAreaData = [];
                    for (var i = 0; i < data.dat.length; i++) {
                        var currData = {
                            "value": data.dat[i].area,
                            "name": data.dat[i].name
                        }
                        pieData.unshift(currData);
                        lineChartName.unshift(data.dat[i].name);
                        lineMoneyData.unshift(data.dat[i].money);
                        lineAreaData.unshift(data.dat[i].area);
                        if (i == data.dat.length - 1) {
                            pie_option.series[0].data = pieData;
                            var pieChart = echarts.init(document.getElementById('pie-chart'));
                            pieChart.setOption(pie_option, true);

                            line_option.xAxis[0].data = lineChartName;
                            line_option.series[0] = {
                                data:lineMoneyData,
                                type:'bar',
                                name:'收益',
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                //                             formatter: '{c}'
                                            formatter: '￥{c}'
                                        },
                                    },
                                },
                            };
                            line_option.series[1] = {
                                data:lineAreaData,
                                type:'bar',
                                name:'面积',
                                itemStyle: {
                                    normal: { //静态的时候显示的默认样式n
                　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                                        color: function(params) {
                                            // build a color map as your need.
                                            var colorList = [
                                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                            ];
                                            return colorList[params.dataIndex]
                                        },
                　　　　　　　　　　　　　　//以下为是否显示，显示位置和显示格式的设置了
                                        label: {
                                            show: true,
                                            position: 'top',
                                            formatter: '{c}亩'
                                        },
                                    },
                                    emphasis:{  //鼠标移入动态的时候显示的默认样式
                                    // 　　color:'green'
                                    }
                                },
                                barWidth:20,
                            };
                            // var linelegend = { data:lineChartName };
                            // line_option.legend = linelegend;
                            lineChart.setOption(line_option, true);

                            // pieChart.on("click", function (param) {
                            //     console.log(param)
                            //     var lineChart = echarts.init(document.getElementById('line-chart'));
                            //     var price = [];
                            //     for (var i = 0; i < 4; i++) {
                            //         price.push(Math.floor(Math.random() * 100));
                            //         if (i == 3) {
                            //             line_option.series[0].data = price
                            //             lineChart.setOption(line_option, true);
                            //         }
                            //     }
                            // });

                        }
                    }
                } else {
                    var pieChart = echarts.init(document.getElementById('pie-chart'));
                    pieChart.setOption(pie_option, true);
                }
                // 四季度
                var secondNameArr = [];
                var secondValArr = [];
                for (var i = 0; i < data[1].length; i++) {
                    secondNameArr.push(data[1][i].farm)
                    secondValArr.push([]);
                    if (i == data[1].length - 1) {

                    }
                }
                for (var j = 1; j < 5; j++) { //四个季度
                    for (var z = 0; z < data[j].length; z++) {
                        var currindex = secondNameArr.indexOf(data[j][z].farm)
                        secondValArr[z].push(data[j][z].money)
                        if (z == data[j].length - 1) {
                            bar_option.series = [];
                            for (var s = 0; s < secondNameArr.length; s++) {
                                bar_option.series.push({
                                    name: secondNameArr[s],
                                    type: 'bar',
                                    data: secondValArr[s],
                                })
                                if (s == secondNameArr.length - 1) {
                                    var barChart = echarts.init(document.getElementById('bar-chart'));
                                    barChart.setOption(bar_option, true);
                                }
                            }

                        }
                    }
                }
                var barChart = echarts.init(document.getElementById('bar-chart'));
                barChart.setOption(bar_option, true);
            }
        })


    </script>
</body>

</html>