

import Mock from "mockjs";
//mapData数据结构
export interface MapdataType {
    name: string;
    value: [number, number, number]; //x,y,value  第一个x 第二个y  第三个value
}
export const optionHandle = (regionCode: string,
    list: object[],
    mapData: MapdataType[]) => {
    let top = 45;
    let zoom = ["511500"].includes(regionCode) ? 1.05 : 1;
    return {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
            show: false,
        },
        legend: {
            show: false,
        },
        visualMap: {
            seriesIndex: 0,
            left: 20,
            bottom: 20,
            pieces: [
                { gte: 1000, label: "1000以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
                { gte: 600, lte: 999, label: "600-999" },
                { gte: 200, lte: 599, label: "200-599" },
                { gte: 50, lte: 199, label: "49-199" },
                { gte: 10, lte: 49, label: "10-49" },
                { lte: 9, label: "1-9" }, // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            inRange: {
                // 渐变颜色，从小到大
                // FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
                // 1781B5,
                // 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
                color: [
                    // "#EDF7FD",
                    "rgba(237,247,253,.8)",
                    // "#B7E1F6",
                    "rgba(183,225,246,.9)",
                    // "#81CAEF",
                    "rgba(129,202,239,.9)",
                    // "#38ACE5",
                    "rgba(56,172,229,.9)",
                    // "#1781B5",
                    "rgba(23,129,181,.9)",
                    // "#105A7E",
                    "rgba(16,90,126,0.9)"
                ],
            },
            textStyle: {
                color: "#fff",
            },
        },
        geo: {
            map: regionCode,
            roam: false,
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            top: top,
            // aspectScale: 0.78,
            show: false,
        },
        series: [
            {
                name: "MAP",
                type: "map",
                map: regionCode,
                // aspectScale: 0.78,
                data: list,
                // data: [1,100],
                selectedMode: false, //是否允许选中多个区域
                zoom: zoom,
                geoIndex: 1,
                top: top,
                tooltip: {
                    show: true,
                    position: 'left',
                    formatter: function (params: any) {
                        if (params.data) {
                            // console.log(params); //params是echarts的属性
                            const res = params.data; //res等于params下的数据
                            //return回调一个模板字符串，自定义提示框的形状
                            return `
                            <div class="chartTooltip">
                                <p class="dotTooltip">${res.name}</p>
                                <p class="textTooltip">${res.value}件</p>
                            </div>`;
                        } else {
                            return params.name;
                        }
                    },
                    background:'none',
                    backgroundColor: "transparent",
                    borderColor: "transparent",
                    textStyle: {
                        color: "#FFF",
                    },
                    padding:0,
                },
                label: {
                    show: true,
                    color: "#000",
                    // position: [-10, 0],
                    formatter: function (val: any) {
                        if (val.data !== undefined) {
                            return val.name.slice(0, 2);
                        } else {
                            return "";
                        }
                    },
                    rich: {},
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        // areaColor: "rgba(56,155,183,.7)",
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgba(56,155,183, .8)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺为 false
                        },
                        borderWidth: 1,
                    },
                },
                itemStyle: {
                    borderColor: "rgba(147, 235, 248, .8)",
                    borderWidth: 1,
                    areaColor: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                            },
                        ],
                        globalCoord: false, // 缺为 false
                    },
                    shadowColor: "rgba(128, 217, 248, .3)",
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10,
                },
            },
            {
                data: mapData,
                type: "effectScatter",
                coordinateSystem: "geo",
                symbolSize: function (val: any) {
                    return 4;
                    // return val[2] / 50;
                },
                legendHoverLink: true,
                showEffectOn: "render",
                rippleEffect: {
                    // period: 4,
                    scale: 6,
                    color: "rgba(255,255,255, 1)",
                    brushType: "fill",
                },
                tooltip: {
                    show: true,
                    position: 'left',
                    formatter: function (params: any) {
                        if (params.data) {
                            const res = params.data; //res等于params下的数据
                            //return回调一个模板字符串，自定义提示框的形状
                            return `
                            <div class="chartTooltip">
                                <p class="dotTooltip">${res.name}</p>
                                <p class="textTooltip">${res.value[2]}件</p>
                            </div>`;
                        } else {
                            return params.name;
                        }
                    },
                    background:'none',
                    backgroundColor: "transparent",
                    borderColor: "transparent",
                    textStyle: {
                        color: "#FFF",
                    },
                    padding:0,
                },
                label: {
                    formatter: (param: any) => {
                        return param.name.slice(0, 2);
                    },

                    fontSize: 11,
                    offset: [0, 2],
                    position: "bottom",
                    textBorderColor: "#fff",
                    textShadowColor: "#000",
                    textShadowBlur: 10,
                    textBorderWidth: 0,
                    color: "#FFF",
                    show: true,
                },
                // colorBy: "data",
                itemStyle: {
                    color: "rgba(255,255,255,1)",
                    borderColor: "rgba(2255,255,255,2)",
                    borderWidth: 4,
                    shadowColor: "#000",
                    shadowBlur: 10,
                },
            },
        ],

        //动画效果
        // animationDuration: 1000,
        // animationEasing: 'linear',
        // animationDurationUpdate: 1000
    };
}

export const regionCodes: any = [
    {
        name: '翠屏区',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '南溪区',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '江安县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '长宁县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '高县',
        value:Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '筠连县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '珙县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '兴文县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '屏山县',
        value: Mock.mock('@integer(0, 1000)'),
    },
    {
        name: '叙州区',
        value: Mock.mock('@integer(0, 1000)'),
    }
]