<%--
  Created by IntelliJ IDEA.
  User: kangmor
  Date: 2016/4/24
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>

<!-- BEGIN PAGE HEADER-->


<div class="row">
    <div class="col-md-12">
        <div class="portlet box yellow">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-gift"></i>元器件存储周期
                </div>
                <div class="tools">
                    <a class="config" data-toggle="modal" href="#portlet-config" data-original-title="" title="">
                    </a>
                    <a class="reload" href="javascript:;" data-original-title="" title="">
                    </a>
                </div>
            </div>
            <div class="portlet-body">

                <div class="chart" id="stack_chart" style="height:553px">

                </div>
            </div>
        </div>
    </div>

</div>

<c:set var="scripts" scope="request">
    <script src="${ctx}/scripts/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('stack_chart'));

        myChart.showLoading();
        $.get('${ctx}/data/scatterData.json', function (dataStr) {
            var data = JSON.parse(dataStr);
            myChart.hideLoading();

            var itemStyle = {
                normal: {
                    opacity: 0.8,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            };

            var sizeFunction = function (x) {
                var y = Math.sqrt(x / 5e8) + 0.1;
                return y * 40;
            };
            // Schema:
            var schema = [
                {name: 'Income', index: 0, text: '平均数量', unit: ''},
                {name: 'LifeExpectancy', index: 1, text: '存储日期', unit: '天'},
                {name: 'Population', index: 2, text: '总数量', unit: ''},
                {name: 'Country', index: 3, text: '产地', unit: ''}
            ];

            option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        orient: 'vertical',
                        autoPlay: true,
                        inverse: true,
                        playInterval: 1000,
                        left: null,
                        right: 0,
                        top: 20,
                        bottom: 20,
                        width: 55,
                        height: null,
                        label: {
                            normal: {
                                textStyle: {
                                    color: '#999'
                                }
                            },
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        symbol: 'none',
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            color: '#bbb',
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: false,
                            showPrevBtn: false,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },
                        data: []
                    },
                    backgroundColor: '#333',
                    title: {
                        'text': data.timeline[0],
                        textAlign: 'center',
                        left: '63%',
                        top: '55%',
                        textStyle: {
                            fontSize: 100,
                            color: 'rgba(255, 255, 255, 0.7)'
                        }
                    },
                    tooltip: {
                        padding: 5,
                        backgroundColor: '#222',
                        borderColor: '#777',
                        borderWidth: 1,
                        formatter: function (obj) {
                            var value = obj.value;
                            return schema[3].text + '：' + value[3] + '<br>'
                                    + schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
                                    + schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
                                    + schema[2].text + '：' + value[2] + '<br>';
                        }
                    },
                    grid: {
                        left: '12%',
                        right: '110'
                    },
                    xAxis: {
                        type: 'log',
                        name: '数量',
                        max: 100000,
                        min: 300,
                        nameGap: 25,
                        nameLocation: 'middle',
                        nameTextStyle: {
                            fontSize: 18
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ',
                            textStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '存储日期',
                        max: 100,
                        nameTextStyle: {
                            color: '#ccc',
                            fontSize: 18
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} 天',
                            textStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    visualMap: [
                        {
                            show: false,
                            dimension: 3,
                            categories: data.counties,
                            calculable: true,
                            precision: 0.1,
                            textGap: 30,
                            textStyle: {
                                color: '#ccc'
                            },
                            inRange: {
                                color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a']
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'scatter',
                            itemStyle: itemStyle,
                            data: data.series[0],
                            symbolSize: function(val) {
                                return sizeFunction(val[2]);
                            }
                        }
                    ],
                    animationDurationUpdate: 1000,
                    animationEasingUpdate: 'quinticInOut'
                },
                options: []
            };

            for (var n = 0; n < data.timeline.length; n++) {
                option.baseOption.timeline.data.push(data.timeline[n]);
                option.options.push({
                    title: {
                        show: true,
                        'text': data.timeline[n] + ''
                    },
                    series: {
                        name: data.timeline[n],
                        type: 'scatter',
                        itemStyle: itemStyle,
                        data: data.series[n],
                        symbolSize: function(val) {
                            return sizeFunction(val[2]);
                        }
                    }
                });
            }

            myChart.setOption(option);

        });


    </script>
</c:set>