<template>
    <div class="_chart">
        <div class="_chartTitle">
            <h3>人群属性</h3>
            <span>统计近30天累计消费人群数据</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div id="consumptionLevel" style="width: 600px;height:400px"></div>
        </div>
        <div class="col-sm-6">
            <div id="vipDistribute" style="width: 600px;height:400px"></div>
        </div>
    </div>
</template>

<script type="text/javascript">
    var echarts = require('echarts');
    import util from 'util';

    module.exports = {
        data:function() {
            return {}
        },
        ready:function(){
            //消费水平
            var consumptionLevel = echarts.init(document.getElementById('consumptionLevel'));
            this.getData("/chart/getConsumeAna", "消费水平", "金额\n(元)", consumptionLevel);

            //会员分布
            var vipDistribute = echarts.init(document.getElementById('vipDistribute'));
            this.getData("/chart/getUserAna", "会员分布", "", vipDistribute);
        },
        methods:{
            getData(url, title, xName, dom){
                this.$http.post(url, {
                    dateId: util.dateFormat(new Date(),"YYYYMMdd")
                }).then(function (response) {
                    var data = response.data.data;
                    var option = this.getYOption(data.yoho.x, data.yoho.y, data.shop.y, title, xName);
                    dom.setOption(option);
                });
            },
            getYOption(xData, yYohoData, yShopData, title, xName){
                var option = {
                    title : {
                        show: true,
                        text: title
                    },
                    tooltip : {
                        show: true,
                        trigger: 'axis',
                        formatter: function (params){
                            return params.valueOf() + '%';
                        }
                    },
                    legend: {
                        data:['当前店铺','YOHO！'],
                        show:true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : xData,
                            name: xName,
                            nameLocation:'start',
                            axisTick:{
                                show:false
                            },
                            splitLine:{
                                show:false
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            position: 'right',
                            axisLine:{
                                show:false
                            },
                            axisTick:{
                                show:false
                            },
                            axisLabel:{
                                formatter:function (params) {
                                    return params + '%';
                                }
                            }
                        }
                    ],
                    series : [
                        {
                            name:'当前店铺',
                            type:'bar',
                            data:yShopData,
                            barGap:'0',
                            itemStyle: {
                                normal: {
                                    color: '#49b6d6',
                                    label : {
                                        show: false,
                                        position: 'top',
                                        textStyle:{
                                            color:"#585858",
                                            align:"center"
                                        }
                                    }
                                },
                                emphasis:{
                                }
                            }
                        },
                        {
                            name:'YOHO！',
                            type:'bar',
                            data:yYohoData,
                            itemStyle: {
                                normal: {
                                    color: '#999999',
                                    label : {
                                        show: false,
                                        position: 'top',
                                        textStyle:{
                                            color:"#585858",
                                            align:"center"
                                        }
                                    }
                                },
                                emphasis:{
                                }
                            }
                        }
                    ]
                };
                console.log(option);
                return option;
            }
        }
    }
</script>