<template>
    <card icon="shuju_icon_geshixiangmu" title="各市军民融合指数对比图">
        <div class="chart" ref="chart"></div>
    </card>
</template>

<script>
import card from '../card.vue';
import chartOptions from '../../mixins/chartOptions';
import * as echarts from 'echarts';
export default {
    name: 'Compare',
    components: { card },
    mixins: [chartOptions],
    mounted() {
        this.myChart = echarts.init(this.$refs.chart, 'jmrh');
        this.$nextTick(() => {
            this.getData();
        });
    },
    methods: {
        getData() {
            this.$http.get('/statDataCenter/cityIndexStat').then((res) => {
                this.myChart.setOption({
                    grid: {
                        top: 30,
                        bottom: 20,
                        left: 60,
                        right: 40,
                    },
                    yAxis: {
                        type: 'category',
                        data: res.labels,
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: {
                            show: false,
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    series: [
                        {
                            name: '融合指数',
                            data: res.data,
                            type: 'bar',
                            barWidth: '60%',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(125, 212, 255, 0.29)',
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#0D72FE',
                                        },
                                        {
                                            offset: 1,
                                            color: '#34E5FA',
                                        },
                                    ],
                                    global: false,
                                },
                            },
                        },
                    ],
                });
            });
        },
    },
};
</script>

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