
import * as echarts from "echarts";
import worldJson from '@/assets/json/world.json'
import _ from "lodash";
export function getPieChart(number, current, total) {
    const option = {
        // 图表标题可置于中心，模拟居中文字的一部分
        title: {
            text: current + '/' + total, // 主百分比文字
            left: 'center',
            top: 'center',
            textStyle: {
                fontSize: 20,
                fontWeight: 'bold',
                color: '#333'
            }
        },
        series: [
            // 背景环系列
            {
                type: 'pie',
                radius: ['84%', '96%'], // 细圆环：内半径50%，外半径55% [citation:5]
                silent: true, // 禁用交互 [citation:2]
                label: { show: false }, // 不显示标签 [citation:2]
                data: [
                    {
                        value: 100, // 背景环占满100%，模拟完整圆环
                        itemStyle: {
                            color: '#f0f0f0' // 背景环颜色，通常为浅色
                        }
                    }
                ]
            },
            // 数据进度环系列
            {
                type: 'pie',
                radius: ['80%', '100%'], // 与背景环同样粗细
                startAngle: 90, // 起始角度，从顶部开始 [citation:4]
                labelLine: false,
                silent: true,
                data: [
                    {
                        value: number, // 实际进度值，对应70%
                        itemStyle: {
                            // 使用线性渐变
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: 'rgba(105, 177, 255, 1)' // 渐变起始颜色
                                }, {
                                    offset: 1, color: 'rgba(255, 120, 117, 1)' // 渐变结束颜色
                                }]
                            }
                        }
                    },
                    {
                        value: 100 - number, // 剩余部分 (100 - 70)%
                        itemStyle: {
                            color: 'transparent' // 剩余部分透明，仅显示实际进度部分
                        }
                    }
                ]
            }
        ]
    };
    return option
}
export function setChart(option, chartDom) {
    let chart = echarts.init(chartDom);
    chart.setOption(option);
    return chart;
};
export function getMapOption(data,levelMap) {
    echarts.registerMap('world', worldJson);
    function convertData(data) {
        let res = [];
        _.each(data, (item1) => {
            _.each(item1.children, (item) => {
                res.push({
                    name: item1.name,
                    value: item.position.concat(item.level),
                    itemStyle: {
                        color: levelMap[item.level].color[0],
                        borderColor: levelMap[item.level].color[1]
                    }
                });
            })
        })
        return res;
    }
    let option = {
        tooltip: {
            show: false
        },
        // visualMap: {
        //     type: 'piecewise', // 可选：'continuous' (连续型) 或 'piecewise' (分段型)[citation:2]
        //     dimension: 2, // 指定使用数据的第3个维度（即上面数据中的等级值）进行映射
        //     min: 1, // 映射范围最小值
        //     max: 5, // 映射范围最大值
        //     // 定义分段区间和颜色
        //     show: false,
        //     pieces: [
        //         {
        //             min: 1,
        //             max: 1,
        //             label: '特别重大风险',
        //             color: 'rgba(255, 77, 79, 1)'
        //         }, // 绿色
        //         {
        //             min: 2,
        //             max: 2,
        //             label: '重大风险',
        //             color: 'rgba(255, 169, 64, 1)'
        //         },
        //         {
        //             min: 3,
        //             max: 3,
        //             label: '较大风险',
        //             color: 'rgba(250, 219, 20, 1)'
        //         },
        //         {
        //             min: 4,
        //             max: 4,
        //             label: '一般风险',
        //             color: 'rgba(64, 150, 255, 1)'
        //         },
        //         {
        //             min: 5,
        //             max: 5,
        //             label: '几乎无风险',
        //             color: 'rgba(54, 207, 201, 1)'
        //         },

        //     ],
        //     orient: 'horizontal',
        //     left: 'center',
        //     top: 0
        // },
        geo: {
            map: 'world',
            roam: true,
            // 地图尺寸为容器宽高较小值的80%
            zoom: 1.5,
            center: [31.614149450443932, 20.978078159827206],
            // 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: 4,
                    borderColor: 'rgba(255, 163, 158, 1)',
                    color: 'rgba(255, 77, 79, 1)'
                }
            }
        }]
    };
    return option

}