<template>
    <div class="_chart">
        <div class="_chartTitle">
            <h3>地域分布</h3>
            <span>展示近30天销售地域分布数据</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div id="areaTop" style="width: 500px;height:400px"></div>
        </div>
        <div class="col-sm-6">
            <div id="shopTop" style="width: 500px;height:400px"></div>
        </div>
    </div>
</template>

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

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

            var option = this.getXOption();

            // 使用刚指定的配置项和数据显示图表。
            areaTop.setOption(option);
            shopTop.setOption(option);

            var a = [{"agreementEndTime":1476979200,"brandId":1749,"brandName":"请勿动此品牌","brandNameCn":"请勿动此品牌","brandStatus":1,"id":626,"isFreeze":"N","method":"","status":1,"supplierId":1496,"supplierName":"请勿动此供应商","supplierStatus":300}]
            var b = [{"agreementEndTime":1467216000,"brandId":1740,"brandName":"卡文","brandNameCn":"卡文","brandStatus":1,"id":611,"isFreeze":"N","method":"","status":1,"supplierId":1492,"supplierName":"卡文的供应商3：第二个JIT","supplierStatus":300}]
        },
        methods:{
            getXOption(){
                var option = {
                    color:["#ff0000"],
                    title : {
                        show: true,
                        text: '全站销售地域 top10：',
                        subtext: 'From ExcelHome'
                    },
                    xAxis : [
                        {
                            type:'value',
                            show:false
                        }
                    ],
                    yAxis : [
                        {
                            type:'category',
                            data:['福建','澳门','香港','重庆','天津','北京','浙江','江苏','上海','广东'],
                            axisLine:{
                                show:false
                            },
                            axisTick:{
                                show:false
                            },
                            splitLine:{
                                show:false
                            }
                        }
                    ],
                    series : [
                        {
                            name:'销量',
                            type:'bar',
                            data:[0.5, 1.5, 2.3, 3.4, 4.2, 6.7, 8.2, 14.6, 16.2, 18.7],
                            itemStyle: {
                                normal: {
                                    color: '#ccc',
                                    label : {
                                        show: true,
                                        position: 'right',
                                        textStyle:{
                                            color:"#585858",
                                            align:"right"
                                        }
                                    }
                                }
                            }
                        }
                    ]
                };
                return option;
            }
        }
    }
</script>

<style>
    ._chart{
        clear: both;
        width: 100%;
        font-family: 'microsoft yahei';
        color: #585858;
    }
    ._chartTitle{
        width: 100%;
        padding: 0 20px;
        height: 40px;
        background-color: #ddd;
    }
    ._chartTitle h3{
        float: left;
        line-height: 40px;
        font-size: 20px;
        margin: 0;
        font-weight: bold
    }
    ._chartTitle span{
        display: block;
        float: right;
        line-height: 40px;
        font-size: 14px;
    }
</style>