import * as echarts from 'echarts';
import chinaJson from './China.json'
//饼图
export function getPieOption(data, title) {
    let option = {
        color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
        title: {
            text: title,
            top: 10,
            left: 10,
            textStyle: {
                color: "rgba(59, 65, 75, 1)",
                fontSize: 16,
                fontWeight: 700
            }
        },
        series: [
            {
                type: 'pie',
                radius: [75, 132],
                height: '100%',
                center: ['50%', '50%'],
                width: '100%',
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{b} {d}%',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < 556 / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            }]
    }
    return option
}
export function getPieOption1(data, title) {
    let option = {
        color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
        title: {
            text: title,
            top: 10,
            left: 10,
            textStyle: {
                color: "rgba(59, 65, 75, 1)",
                fontSize: 16,
                fontWeight: 700
            }
        },
        series: [
            {
                type: 'pie',
                radius: [70, 110],
                height: '100%',
                center: ['50%', '50%'],
                width: '100%',
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{b}\n{two|{c}家 {d}%}',
                    fontSize: 17.6,
                    fontWeight: 700,
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 23,
                    rich: {
                        two: {
                            fontSize: 15,
                            color: ' rgba(95, 101, 108, 1)',
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < 556 / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            }]
    }
    return option
}
export function getPieOption2(data, title) {
    let option = {
        color: ["#4096ff", "#b37feb", "#ff7875", "#85a5ff", "#69b1ff", "#ffc069", "#87e8de"],
        title: {
            text: title,
            top: 10,
            left: 10,
            textStyle: {
                color: "rgba(59, 65, 75, 1)",
                fontSize: 16,
                fontWeight: 700
            }
        },
        legend: {
            icon: 'rect',
            top: 'center',
            right: '40',
            orient: 'vertical',
            itemWidth: 30,
            itemHeight: 20,
            borderRadius: 2,
            formatter: function (name) {
                // 获取系列数据，假设第一个系列为饼图
                let seriesData = option.series[0].data; // [citation:8]
                // 也可以考虑使用 this.getSeries()[0].data [citation:8]
                let currentValue;
                // 计算数据总和并查找当前图例名对应的数值
                seriesData.forEach(item => {
                    if (item.name === name) {
                        currentValue = item.value;
                    }
                });
                return `  ${name} ${currentValue} %`
            },
            itemGap: 10,
            textStyle: {
                color: 'rgba(59, 65, 75 ,0.8)',
                fontSize: 18,
                fontWeight: 500
            },
        },
        series: [
            {
                type: 'pie',
                radius: [70, 120],
                height: '100%',
                center: ['33%', '50%'],
                width: '100%',
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    scale: false,
                },
                label: {
                    show: false,
                },
                data: data
            }]
    }
    return option
}
export function getMapOption() {
    echarts.registerMap('china', chinaJson);
    let data = [{
        name: '2256',
        value: 2256
    }, {
        name: '578',
        value: 578
    }, {
        name: '744',
        value: 744
    }, {
        name: '806',
        value: 806
    }, {
        name: '336',
        value: 336
    }, {
        name: '325',
        value: 325
    }, {
        name: '487',
        value: 487
    }, {
        name: '343',
        value: 343
    }, {
        name: '432',
        value: 432
    }, {
        name: '273',
        value: 273
    }, {
        name: '1055',
        value: 1055
    }, {
        name: '590',
        value: 590
    }, {
        name: '319',
        value: 319
    }, {
        name: '349',
        value: 349
    }, {
        name: '126',
        value: 126
    }, {
        name: '97',
        value: 97
    }, {
        name: '201',
        value: 201
    }, {
        name: '398',
        value: 398
    }, {
        name: '795',
        value: 795
    }, {
        name: '655',
        value: 655
    }, {
        name: '295',
        value: 295
    }, {
        name: '311',
        value: 311
    }, {
        name: '993',
        value: 993
    }, {
        name: '601',
        value: 601
    }, {
        name: '275',
        value: 275
    }, {
        name: '317',
        value: 317
    }, {
        name: '1000',
        value: 1000
    }, {
        name: '186',
        value: 186
    }, {
        name: '261',
        value: 261
    }, {
        name: '132',
        value: 132
    }, {
        name: '18',
        value: 18
    }, {
        name: '11',
        value: 11
    },];

    let geoCoordMap = {
        '2256': [116.46, 39.92],
        '578': [121.29, 31.14],
        '744': [117.2, 39.13],
        '806': [106.32, 29.32],
        '336': [126.41, 45.45],
        '325': [125.19, 43.52],
        '487': [123.24, 41.50],
        '343': [111.48, 40.49],
        '432': [114.28, 38.02],
        '273': [112.34, 37.52],
        '1055': [117, 36.38],
        '590': [113.42, 34.48],
        '319': [108.54, 34.16],
        '349': [103.49, 36.03],
        '126': [106.16, 38.20],
        '97': [101.45, 36.38],
        '201': [87.36, 43.48],
        '398': [117.18, 31.51],
        '795': [118.50, 32.02],
        '655': [120.09, 30.14],
        '295': [113, 28.11],
        '311': [115.52, 28.41],
        '993': [114.21, 30.37],
        '601': [104.05, 30.39],
        '275': [106.42, 26.35],
        '317': [119.18, 26.05],
        '1000': [113.15, 23.08],
        '186': [110.20, 20.02],
        '261': [108.20, 22.48],
        '132': [102.41, 25],
        '18': [91.10, 29.40],
        '11': [114.10, 22.18],
    };

    function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        console.log(res)
        return res;
    }

    let option = {
        tooltip: {
            show: false
        },

        geo: {
            map: 'china',
            roam: true,
            center: [104.95, 35.27],
            // 地图尺寸为容器宽高较小值的80%
            zoom: 1.7,
            // scaleLimit:{
            //   max:'1.2',
            //   min:'0.7'
            // },
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: 'rgba(0,0,0,0.6)'
                    }
                }
            },
            itemStyle: {
                areaColor: 'rgba(231, 243, 255, 1)', // 设置所有区域的默认填充色[citation:8]
                borderColor: 'rgb(5, 95, 194)', // 设置边界线颜色[citation:8]
                borderWidth: 1 // 设置边界线宽度[citation:8]
            },
        },
        // backgroundColor: 'rgba(0,51,102, 1)',
        series: [{
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 10,

            symbolRotate: 0,
            symbolOffset: ['50%', '-100%'],
            tooltip: {
                show: true
            },
            label: {
                normal: {
                    formatter: '{a}',
                    position: 'top',
                    show: false,
                    textStyle: {
                        color: '#000000',
                        fontSize: 16
                    }

                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: 3,
                    borderColor: 'rgba(255, 163, 158, 1)',
                    color: 'rgba(255, 77, 79, 1)'
                }
            }
        }, {
            name: '个人会员数量',
            type: 'map',
            geoIndex: 0,
            tooltip: {
                show: false
            },
            data: [{
                name: '北京',
                value: 2256
            }, {
                name: '天津',
                value: 744
            }, {
                name: '上海',
                value: 578
            }, {
                name: '重庆',
                value: 806
            }, {
                name: '河北',
                value: 432
            }, {
                name: '河南',
                value: 590
            }, {
                name: '云南',
                value: 132
            }, {
                name: '辽宁',
                value: 487
            }, {
                name: '黑龙江',
                value: 336
            }, {
                name: '湖南',
                value: 295
            }, {
                name: '安徽',
                value: 398
            }, {
                name: '山东',
                value: 1055
            }, {
                name: '新疆',
                value: 201
            }, {
                name: '江苏',
                value: 795
            }, {
                name: '浙江',
                value: 655
            }, {
                name: '江西',
                value: 311
            }, {
                name: '湖北',
                value: 993
            }, {
                name: '广西',
                value: 261
            }, {
                name: '甘肃',
                value: 349
            }, {
                name: '山西',
                value: 273
            }, {
                name: '内蒙古',
                value: 343
            }, {
                name: '陕西',
                value: 319
            }, {
                name: '吉林',
                value: 325
            }, {
                name: '福建',
                value: 317
            }, {
                name: '贵州',
                value: 275
            }, {
                name: '广东',
                value: 1000
            }, {
                name: '青海',
                value: 97
            }, {
                name: '西藏',
                value: 18
            }, {
                name: '四川',
                value: 601
            }, {
                name: '宁夏',
                value: 126
            }, {
                name: '海南',
                value: 186
            }, {
                name: '台湾',
                value: 0
            }, {
                name: '香港',
                value: 11
            }, {
                name: '澳门',
                value: 0
            }]
        }]
    };
    return option

}
export const getBarChart = (nameList, valueList, color = ['rgba(255, 159, 22, 1)', 'rgba(255, 159, 22, 0)'], name) => {
    const option = {
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(function (item, index) {
                    // 自定义颜色数组
                    const customColors = [color[0]];
                    const dotColor = customColors[index % customColors.length]; // 循环取色
                    // 创建彩色圆点图标
                    const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
                    result += dot + `${item.seriesName}: ${item.value}<br/>`;
                });
                return result;
            }
        },
        grid: {
            top: '3%',
            right: '3%',
            bottom: '1%',
            left: '1%',
            containLabel: true
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: "rgba(231, 243, 255, 1)"
                }
            },
            axisTick:
                { show: false },
            type: "category",
            boundaryGap: [100, 100],
            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            data: nameList
        },
        yAxis: {
            type: "value",
            axisLine: {
                lineStyle: {
                    type: "dashed"
                }
            },

            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            splitNumber: 8,
            splitLine: {
                lineStyle: {
                    width: 1,
                    type: "dashed",
                    color: "rgba(231, 243, 255, 1)"
                },

            }
        },
        series: [{
            name: name,
            type: 'bar',
            data: valueList,

            barWidth: 12,
            itemStyle: {
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0, 1, 0, 0,
                        [{
                            offset: 0,
                            color: color[1]
                        },
                        {
                            offset: 1,
                            color: color[0]
                        }
                        ]);
                },
                barBorderRadius: 10,
            }
        }]
    }
    return option
}
export const getLineChart = (color = 'rgba(146, 84, 222, 1)') => {
    const option = {
        title: {
            text: ""
        },
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(function (item, index) {
                    // 自定义颜色数组
                    const customColors = [color];
                    const dotColor = customColors[index % customColors.length]; // 循环取色
                    // 创建彩色圆点图标
                    const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
                    result += dot + `${item.seriesName}: ${item.value}<br/>`;
                });
                return result;
            }
        },
        grid: {
            top: '3%',
            right: '3%',
            bottom: '1%',
            left: '1%',
            containLabel: true
        },
        // toolbox: {
        // 	feature: {
        // 		saveAsImage: {}
        // 	}
        // },
        xAxis: {
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: "rgba(231, 243, 255, 1)"
                }
            },
            axisTick:
                { show: false },
            type: "category",
            boundaryGap: [100, 100],
            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            data: ["2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"]
        },
        yAxis: {
            type: "value",
            axisLine: {
                lineStyle: {
                    type: "dashed"
                }
            },

            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            splitNumber: 8,
            splitLine: {
                lineStyle: {
                    width: 1,
                    type: "dashed",
                    color: "rgba(231, 243, 255, 1)"
                },

            }
        },
        series: [
            {
                name: "增长趋势",
                type: "line",
                symbolSize: 8,
                symbol: 'circle',
                itemStyle: {
                    color: "#ffffff",
                    borderColor: color,
                    borderWidth: 3
                },
                lineStyle: {
                    color: color,
                },
                data: [3, 6, 4, 7, 9, 6, 5, 6, 6]
            }
        ]
    };
    return option;
}
export const getHorizontalBarChart1 = (nameList, valueList, isPer) => {
    const colorList = ['#ce4f51', '#1778ff']
    const option = {
        tooltip: {},
        grid: {
            top: '3%',
            right: '3%',
            bottom: '1%',
            left: '1%',
            containLabel: true
        },
        color: ['#ce4f51', '#1778ff'],
        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            show: false
        },
        yAxis: {
            type: 'category',
            data: nameList,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true
            }
        },
        series: [{
            type: 'bar',
            data: valueList.map((item, index) => {
                return {
                    value: item,
                    label: {
                        textStyle: {
                            color: index < 4 ? '#1778ff' : '#ce4f51'
                        }
                    }
                };
            }),
            label: {
                show: true,
                position: [450, -2],
                formatter: function (params) {
                    return isPer ? params.value + '%' : params.value
                }
            },
            barWidth: 8,
            itemStyle: {
                color: function (params) {
                    if (params.dataIndex < 4) {
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [{
                                offset: 0,
                                color: 'rgba(22, 119, 255, 0)'
                            },
                            {
                                offset: 1,
                                color: colorList[1]
                            }
                            ]);
                    } else {
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                            [{
                                offset: 0,
                                color: 'rgba(206, 79, 81, 0)'
                            },
                            {
                                offset: 1,
                                color: colorList[0]
                            }
                            ]);
                    }

                },
                barBorderRadius: 4,
            }
        }]
    }
    return option
}
export const getHorizontalBarChart2 = (nameList, valueList, isPer) => {
    const colorList = [
        ['rgba(64, 150, 255, 1)', 'rgba(64, 150, 255, 0)'],
        ['rgba(255, 120, 117, 1)', 'rgba(255, 120, 117, 0)'],
        ['rgba(89, 126, 247, 1)', 'rgba(89, 126, 247, 0)'],
        ['rgba(54, 207, 201, 1)', 'rgba(54, 207, 201, 0)'],
        ['rgba(255, 197, 61, 1)', 'rgba(255, 197, 61, 0)'],
        ['rgba(179, 127, 235, 1)', 'rgba(179, 127, 235, 0)']
    ]
    console.log(colorList)
    const option = {
        tooltip: {},
        grid: {
            top: '6%',
            right: '6%',
            bottom: '0',
            left: '1%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            show: false
        },
        yAxis: {
            type: 'category',
            data: nameList,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true
            }
        },
        series: [{
            type: 'bar',
            data: valueList.map((item, index) => {
                return {
                    value: item,
                    label: {
                        textStyle: {
                            color: colorList[index][0]
                        }
                    }
                };
            }),
            label: {
                show: true,
                position: [340, -2],
                formatter: function (params) {
                    return isPer ? params.value + '%' : params.value
                }
            },
            barWidth: 8,
            itemStyle: {
                color: function (params) {
                    console.log('params', params)
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0,
                        [{
                            offset: 0,
                            color: colorList[params.dataIndex][1]
                        },
                        {
                            offset: 1,
                            color: colorList[params.dataIndex][0]
                        }
                        ]);

                },
                barBorderRadius: 4,
            }
        }]
    }
    return option
}
export const getMultipleLineChart = (obj) => {
    const color = ['rgba(19, 168, 168, 1)', 'rgba(146, 84, 222, 1)', 'rgba(250, 140, 22, 1)', 'rgba(206, 79, 81, 1)']
    const option = {
        title: {
            text: ""
        },
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(function (item, index) {
                    // 自定义颜色数组
                    const customColors = color;
                    const dotColor = customColors[index % customColors.length]; // 循环取色
                    // 创建彩色圆点图标
                    const dot = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${dotColor};"></span>`;
                    result += dot + `${item.seriesName}: ${item.value}<br/>`;
                });
                return result;
            }
        },
        grid: {
            top: '12%',
            right: '3%',
            bottom: '3%',
            left: '1%',
            containLabel: true
        },
        legend: {
            right: "5%",
            icon: "circle",
            itemWidth: 15,
            textStyle: {
                color: "rgba(0, 0, 0, 0.8)",
                fontSize: 14,
                fontWeight: 400
            },
            itemGap: 17,
            data: obj.data.map((item, index) => {
                return { name: item.name, itemStyle: { color: color[index] } }
            })
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: "rgba(231, 243, 255, 1)"
                }
            },
            axisTick:
                { show: false },
            type: "category",
            boundaryGap: [100, 100],
            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            data: obj.dates
        },
        yAxis: {
            type: "value",
            axisLine: {
                lineStyle: {
                    type: "dashed"
                }
            },

            axisLabel: {
                color: "rgba(95, 101, 108, 1)",
                // fontSize: 22,
                // fontWeight: 400
            },
            splitNumber: 8,
            splitLine: {
                lineStyle: {
                    width: 1,
                    type: "dashed",
                    color: "rgba(231, 243, 255, 1)"
                },

            }
        },
        series: obj.data.map((item, index) => {
            return {
                name: item.name,
                type: "line",
                symbolSize: 6,
                symbol: 'circle',
                itemStyle: {
                    color: "#ffffff",
                    borderColor: color[index],
                    borderWidth: 2
                },
                lineStyle: {
                    width: 1,
                    color: color[index],
                },
                data: item.value
            }
        })


    };
    return option;
}