import EChartsReact from 'echarts-for-react';
import * as echarts from 'echarts';
import china from "@/assets/MapJson/全國(guó).json"; //默認(rèn)引入全國(guó)地圖
import { useRef, } from 'react';
echarts.registerMap('map', china);//默認(rèn)注冊(cè)全國(guó)地圖
export default () => {
    let curRef = useRef(null);
    let height = window.screen.availHeight

    let option = {
        title: {
            text: '全國(guó)地圖',
            textStyle: {
                color: "#000",
            },
            left: 'center',
        },
        series: [
            {
                name: '全國(guó)地圖',
                type: 'map',
                mapType: 'map',
                scaleLimit: {
                    //滾輪縮放的極限控制
                    min: 0.5, //縮放最小大小
                    max: 10, //縮放最大大小
                },

                label: { // 圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，比如值，名稱等。
                    show: true, //顯示省市名稱
                    position: [1, 100], // 相對(duì)的百分比
                    fontSize: 12,
                    offset: [2, 0], // 是否對(duì)文字進(jìn)行偏移。默認(rèn)不偏移。例如：`[30, 40]`?表示文字在橫向上偏移?`30`，縱向上偏移?`40`。
                    align: "left" // 文字水平對(duì)齊方式，默認(rèn)自動(dòng)。
                },
                itemStyle: { // 地圖區(qū)域的多邊形 圖形樣式
                    areaColor: "#fff" // 地圖圖形顏色
                },
                roam: true, // 是否開(kāi)啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開(kāi)啟。如果只想要開(kāi)啟縮放或者平移，可以設(shè)置成?`'scale'`?或者?`'move'`。設(shè)置成?`true`?為都開(kāi)啟
                zoom: 1.25, // 當(dāng)前視角的縮放比例
            }
        ]
    }

    return <div className='bazaarMap'>
        <EChartsReact option={option} ref={curRef} style={{ width: '100%', height: height, zIndex: 222 }}
            lazyUpdate={true} notMerge={true} onEvents={{
                'click': (param: any) => {//echarts點(diǎn)擊事件
                    if (param.name) {//判斷名稱是否為空
                        const echartInstance = curRef.current.getEchartsInstance();//獲取echarts實(shí)例
                        let options = echartInstance.getOption()//獲取option

                        let provinceJSON = null
                        try {
                            provinceJSON = require(`@/assets/MapJson/${param.name}.json`);//根據(jù)點(diǎn)擊的省名稱查詢Geojson地圖數(shù)據(jù)（我是將地圖數(shù)據(jù)全部保存在本地，可根據(jù)API獲取地圖json）
                            echarts.registerMap('map', provinceJSON);//注冊(cè)點(diǎn)擊的省份地圖

                            options.title[0].text = param.name + '地圖'
                            options.series[0].name = param.name + '地圖'

                            // options.series[0].center = china.features.find(item => item.properties.name === param.name)?.properties?.center//修改點(diǎn)擊后地圖中心位置，不用會(huì)存在偏移，我使用下邊null,默認(rèn)全局居中
                            options.series[0].center = null;　　//修改點(diǎn)擊后地圖中心位置，null默認(rèn)全局居中
                            echartInstance.setOption(options, true)//修改echarts option
                        } catch (error) {//獲取Geojson地圖異常返回到全國(guó)地圖，我只存在市級(jí)地圖數(shù)據(jù)，所以點(diǎn)擊市級(jí)行政區(qū)會(huì)返回到全國(guó)地圖。
                            options.title[0].text = '全國(guó)地圖'
                            echarts.registerMap('map', china);
                            options.series[0].name = '全國(guó)地圖'

                            options.series[0].center = null
                            echartInstance.setOption(options, true)
                        }
                    }
                },
            }} />
    </div>
}