<!-- 地图 -->
<template>
    <div :id="id" class="chart" />
</template>

<script>
    import ChartBase from '@/components/Base/ChartsBase.js';

    export default {
        mixins: [ChartBase],
        computed: {
            // 事件监听列表
            eventListener() {
                return [{
                    event: 'click',
                    handler: this.onclick
                }, {
                    event: 'mouseover',
                    handler: this.onmouseover
                }, {
                    event: 'mouseout',
                    handler: this.onmouseout
                }];
            }
        },
        methods: {
            // 注册地图数据
            beforeInit(echarts) {
                echarts.registerMap('hunan', require('@/assets/json/hunan.json'));
            },
            async setOptions(chartData) {
                if (!this.chart || !chartData) return;
                let option;
                option = {
                    geo: [{
                        map: 'hunan',
                        silent: true,
                        aspectScale: 0.9,
                        itemStyle: {
                            normal: {
                                areaColor: '#1b3370',
                                borderColor: '#93FCFF',
                            }
                        },
                    }],
                    series: [{
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: chartData,
                        rippleEffect: {
                            scale: 4,
                            brushType: 'stroke'
                        },
                        label: {
                            show: true,
                            position: [0, -45],
                            color: '#fff',
                            backgroundColor: 'rgba(0,0,0,0.5)',
                            borderColor: '#93FCFF',
                            borderWidth: 1,
                            padding: 10,
                            formatter: (val) => {
                                return val.name;
                            },
                        },
                        hoverAnimation: true,
                        itemStyle: {
                            color: (params) => {
                                return params.data.active ? '#ff0000' : '#0055ff'
                            },
                            shadowBlur: 15,
                            shadowColor: '#333'
                        },
                    }]
                };
                this.chart.setOption(option);
            },
            onclick(e) {
              this.$emit('clickFactory', e.dataIndex);
            },
            onmouseover(e) {
              this.$emit('selectFactory', e.dataIndex);
            },
            onmouseout(e) {
              this.$emit('selectFactory');
            }
        }
    };
</script>

<style lang="scss" scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>
