<style>
    .hotel_echarts .echarts{padding-top: 25px;}
    a{
        cursor: pointer;
    }
</style>
<template class='hotel_echarts'>
    <el-row :span='24' class="echarts">
        <el-col :span="24">
            <p style='margin: 20px 0;border-left:solid 3px #E95252;padding-left:10px;font-size:14px'>2018年5月酒店用量数据报表</p>
            <ul class='month' style='border-radius:4px;border:1px solid #E3E3E3;float:left;color:#666666;position:absolute;z-index: 2;right: 20px;top: 80px;'>
                <li style='float:left;padding:6px 10px;font-size:12px;border-right:solid 1px #E3E3E3;cursor: pointer;'  v-for="item in month" @click="showData(item)">{{item}}月</li>            
            </ul>
        </el-col>
        <el-col :span='12'>
            <div id="hotelDosage" style="height:350px;"></div>           
        </el-col>
        <el-col :span='12'>
            <div id="hotelOccupationRatio" style="height:350px;"></div>
        </el-col>     
        <el-col :span='12'>
            <div id="YearonyearGrowth" style="height:350px;"></div>
        </el-col>
        <el-col :span='12'>
            <div id="annularGrowth" style="height:350px;"></div>
        </el-col>
    </el-row> 
</template>
<script>
// import echarts from '@/components/Hotel/echarts.vue'
export default {
	data(){
		return{
            myChart1:'',
            month:['1','2','3','4','5','6','7','8','9','10','11','12'],       
            yoyGrowthDataX: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],     
            yoyGrowthDataY:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'],
            dataList:[
                        {
                            value:256, 
                            name:'喜马拉雅山大酒店',
                            itemStyle:{
                                normal:{
                                    color:'#2AAEF2'
                                }
                            }
                        },
                        {
                            value:223,
                            name:'土耳其五星酒店',
                            itemStyle:{
                                normal:{
                                    color:'#6EDBEA'
                                }
                            }
                        },
                        {
                            value:207,
                            name:'新加坡圣淘沙安曼纳圣殿...',
                            itemStyle:{
                                normal:{
                                    color:'#47BF8C'
                                }
                            }
                        },
                        {
                            value:198,
                            name:'希腊小岛特色酒店',
                            itemStyle:{
                                normal:{
                                    color:'#F8D308'
                                }
                            }
                        },
                        {
                            value:114,
                            name:'grand united',
                            itemStyle:{
                                normal:{
                                    color:'#FFBA1F'
                                }
                            }
                        },
                        {
                            value:356,
                            name:'锦江宾馆',
                            itemStyle:{
                                normal:{
                                    color:'#FABA1F'
                                }
                            }
                        },
                        {
                            value:60,
                            name:'九眼桥酒店',
                            itemStyle:{
                                normal:{
                                    color:'#F6BA1F'
                                }
                            }
                        }
                    ]
		}
    },
    methods:{
        hotelDosage(){
            var then = this;
            let myChart = this.$echarts.init(document.getElementById('hotelDosage'));
            myChart.setOption({
                 backgroundColor:'rgba(255,255,255,1)',
		      	title:{
			        text:'酒店用量',
                    left:'left',
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:14,
                        color:'#333333',
                    }
                },
                tooltip:{
			        trigger:'item',
			        formatter: '{a} <br/>{b} : {c}'
			    },
			    xAxis:{
			        type:'category',
                    data:['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine:{
                        show :false,
                        lineStyle:{
                            width:30
                        }
                    },
                    axisTick:false,
			    },
			    yAxis: {
                    axisLine:{show :false},
                    axisTick:false,
                    splitLine:{
                        lineStyle:{
                            color:'rgba(230,230,230,0)'
                        }
                       
                    },//去除网格线
                    type:'value',
			    },
			    grid: {
			        left:'1%',
			        right:'2%',
			        bottom:'8%',
			        containLabel :true
			    },
			    series:[
			    {
			    	name:'本年',
			        data:[10, 200, 150, 80, 70, 110, 130],
			        type:'bar',
                    barWidth:30,
                    itemStyle:{
                        color:'#77D0FC',
                        barBorderRadius:[30, 30 , 0, 0]
                    }
			    }]
            })
        },
        hotelOccupationRatio(){
            var then = this;
            let myChart = this.$echarts.init(document.getElementById('hotelOccupationRatio'));
            then.myChart1 = myChart;
            myChart.setOption({
                backgroundColor:'rgba(255,255,255,1)',
                title:{
                    text:'酒店占比',
                    left:'left',
                    top:20,
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:14,
                        color:'#333333',
                    }
                },
                legend:{
                    type:'scroll',
                    orient:'vertical',
                    right:10,
                    top:60,
                    bottom:20,
                    // height:100,
                    itemWidth:18,
                    itemHeight:18,
                    selectedMode:true,
                    formatter:function (name) {
                        if(name.length6){
                           let newName = name.slice(0,6)
                           name = newName+'...'
                        }
                        return name
                    },
                    tooltip:{
                        show:true
                    },
                    pageIcons:{
                        vertical:['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']
                    }
                },
                tooltip:{
                    trigger:'item',
                     formatter: '{a} <br/>{b} : {c}'
                },
			    series:[
			    {
			    	name:'',
                    type:'pie', 
                    radius:'40%',
                    center:['20%', '50%'],
                    data:then.dataList.sort(function (a, b) { return a.value - b.value; }),
                    roseType:false,
                    label:{
                        show:false,
                    },
                    itemStyle:{
                        normal:{
                            color:'#c23531',                           
                        }
                    },
                    animationType:'scale',
                    animationEasing:'elasticOut',
                    animationDelay:function (idx) {
                        return Math.random()*200;
                    }
			    }]
            })
        },
        YearonyearGrowth(){
            var then = this;
            let myChart = this.$echarts.init(document.getElementById('YearonyearGrowth'));
            myChart.setOption({
                 title: {
			        text: '同比增长',
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:14,
                        color:'#333333',
                    }
                },
			    tooltip: {
			        trigger: 'item',
			        formatter: '{a} <br/>{b} : {c}'
			    },
			    xAxis: {
			        type: 'category',
			         axisLine: {
                        show: false,
                        lineStyle:{
                            width:30
                        }
                    },
                    axisTick:false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
                },
			    grid: {
			        left: '1%',
			        right: '2%',
			        bottom: '8%',
			        containLabel: true
			    },
			    yAxis: {
			        type: 'category',
                    data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'],
                    axisLine: {show: false},
                    axisTick:false,
                    splitLine:{
                        lineStyle:{
                            color:'rgba(230,230,230,0)'
                        }
                       
                    },//去除网格线
                    type: 'value',     
			    },
			    series: [                    
			        {
			            name: '本年',
                        type: 'line',
                        smooth:false,  
                        data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47],
                        lineStyle:{
                            width:1,
                            color:'#47BF8C',
                        },
                        itemStyle:{
                            borderWidth:2,
                            color:'#47BF8C'
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
                                }, {
                                    offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
			        }
			    ]
            })
        },
        annularGrowth(){
            var then = this;
            let myChart = this.$echarts.init(document.getElementById('annularGrowth'));
            myChart.setOption({
                 title: {
			        text: '同比增长',
                    left: 'left',
                    textStyle:{
                        fontWeight:'bold',
                        fontSize:14,
                        color:'#333333',
                    }
                },
			    tooltip: {
			        trigger: 'item',
			        formatter: '{a} <br/>{b} : {c}'
			    },
			    xAxis: {
			        type: 'category',
			         axisLine: {
                        show: false,
                        lineStyle:{
                            width:30
                        }
                    },
                    axisTick:false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月'],
                },
			    grid: {
			        left: '1%',
			        right: '2%',
			        bottom: '8%',
			        containLabel: true
			    },
			    yAxis: {
			        type: 'category',
                    data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'],
                    axisLine: {show: false},
                    axisTick:false,
                    splitLine:{
                        lineStyle:{
                            color:'rgba(230,230,230,0)'
                        }
                       
                    },//去除网格线
                    type: 'value',     
			    },
			    series: [                    
			        {
			            name: '本年',
                        type: 'line',
                        smooth:false,  
                        data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47],
                        lineStyle:{
                            width:1,
                            color:'#47BF8C',
                        },
                        itemStyle:{
                            borderWidth:2,
                            color:'#47BF8C'
                        },
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
                                }, {
                                    offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
			        }
			    ]
            })
        },
        showData(num){
            var name = '月'
            name=num+name   
            this.dataList = [
                        {
                            value:256, 
                            name:name+'喜马拉雅山大酒店',
                            itemStyle:{
                                normal:{
                                    color:'#2AAEF2'
                                }
                            }
                        },
                        {
                            value:223,
                            name:name+'土耳其五星酒店',
                            itemStyle:{
                                normal:{
                                    color:'#6EDBEA'
                                }
                            }
                        },
                        {
                            value:207,
                            name:name+'新加坡圣淘沙安曼纳圣殿...',
                            itemStyle:{
                                normal:{
                                    color:'#47BF8C'
                                }
                            }
                        },
                        {
                            value:198,
                            name:name+'希腊小岛特色酒店',
                            itemStyle:{
                                normal:{
                                    color:'#F8D308'
                                }
                            }
                        },
                        {
                            value:114,
                            name:name+'grand united',
                            itemStyle:{
                                normal:{
                                    color:'#FFBA1F'
                                }
                            }
                        },
                        {
                            value:356,
                            name:name+'锦江宾馆',
                            itemStyle:{
                                normal:{
                                    color:'#FABA1F'
                                }
                            }
                        },
                        {
                            value:60,
                            name:name+'九眼桥',
                            itemStyle:{
                                normal:{
                                    color:'#F6BA1F'
                                }
                            }
                        }
                    ]
            this.hotelOccupationRatio()
        }
    },
	mounted(){
        this.hotelDosage()
        this.hotelOccupationRatio()
        this.YearonyearGrowth()
        this.annularGrowth()
	},

}


</script>


