<template>
    <div>
        <el-row :gutter="10" style="margin-bottom:10px">
            <el-col :span="6">
                <el-card style="color:#409EFF">
                    <div><i class="el-icon-user-solid"/>运行设备数量</div>
                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px;">{{total}}</div>
                </el-card>
            </el-col>
             <el-col :span="6">
                <el-card style="color:#F56C6C">
                    <div><i class="el-icon-money"/>设备总量</div>
                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px;">1000</div>
                </el-card>
            </el-col>
             <el-col :span="6">
                <el-card  style="color:#67C23A">
                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px">320</div>
                </el-card>
            </el-col>
             <el-col :span="6">
                <el-card  style="color:#409EFF">
                    <div style="color:#409EFF"><i class="el-icon-s-shop"/>上报数量</div>
                    <div style="padding:5px 0;text-align:center;font-weight:bold;font-size: 30px">100</div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-bottom:10px">
            <el-col :span="12">
                <el-card style="color:#409EFF">
                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
                    <div id="bar" style="width:500px; height:400px"></div>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card style="color:#409EFF">
                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
                    <div id="pie" style="width:500px; height:400px"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="10" style="margin-bottom:10px">
            <el-card style="color:#409EFF">
                    <div><i class="el-icon-bell"/>流量上报</div>
                    <div id="stacked-area" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
                </el-card>
        </el-row>
        <el-row :gutter="10" style="margin-bottom:10px">
            <el-col :span="12">
                <el-card style="color:#409EFF">
                    <div><i class="el-icon-map-location"/>设备运行</div>
                    <div id="radar" style="width:500px; height:400px; margin-left: auto; margin-right: auto;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="color:#409EFF">
                    <div><i class="el-icon-map-location"/>设备信息</div>
                    <el-table
                        :data="tableData"
                        height="400"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="id"
                        label="序号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="设备名称"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="count"
                        label="运行数">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
    name:"Home",
    data(){
        return{
            total:0,
            tableData: [{
                id: '1',
                name: '设备1',
                count: '209'
                }, {
                id: '2',
                
                name: '设备2',
                count: '126'
                }, {
                id: '3',
                name: '设备3',
                count: '96'
                }, {
                id: '4',
                name: '设备4',
                count: '82'
                }, {
                id: '5',
                name: '设备5',
                count: '76'
                }, {
                id: '6',
                name: '设备6',
                count: '58'
                }, {
                id: '7',
                name: '设备7',
                count: '49'
                },{
                id: '8',
                name: '设备8',
                count: '38'
                },{
                id: '9',
                name: '设备9',
                count: '28'
                }]
        }
    },
    mounted(){       //使用mounted的目的是为了等页面元素渲染之后再触发
    
        var barchartDom = document.getElementById('bar');
        var barChart = echarts.init(barchartDom);
        var barOption;
        barOption = {
            title: {
                text: '运行设备统计',
                subtext: '趋势图',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ["龙华区","福田区","龙岗区","南山区"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [150, 230, 224, 218, 135],
                type: 'line'
                },
                {
                data: [150, 230, 224, 218, 135],
                type: 'bar'
                }
            ]
        };           
        var pieDom = document.getElementById('pie');
        var pieChart = echarts.init(pieDom);
        var pieOption;

        pieOption = {
            title: {
                text: '运行设备统计',
                subtext: '比例图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
              {
                type: 'pie',
                radius: '70%',
                label: {
                normal: {
                    show: true,
                    position: 'inner',
                    textStyle:{
                        fontWeight:300,
                        fontSize:16,
                        color:"#fff"
                    },
                    formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
                }
                },
                data: [        { value: 1048, name: '龙华区' },
                                { value: 735, name: '龙岗区' },
                                { value: 580, name: '南山区' },
                                { value: 484, name: '福田区' },

                            ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
              }
        ]
        };
        var StackedareaDom = document.getElementById('stacked-area');
        var StackedareaChart = echarts.init(StackedareaDom);
        var StackedareaOption;

        StackedareaOption = {
            title: {
                // text: '数据上报统计图',
                // left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            toolbox: {
                // feature: {
                // saveAsImage: {}
                // }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
            };
            var radarDom = document.getElementById('radar');
            var radarChart = echarts.init(radarDom);
            var radarOption;

            radarOption = {
            title: {
                text:''
            },
            legend: {
                data: ['高端型号', '中端型号']
            },
            radar: {
                // shape: 'circle',
                indicator: [
                { name: '当前活跃', max: 6500 },
                { name: '活跃峰值', max: 16000 },
                { name: '存活峰值', max: 30000 },
                { name: '已创建', max: 38000 },
                { name: '已过期', max: 52000 },
                { name: '已拒绝', max: 25000 }
                ]
            },
            series: [
                {
                name: '高端型号 vs 中端型号',
                type: 'radar',
                data: [
                    {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: '高端型号'
                    },
                    {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: '中端型号'
                    }
                ]
                }
            ]
            };

        
            radarChart.setOption(radarOption);



        // this.request("http://localhost:8002/echarts").then(res=>{  
        //     console.log(res.data);          
        //      charOption.series[0].data=res.data;
        //      charOption.series[1].data=res.data;
        //      this.total=res.data[4];
            barChart.setOption(barOption);

        //     pieOption.series[0].data=[
        //         {name:"第一季度",value:res.data[0]},
        //         {name:"第二季度",value:res.data[1]},
        //         {name:"第三季度",value:res.data[2]},
        //         {name:"第四季度",value:res.data[3]}
        //       ];
            pieChart.setOption(pieOption);
        //     })     

            StackedareaChart.setOption(StackedareaOption);
                
           // strokeanimationChart.setOption(strokeanimationOption);
        
    }
}
</script>

<style scoped>

</style>
