<template>
    <card icon="shuju_icon_geshiqiye" title="各市企业数量对比图">
        <div class="chart" ref="chart"></div>
    </card>
</template>

<script>
import card from '../card.vue';
import * as echarts from 'echarts';
import chartOptions from '../../mixins/chartOptions';

export default {
    name: 'AmountByCity',
    components: { card },
    mixins: [chartOptions],
    mounted() {
        this.$nextTick(() => {
            this.myChart = echarts.init(this.$refs.chart, 'jmrh');
            this.initChat(this.myChart);
            this.getData();
        });
    },
    methods: {
        getData() {
            this.$http.get('/statDataCenter/cityOrgNum').then((res) => {
                this.myChart.setOption({
                    tooltip: {
                        formatter: () => {
                            return '';
                        },
                    },
                    grid: {
                        bottom: 35,
                    },
                    color: ['#FB7463'],
                    xAxis: {
                        data: res.labels,
                        axisLabel: {
                            rotate: -60,
                            margin: 5,
                            formatter: (value) => {
                                return value.replace(/市/, '');
                            },
                        },
                    },
                    series: [
                        {
                            name: '企业数量',
                            data: res.data,
                            type: 'line',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#FB7463',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(251, 116, 99, 0)',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                            label: {
                                show: false,
                                formatter: '{b}\r\n{c}',
                                backgroundColor: '#FB7463',
                                color: '#fff',
                                padding: [3, 5],
                                borderRadius: 4,
                                textStyle: {
                                    lineHeight: 16,
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                },
                            },
                            labelLayout: this.labelLayout,
                        },
                    ],
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.chart {
    width: 100%;
    height: 100%;
    flex-grow: 1;
}
</style>
