<template>
    <card icon="shuju_icon_xiangmu" 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: 'ProjectAmount',
    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/baseStat').then((res) => {
                this.myChart.setOption({
                    tooltip: {
                        formatter: () => {
                            return '';
                        },
                    },
                    grid: {
                        bottom: 35,
                    },
                    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: '#4DACFF',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(77, 172, 255, 0)',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                            label: {
                                show: false,
                                formatter: '{b}\r\n{c}',
                                backgroundColor: '#4DACFF',
                                color: '#fff',
                                padding: [3, 5],
                                borderRadius: 4,
                                textStyle: {
                                    lineHeight: 16,
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                },
                            },
                            labelLayout: this.labelLayout,
                        },
                    ],
                });

                // this.myChart.setOption({
                //     color: ['#E8684A', '#F6BD16', '#5B8FF9'],
                //     tooltip: {
                //         trigger: 'item',
                //     },
                //     series: [
                //         {
                //             type: 'pie',
                //             roseType: 'area',
                //             data: Object.keys(res).map((item) => {
                //                 return {
                //                     name: item,
                //                     value: res[item],
                //                 };
                //             }),
                //         },
                //     ],
                // });
            });
        },
    },
};
</script>

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