import * as echarts from "echarts";



export function fanChart1(data?: any, title?: string, datas?: any, titles?: any) {//折线图 套
    let serves: any = [{
        name: title,
        type: 'line',
        tooltip: {
            valueFormatter: function (value) {
                let name: any;
                name = numFormat(value);
                return name + '套';
            }
        },
        color: "#91CC75",
        lineStyle: { // X 轴颜色配置
            color: '#91CC75'
        },
        smooth: true,
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#91CC75'
                },
                {
                    offset: 1,
                    color: 'rgba(255,255,255,0)'
                }
            ])
        },
        data: data.saleAmount
    }]

    if (datas) {
        serves.push(
            {
                name: titles,
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(formatNumber(value));
                        return name + '万㎡';
                    }
                },
                smooth: true,
                yAxisIndex: 1,//使用第二个y轴
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#175888'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)'
                        }
                    ])
                },
                data: datas.saleAmount,
            })
    }



    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '   ';
                        }
                        return newVal;
                    }
                },
            },
            {
                type: "value",
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        // if (val.length > 3) {
                        //     newVal = val.substring(0, 3) + '...';
                        // } else {
                        //     newVal = val + '   ';
                        // }
                        return newVal;
                    }
                },
            },
        ],
        series: serves
    }
    return option
}

export function fanChart2(data?: any, title?: string) {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '   ';
                        }
                        return newVal;
                    }
                },
            }
        ],
        series: [
            {
                name: title,
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(value);
                        return name + '元/㎡';
                    }
                },
                lineStyle: { // X 轴颜色配置
                    color: '#F7B851'
                },
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#F7B851'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)'
                        }
                    ])
                },
                color: "#F7B851",
                data: data.saleAmount
            },
        ]
    }
    return option
}

export function fanChart3(data?: any) {//扇形图
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            itemGap: 15,
            // top: '33%',
            textStyle: {
                color: '#46B8FF'
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '50%'],
                itemStyle: {
                    borderRadius: 8,
                    normal: {
                        label: {
                            textStyle: {
                                color: '#00FFE9',
                                fontSize: 14,
                                fontWeight: 'bolder'
                            },
                            formatter: '{b}({d}%)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#00FFE9'
                            }
                        },
                        color: function (colors) {
                            var colorList = [
                                '#5470c6',
                                '#f9c956',
                                '#75bedc'
                            ];
                            return colorList[colors.dataIndex];
                        }
                    }
                },
                data: data
            }
        ]
    }
    return option
}
export function fanChart31(data?: any) {//扇形图
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            itemGap: 15,
            // top: '33%',
            textStyle: {
                color: '#46B8FF'
            }
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '70%'],
                startAngle: 180,
                itemStyle: {
                    borderRadius: 8,
                    normal: {
                        label: {
                            textStyle: {
                                color: '#00FFE9',
                                fontSize: 14,
                                fontWeight: 'bolder'
                            },
                            formatter(param) {
                                // correct the percentage
                                return param.name + ' (' + param.percent * 2 + '%)';
                            }
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#00FFE9'
                            }
                        },
                        color: function (colors) {
                            var colorList = [
                                '#5470c6',
                                '#f9c956',
                                '#75bedc'
                            ];
                            return colorList[colors.dataIndex];
                        }
                    }
                },
                data: data
            }
        ]
    }
    return option
}

export function fanChart4(data?: string, title?: string) {//折线图 面积
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999999'
                }
            },
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {//坐标轴在grid区域中的分割线
                    show: true
                },

                axisLabel: {//坐标轴刻度标签
                    show: true,
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '   ';
                        }
                        return newVal;
                    }
                },

            },
        ],
        series: [
            {
                name: title,
                type: 'line',
                barWidth: '50%',//固定柱子宽度
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(formatNumber(value));
                        return name + '万㎡';
                    }
                },
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#175888'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)'
                        }
                    ])
                },
                data: data.saleAmount,
            },
        ]
    }
    return option
}

