<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');

    module.exports = {
        data:function() {
            return {
                name:"6666"
            }
        },
        ready:function(){
            var consumptionLevel = echarts.init(document.getElementById('consumptionLevel'));
            var vipDistribute = echarts.init(document.getElementById('vipDistribute'));

            var option = this.getYOption();

            // 使用刚指定的配置项和数据显示图表。
            consumptionLevel.setOption(option);
            vipDistribute.setOption(option);
        },
        methods:{
            getYOption(){
                var option = {
                    title : {
                        text: '消费水平',
                        subtext: '123'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['Vans旗舰店','YOHO！'],
                        show:true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['1000以上','600~1000','300~600','100~300','0~100'],
                            name:'金额\n(元)',
                            nameLocation:'start',
                            axisTick:{
                                show:false
                            },
                            splitLine:{
                                show:false
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            position: 'right',
                            axisLine:{
                                show:false
                            },
                            axisTick:{
                                show:false
                            }
                        }
                    ],
                    series : [
                        {
                            name:'Vans旗舰店',
                            type:'bar',
                            data:[2.0, 4.9, 7.0, 23.2, 25.6],
                            barGap:'0',
                            itemStyle: {
                                normal: {
                                    color: '#49b6d6',
                                    label : {
                                        show: true,
                                        position: 'top',
                                        textStyle:{
                                            color:"#585858",
                                            align:"center"
                                        }
                                    }
                                },
                                emphasis:{
                                }
                            }
                        },
                        {
                            name:'YOHO！',
                            type:'bar',
                            data:[2.6, 5.9, 9.0, 26.4, 28.7],
                            itemStyle: {
                                normal: {
                                    color: '#999',
                                    label : {
                                        show: true,
                                        position: 'top',
                                        textStyle:{
                                            color:"#585858",
                                            align:"center"
                                        }
                                    }
                                },
                                emphasis:{
                                }
                            }
                        }
                    ]
                };
                return option;
            }
        }
    }
</script>