<template>
    <div id="demo" class="echart-demo"></div>
</template>

<script setup lang="ts">
// 引入echart和json数据
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import shanDong from './mapData/gd_gx.json';

// 设置echart数据
const setOption = () => {
    // 获取echart对象
    const dom = document.getElementById('demo');
    if (dom) {
        // 初始化
        const myEchart = echarts.init(dom);
        // 注册地图
        echarts.registerMap('山东', shanDong);
        const option = {
            series: [
                {
                    tooltip: {
                        trigger: 'item',
                    },
                    name: '山东省数据',
                    type: 'map',
                    map: '山东', // 自定义扩展图表类型
                    showLegendSymbol: true, // 存在legend时显示
                    label: {
                        // 文字
                        show: true,
                        color: '#fff',
                        fontSize: 10,
                    },
                    itemStyle: {
                        // 地图样式
                        areaColor: '#282C34', // 区域颜色
                        borderColor: '#ffffff', // 边框颜色
                        borderWidth: 1,
                    },
                    emphasis: {
                        // 鼠标移入时显示的默认样式
                        itemStyle: {
                            areaColor: '#4adcf0',
                            borderColor: '#404a59',
                            borderWidth: 1,
                        },
                        label: {
                            // 文字
                            show: true,
                            color: '#0D5EFF',
                            fontSize: 12,
                            fontWeight: 600,
                        },
                    },
                    data: [],
                },
            ],
        };
        myEchart.setOption(option);
        window.addEventListener('resize', function () {
            myEchart.resize();
        });
    }
};

onMounted(() => {
    setOption();
});
</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>
