<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: false,
                                        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: false,
                                        position: 'top',
                                        textStyle:{
                                            color:"#585858",
                                            align:"center"
                                        }
                                    }
                                },
                                emphasis:{
                                }
                            }
                        }
                    ]
                };

                var option1 = {
                    title : {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['蒸发量','降水量']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'蒸发量',
                            type:'bar',
                            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'降水量',
                            type:'bar',
                            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint : {
                                data : [
                                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }
                    ]
                };
                return option1;
            }
        }
    }
</script>