<template>
    <el-container class="cim-s-sp">
        <div class="info-box">
            <div class="info-close" @click="close">X</div>
            <div class="title">时空资源</div>
            <div class="echrtscontainer" id="lineCharts"></div>
        </div>
    </el-container>
</template>
<script>
import {defineComponent, reactive, onMounted, inject } from "vue";
    /**
     * 小区房屋信息
     * **/
export default defineComponent({
    name: 'houseinfo',
    props: {
        tableDatas: {}
    },
    setup(props,context) {
        let data = reactive({
            // tabletitle: props.tableDatas.title,
            // labesData: props.tableDatas.labesData,
            // tablesData: props.tableDatas.tablesData
            //tabletitle: '标题'
            // labesData: [
            //     { name: '单位名称' , field: 'name' },
            //     { name: '信息名称' , field: 'typename' },
            //     { name: '接入方式' , field: 'accesstype' },
            //     { name: '时间' , field: 'date' }
            // ],
            // tablesData:[
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1 15:30:48'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'},
            //     { name: '民政局', typename: '服务机构' , accesstype: '网络接入' , date: '2020-8-1'}
            // ]
        })
        onMounted(() => {
            change();

        })
        let echarts = inject("echarts");
        const change = () => {
            const chartBox = echarts.init(document.getElementById("lineCharts")); 
            const option = {
                grid: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '20%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'center',
                    bottom: 'bottom',
                    padding: [10, 0, 0, 0],
                    data: ["第一产业", "第三产业"],
                    //图例滚动
                    // type: 'scroll',
                    //图例文字样式
                    textStyle: {
                        color: 'rgba(36, 173, 254, 1)',
                        fontSize:"1rem"
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize:"1rem"
                        },
                        axisLine: {
                            show: false
                        },
                        data: ["2018年", "2019年", "2020年", "2021年"],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value} '
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: 'rgba(36, 173, 254, 1)',
                                fontSize:"1rem"
                            }
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                    {
                        type: 'value',
                        name: '',
                        min: 0,
                        max: 100,
                        interval: 20,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: 'rgba(36, 173, 254, 1)',
                                fontSize:"1rem"
                            }
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: "第一产业",
                        data: [72, 37, 4, 75],
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        itemStyle: {
                            normal: {
                                color: '#ffc600', //改变折线点的颜色
                                lineStyle: {
                                    color: '#ffc600', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    {
                        name: "第三产业",
                        data: [8, 15, 34, 31],
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        itemStyle: {
                            normal: {
                                color: '#24adfe', //改变折线点的颜色
                                lineStyle: {
                                    color: '#24adfe', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(36,173,254, 0.5)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(52,112,252, 0.1)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }
                ]
            };
            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                chartBox.resize();
            })
        }

        let methods = {
            close(){
                context.emit('close')
            }
        };
        return {
        ...methods,
        ...data,
        };
    },
});
</script>

<style lang="scss" scoped>
.cim-s-sp{
    width: 350px;
    padding: 0 10px;
    min-height: 150px;
    background: url(/public/images/common/bg1.png);
    background-size: 100% 100%;
}

.info-box{
    width: 100%;
    height: 100%;
    position: relative;
}
.info-box .title{
    display: inline-block;
    margin: 10px auto;
    color: #fff;
    font-size: 16px;

}
.info-close{
  color: #fff;
  position: absolute;
  right: 6px;
  top: 10px;
  font-size: 14px;
  cursor: pointer;
}
.echrtscontainer{
    height: 200px;
}

</style>