//------------------------------------------------------------------------------------------------

/**
 * 饼图加载
 * @param obj
 * @param id
 */
function pieChartLoad(data, id) {
    var dom = document.getElementById(id);
    var pieChart = echarts.init(dom);

    var option = {
        tooltip: {
            trigger: 'item',
            position:['20%','110%'],
            formatter: function (params) {
                return params.name + ': ' + params.value;
            }
        },
        color: ['#96CEB4','#4ECDC4','#45B7D1','#FF6B6B','#FECA57','#FF9FF3','#54A0FF','#5F27CD','#00D2D3','#FF7675','#208620'],
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['55%', '84%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                },
                z: 1,
                data: data,
            }
        ]
    };
    pieChart.setOption(option);
    if (id === 'breedChart') {
        breedChart = {"chart": pieChart, "option": option};
    }
}

function toThousands(num) {
    num = num.toString().split("."); // 分隔小数点
    var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
    var res = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (i % 3 === 0 && i !== 0) {
            res.push(","); // 添加分隔符
        }
        res.push(arr[i]);
    }
    res.reverse(); // 再次倒序成为正确的顺序
    if (num[1]) { // 如果有小数的话添加小数部分
        res = res.join("").concat("." + num[1]);
    } else {
        res = res.join("");
    }
    return res;

}

function barChartLoad(id) {
    var dom = document.getElementById(id);
    var barChart = echarts.init(dom);
    var predata = [];
    var ydata = [];
    if (gisData) {
        predata[0] = gisData.sumPer;
        ydata[0] = gisData.sum;

        predata[1] = gisData.bankSumPer;
        ydata[1] = gisData.bankSum;

        predata[2] = gisData.normalSumPer;
        ydata[2] = gisData.normalSum;
    } else {
        predata = [100, 50, 50];
        ydata = [1000, 500, 500];
    }
    var option = {
        grid: {
            top: '10%',
            left: '2%',
            right: '5%',
            bottom: '8%',
            // containLabel: true
        },
        tooltip: {
            show: true,
            trigger: "axis",

            /*  formatter: params => {
               if (params.componentSubType === 'bar' && params.seriesName !== '背景条') {
                 return `${params.seriesName}<br />${params.name}:${params.value}`
               } else {
                 return ''
               }
             } */
            formatter: function (data) {
                let result = '';
                let content = '';
                for (let i = 0; i < data.length - 1; i++) {
                    if (data[i].componentSubType === 'bar' && data[i].seriesName !== '背景条') {

                        content += `${data[i].marker} ${data[i].seriesName}<span style='font-size:12px; float:right;margin-left:20px;'>${data[i].data}</span><br/>`
                        result = `<span style='font-size: 14px;'>${data[i].name}</span> <br/> ${content}`;
                    } else {
                        // result = ''
                    }
                }
                return result;
            }
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                margin: 20,
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: [{
            inverse: true,
            type: 'category',
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                align: 'left',
                verticalAlign: 'bottom',
                padding: [0, 0, 26, 10],
                fontSize: "18",
                color: '#fff',
                formatter: function (param) {
                    //  return '{img|}'+ param
                    return ['{img|}' + '{b|' + param + '}']
                },
                rich: {
                    b: {
                        fontSize: 18,
                        color: '#fff',
                        padding: [0, 0, 0, 10]
                    },
                    img: {
                        backgroundColor: {
                            image: '/img/web/group/c-i1.png',
                        },
                        width: 17,
                        align: 'left',
                    }
                }
            },
            axisTick: {
                show: false
            },
            data: ['总重量', '质押重量', '非质押重量'],
        },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    inside: true,
                    verticalAlign: "bottom",
                    textStyle: {
                        fontFamily: 'DINCond-Bold',
                        color: "#ffd12b",
                        fontSize: "20",
                        padding: [0, 0, 26, 0],
                    },
                    formatter: function (param) {
                        return toThousands(param)
                    }
                },
                data: ydata,
            }
        ],
        series: [{
            // 真实数值条形图
            name: '占比',
            type: 'bar', // pictorialBar
            stack: 'all',
            /* emphasis: {
              focus: 'series'
            }, */
            barWidth: 12,
            itemStyle: {
                color: '#00e4fa'
            },
            data: predata,
            z: 1
        },
            {
                name: '辅助值',
                type: 'pictorialBar',
                barWidth: 12,
                symbol: 'roundRect',
                symbolMargin: 2, //间隙
                symbolSize: [2, 12],
                symbolOffset: [-2, '0%'], //向左偏移9
                symbolClip: true, //裁剪掉左侧多余部分
                symbolRepeat: true,
                itemStyle: {
                    color: '#082640'
                },
                data: [100, 100, 100, 100],
                z: 2
            },
            {
                // 辅助背景图形
                name: '背景条',
                type: 'bar', // pictorialBar
                silent: true,
                barWidth: 12,
                barGap: '-100%',
                itemStyle: {
                    color: '#082640'
                },
                data: [100, 100, 100, 100],
                z: 0
            }
        ]
    };
    barChart.setOption(option);
}

