<template>
    <div class="crop-area">
        <Model title="农业增加值">
            <div ref="areas" class="area"></div>
        </Model>
    </div>
</template>

<script>
import Model from '../model.vue'

export default {
    name: "nyzjz",
    components: { Model },
    mounted() {
        this.initRT()
    },
    methods: {
        initRT() {
            let Chart = this.$refs.areas;
            let myChart = this.$echarts.init(Chart)
            let that = this
            const option = {
                legend: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    },
                },
                grid: {
                    top: '15%',
                    left: '20%',
                    bottom: '10%'
                },
                color: ['#82F3C5', '#405DF9', '#EFC740', '#A8A3FD'],
                tooltip: {
                    trigger: 'axis',
                    formatter: params => {
                        return `${params[0].name} :  ${params[0].value}亿元`
                    },
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['2019年', '2020年', '2021年', '2022年'],
                    axisLine: {
                        lineStyle: {
                            color: '#02FEFF'

                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: '亩',
                    max: 95,
                    min: 0,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(2, 254, 255,0.3)'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 亿元'
                    }
                },
                series: [
                    {
                        data: [73.40, 81.20, 88.71, 90.99],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#00FFFF"
                                },
                                {
                                    offset: 1,
                                    color: "#0080FF"
                                }
                                ])
                            }
                        },
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.crop-area {
    margin-top: 10px;

    .area {
        width: 100%;
        height: 225px;
    }

}
</style>