export function fanChart5(data?: any, tooltip?: any, colorsor?: any) {//扇形图


    if (tooltip == 1) tooltip = {
        valueFormatter: function (value: any) {
            let name: any;
            name = numFormat(value);
            return name + '㎡';
        }
    }
    const option = {
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: [40, 70],
                center: ['50%', '50%'],
                tooltip: tooltip,
                itemStyle: {
                    borderRadius: 8,
                    normal: {
                        label: {
                            textStyle: {
                                color: '#00FFE9',
                                fontSize: 14,
                                fontWeight: 'bolder'
                            },
                            formatter: '{b}({d}%)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#00FFE9'
                            }
                        },
                        color: function (colors: any) {
                            let colorList: any = [
                                '#fc8251',
                                '#91cd77',
                                '#5470c6',
                                '#ef6567',
                                '#f9c956',
                                '#75bedc',
                                '#fc8251',
                                '#91cd77',
                            ]

                            if (colorsor) colorList = colorsor
                            return colorList[colors.dataIndex];
                        }
                    }
                },
                data: data
            }
        ]
    }
    return option
}

export function fanChart6(data?: string, title?: any) {//柱状图 双数据
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999999'
                }
            },
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {//坐标轴在grid区域中的分割线
                    show: true,
                    lineStyle: {
                        color: ['#717171'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {//坐标轴刻度标签
                    show: true,
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '';
                        }
                        return newVal;
                    }
                },

            },
            {
                type: 'value',
                splitLine: {//坐标轴在grid区域中的分割线
                    show: false,
                },
                axisLabel: {//坐标轴刻度标签
                    show: true,
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '   ';
                        }
                        return newVal;
                    }
                },

            },
        ],
        series: [
            {
                name: title[0],
                type: 'bar',
                barWidth: '30%',//固定柱子宽度
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(formatNumber(value));
                        return name + '万㎡';
                    }
                },
                data: data.saleAmount,
            },
            {
                name: title[1],
                type: 'bar',
                barWidth: '30%',//固定柱子宽度
                color: "#91CC75",
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(value);
                        return name + '套';
                    }
                },
                data: data.saleAmount1,
            },
        ]
    }
    return option
}

export function fanChart7(data?: any, title?: any) {//柱状图 双数据
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999999'
                }
            },
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#66B8A7'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {//坐标轴在grid区域中的分割线
                    show: true,
                    lineStyle: {
                        color: ['#717171'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {//坐标轴刻度标签
                    show: true,
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '';
                        }
                        return newVal;
                    }
                },
            },
        ],
        series: [
            {
                name: title,
                type: 'bar',
                barWidth: '30%',//固定柱子宽度
                tooltip: {
                    valueFormatter: function (value) {
                        return value + 'm²';
                    }
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                    ])
                },
                data: data.saleAmount,
            },
        ]
    }
    return option
}

export function fanChart8(data?: any, title?: string) {
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.xAxis,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    interval: 0, // 强制显示所有标签
                },
                axisPointer: {
                    type: 'shadow',
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#25BCB8'
                    },
                    formatter: function (params: number | string) {
                        //标签输出形式
                        let val = params + '';
                        let newVal = '';
                        if (val.length > 3) {
                            newVal = val.substring(0, 3) + '...';
                        } else {
                            newVal = val + '   ';
                        }
                        return newVal;
                    }
                },
            }
        ],
        series: [
            {
                name: title,
                type: 'line',
                /*areaStyle: {
                    color: '#DDDC6B'
                },*/
                emphasis: {
                    focus: 'series'
                },
                lineStyle: { // X 轴颜色配置
                    color: '#58C8DA'
                },
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#175888'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)'
                        }
                    ])
                },
                tooltip: {
                    valueFormatter: function (value) {
                        let name: any;
                        name = numFormat(value);
                        return name;
                    }
                },
                data: data.saleAmount
            },
        ]
    }
    return option
}


function numFormat(num: string | number) {
    num = num == undefined ? 0 : num;
    let c = (num.toString().indexOf('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    return c;
}

function formatNumber(num: string | number) {
    num = Number(num);
    if (num == 0) {
        return num + "";
    } else {
        if ((num / 10000).toFixed(2) == "0") {
            //小于100的保留2位
            return (num / 100).toFixed(4)
        } else {
            // parseFloat() 去掉后面不用的0，如50.00
            //大于100的保留2位
            return parseFloat((num / 10000).toFixed(2))
        }
    }
}