function modelingBarChartLoad(id) {
    var dom = document.getElementById(id);
    var barChart = echarts.init(dom);
    var predata = [];
    var ydata = [];
    if (gisData) {
        predata[0] = gisData.bankSumPer;
        ydata[0] = gisData.bankSum;
    } else {
        predata = [50];
        ydata = [500];
    }
    var option = {
        grid: {
            top: '20%',
            left: '2%',
            right: '5%',
            bottom: '1%',
        },
        tooltip: {
            show: true,
            trigger: "axis",
            formatter: function (data) {
                let result = '';
                let content = '';
                for (let i = 0; i < data.length - 1; i++) {
                    if (data[i].componentSubType === 'bar' && data[i].seriesName !== '背景条') {
                        content += `${data[i].marker} ${data[i].seriesName}<span style='font-size:12px; float:right;margin-left:20px;'>${data[i].data}</span><br/>`
                        result = `<span style='font-size: 14px;'>${data[i].name}</span> <br/> ${content}`;
                    }
                }
                return result;
            }
        },
        xAxis: {
            splitLine: {
                show: false
            },
            axisLabel: {
                margin: 20,
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: [{
            inverse: true,
            type: 'category',
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                align: 'left',
                verticalAlign: 'bottom',
                padding: [0, 0, 26, 10],
                fontSize: "18",
                color: '#fff',
                formatter: function (param) {
                    return ['{img|}' + '{b|' + param + '}']
                },
                rich: {
                    b: {
                        fontSize: 18,
                        color: '#fff',
                        padding: [0, 0, 0, 10]
                    },
                    img: {
                        backgroundColor: {
                            image: '/img/web/group/c-i1.png',
                        },
                        width: 17,
                        align: 'left',
                    }
                }
            },
            axisTick: {
                show: false
            },
            data: ['质押重量'],
        },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    inside: true,
                    verticalAlign: "bottom",
                    textStyle: {
                        fontFamily: 'DINCond-Bold',
                        color: "#ffd12b",
                        fontSize: "20",
                        padding: [0, 0, 26, 0],
                    },
                    formatter: function (param) {
                        return toThousands(param)
                    }
                },
                data: ydata,
            }
        ],
        series: [{
            name: '占比',
            type: 'bar',
            stack: 'all',
            barWidth: 12,
            itemStyle: {
                color: '#00e4fa'
            },
            data: predata,
            z: 1
        },
            {
                name: '辅助值',
                type: 'pictorialBar',
                barWidth: 12,
                symbol: 'roundRect',
                symbolMargin: 2,
                symbolSize: [2, 12],
                symbolOffset: [-2, '0%'],
                symbolClip: true,
                symbolRepeat: true,
                itemStyle: {
                    color: '#082640'
                },
                data: [100],
                z: 2
            },
            {
                name: '背景条',
                type: 'bar',
                silent: true,
                barWidth: 12,
                barGap: '-100%',
                itemStyle: {
                    color: '#082640'
                },
                data: [100],
                z: 0
            }
        ]
    };
    barChart.setOption(option);
}