<template>
    <div class="num">
        <Model title=" 地块数量曲线">
            <div ref="num" class="line"></div>
        </Model>
    </div>
</template>
<script>
import Model from '../model.vue'
export default {
    name: "Num",
    components: { Model },
    mounted() {
        this.initRT()
    },
    methods: {
        initRT() {
            let Chart = this.$refs.num;
            let myChart = this.$echarts.init(Chart)
            const option = {
                legend: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    },
                    data: ['田地数量', '建设占地数量', '非粮化数量', 'X荒数量', '地块总数'],
                },
                grid: {
                    top: '15%',
                    left: '10%',
                    bottom: '10%',
                    right:'1%'
                },
                color: ['#FAC858', '#91CC75', '#283E81', '#EA8533', '#68A400'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine: {
                        lineStyle: {
                            color: '#02FEFF'

                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    max: 2000,
                    min: 0,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(2, 254, 255,0.3)'
                        }
                    },
                },
                series: [
                    {
                        name: '田地数量',
                        stack: 'Total',
                        type: "line",
                        data: [800, 700, 900, 1100, 900, 1100]
                    },
                    {
                        type: 'line',
                        stack: 'Total',
                        name: '建设占地数量',
                        data: [900, 800, 600, 400, 700, 900]
                    },
                    {
                        type: 'line',
                        stack: 'Total',
                        name: '非粮化数量',
                        data: [1100, 800, 900, 500, 1200, 1300]
                    },
                    {
                        type: 'line',
                        stack: 'Total',
                        name: 'X荒数量',
                        data: [1400, 500, 900, 900, 500, 1300]
                    },
                    {
                        type: 'line',
                        name: '地块总数',
                        data: [1400, 1000, 900, 700, 600, 800]
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>
<style lang="less" >
.num{
    margin-top: 10px;

    .line{
        width: 100%;
        height: 250px;
    }
    .title {
        text-indent: 50px!important;
    }
  
}
</style>