let myChart = echarts.init(document.getElementById('echarts-one'));
let myChart2 = echarts.init(document.getElementById('echarts-two'));
let myChart3 = echarts.init(document.getElementById('echarts-three'));
function initOneCharts(list) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    let nameList = []; // x轴数据
    let values = [];
    let values2 = [];
    let valueList = [];
    $.each(list, function (index, item) {
        nameList.push(item.yearMonth);
        values.push(item.value);
        values2.push(item.value2);
    })
    nameList = nameList.reverse(),values = values.reverse(),values2 = values2.reverse();
    valueList[0] = values, valueList[1] = values2;
    const legend = ['运输车辆', '吊车'];
    const yName = ''; // y轴名称
    const unit = '辆';
    /* 颜色 */
    const colorList = ['rgba(57, 126, 240, 1)', 'rgba(250, 173, 20, 1)']; // 主颜色系
    const areaColorList = [
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: 'rgba(0, 117, 255, 0.3)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(0, 117, 255, 0)' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: 'rgba(255, 175, 20, 0.3)' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: 'rgba(255, 179, 31, 0)' // 100% 处的颜色
                }
            ],
            global: false // 缺省为 false
        }
    ]; // 渐变空间颜色

    /* 数据整理 */
    // 获取拐点数据
    const getLineDataAll = () => {
        let dataArr = []; // 拐点数据
        let arr1 = [];
        let arr2 = [];
        nameList.map((item, index) => {
            // 判断大小显示label
            // arr1
            if (Number(valueList[0][index]) > Number(valueList[1][index])) {
                arr1.push({
                    value: valueList[0][index],
                    label: {
                        show: true,
                        z: 3,
                        position: 'top',
                        opacity: 1,
                        backgroundColor: 'transparent',
                        offset: [0, -8],
                        borderRadius: 2,
                        formatter: (params) => {
                            return `{a|${valueList[0][index]}}\n{b|${valueList[1][index]}}`;
                        },
                        rich: {
                            a: {
                                fontSize: 14,
                                color: '#397ef0',
                                fontFamily: fontFamily,
                                padding: [4, 2, 2, 2]
                            },
                            b: {
                                fontSize: 14,
                                color: '#ffe58f',
                                fontFamily: fontFamily,
                                padding: [2, 2, 0, 2]
                            }
                        }
                    },
                    emphasis: {
                        scale: 2,
                        itemStyle: {
                            borderWidth: 3
                        },
                        label: {
                            opacity: 1,
                            rich: {
                                a: {
                                    fontSize: 14,
                                    color: '#397ef0',
                                    fontFamily: fontFamily,
                                    padding: [4, 2, 2, 2]
                                },
                                b: {
                                    fontSize: 14,
                                    color: '#ffe58f',
                                    fontFamily: fontFamily,
                                    padding: [2, 2, 0, 2]
                                }
                            }
                        }
                    }
                });
            } else {
                arr1.push({
                    value: valueList[0][index],
                    emphasis: {
                        scale: 2,
                        itemStyle: {
                            borderWidth: 3
                        }
                    }
                });
            }
            // arr2
            if (Number(valueList[1][index]) > Number(valueList[0][index])) {
                arr2.push({
                    value: valueList[1][index],
                    label: {
                        show: true,
                        z: 3,
                        position: 'top',
                        opacity: 1,
                        backgroundColor: 'transparent',
                        offset: [0, -8],
                        borderRadius: 2,
                        formatter: (params) => {
                            return `{b|${valueList[1][index]}}\n{a|${valueList[0][index]}}`;
                        },
                        rich: {
                            a: {
                                fontSize: 14,
                                color: '#397ef0',
                                fontFamily: fontFamily,
                                padding: [2, 2, 0, 2]
                            },
                            b: {
                                fontSize: 14,
                                color: '#ffe58f',
                                fontFamily: fontFamily,
                                padding: [4, 2, 0, 2]
                            }
                        }
                    },
                    emphasis: {
                        scale: 2,
                        itemStyle: {
                            borderWidth: 3
                        },
                        label: {
                            opacity: 1,
                            rich: {
                                a: {
                                    fontSize: 14,
                                    color: '#397ef0',
                                    fontFamily: fontFamily,
                                    padding: [2, 2, 0, 2]
                                },
                                b: {
                                    fontSize: 14,
                                    color: '#ffe58f',
                                    fontFamily: fontFamily,
                                    padding: [4, 2, 0, 2]
                                }
                            }
                        }
                    }
                });
            } else {
                arr2.push({
                    value: valueList[1][index],
                    emphasis: {
                        scale: 2,
                        itemStyle: {
                            borderWidth: 3
                        }
                    }
                });
            }
        });
        dataArr.push(arr1);
        dataArr.push(arr2);
        return dataArr;
    };
    // 获取单条
    const getLineDataSingle = () => {
        let dataArr = []; // 拐点数据
        let arr1 = [];
        let arr2 = [];
        nameList.map((item, index) => {
            // 判断大小显示label
            // arr1
            arr1.push({
                value: valueList[0][index],
                label: {
                    show: true,
                    z: 3,
                    position: 'top',
                    opacity: 1,
                    backgroundColor: 'transparent',
                    offset: [0, -8],
                    borderRadius: 2,
                    formatter: (params) => {
                        return `{a|${valueList[0][index]}}`;
                    },
                    rich: {
                        a: {
                            fontSize: 14,
                            color: '#397ef0',
                            fontFamily: fontFamily,
                            padding: [4, 2, 2, 2]
                        }
                    }
                },
                emphasis: {
                    scale: 2,
                    itemStyle: {
                        borderWidth: 3
                    },
                    label: {
                        opacity: 1,
                        rich: {
                            a: {
                                fontSize: 14,
                                color: '#397ef0',
                                fontFamily: fontFamily,
                                padding: [4, 2, 2, 2]
                            }
                        }
                    }
                }
            });
            // arr2
            arr2.push({
                value: valueList[1][index],
                label: {
                    show: true,
                    z: 3,
                    position: 'top',
                    opacity: 1,
                    backgroundColor: 'transparent',
                    offset: [0, -8],
                    borderRadius: 2,
                    formatter: (params) => {
                        return `{b|${valueList[1][index]}}`;
                    },
                    rich: {
                        b: {
                            fontSize: 14,
                            color: '#ffe58f',
                            fontFamily: fontFamily,
                            padding: [4, 2, 0, 2]
                        }
                    }
                },
                emphasis: {
                    scale: 2,
                    itemStyle: {
                        borderWidth: 3
                    },
                    label: {
                        opacity: 1,
                        rich: {
                            b: {
                                fontSize: 14,
                                color: '#ffe58f',
                                fontFamily: fontFamily,
                                padding: [4, 2, 0, 2]
                            }
                        }
                    }
                }
            });
        });
        dataArr.push(arr1);
        dataArr.push(arr2);
        return dataArr;
    };
    let dataList = getLineDataAll();

    let legendData = []; // legend数据
    let seriesData = []; // series数据
    legend.map((item, index) => {
        legendData.push({
            name: item,
            icon: 'circle',
            itemStyle: {
                color: '#FFFFFF',
                borderColor: colorList[index],
                borderWidth: 3
            }
        });
        seriesData.push({
            name: item,
            yAxisIndex: 0,
            type: 'line',
            silent: true,
            z: 2,
            data: dataList[index],
            symbolSize: 8, //标记的大小
            lineStyle: {
                color: colorList[index],
                width: 3
            },
            itemStyle: {
                //折线拐点标志的样式
                color: colorList[index],
                borderColor: colorList[index],
                borderWidth: 1
            },
            areaStyle: {
                color: areaColorList[index]
            }
        });
    });
    let valueMax = 0;
    [...valueList[0], ...valueList[1]].map((item) => {
        if (Number(item) > valueMax) {
            valueMax = Number(item);
        }
    });
    seriesData.push({
        name: 'bgBar',
        type: 'bar',
        // silent: true,
        yAxisIndex: 1,
        z: 1,
        data: nameList.map((item) => {
            return {
                value: valueMax + 0.2 * valueMax,
                itemStyle: {
                    color: 'rgba(57,126,240,0)'
                }
            };
        })
        // barWidth: 33
    });

    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'none',
                shadowStyle: {
                    color: 'rgba(57, 126, 240, 0.2)'
                }
            },
            showContent: false,
            position: function (point, params, dom, rect, size) {
                // 提示框位置
                let x = 0;
                let y = 0;
                //提示框定位
                if (point[0] + size.contentSize[0] < size.viewSize[0]) {
                    x = point[0];
                } else if (point[0] > size.contentSize[0]) {
                    x = point[0] - size.contentSize[0];
                } else {
                    x = '30%';
                }
                if (point[1] > size.contentSize[1]) {
                    y = point[1] - size.contentSize[1];
                } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
                    y = point[1];
                } else {
                    y = '30%';
                }
                return [x, y];
            },
            formatter: (params) => {
                let currenrName = params[0].name;
                let currenrTypeList = params.filter((item) => item.seriesName);
                let childDiv = `<div>`;
                legend.map((item, index) => {
                    params.map((item2, index2) => {
                        if (item2.seriesName === item) {
                            childDiv += `
                <div style="margin-top: 4px;position:relative;">
                  <div style="width: 6px;height: 6px;background: #FFFFFF;border: 3px solid ${colorList[index]};position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
                  <span style="margin:0 0 0 20px;font-size: 12px;font-family: Source Han Sans CN-Regular;font-weight: 400;color: #FFFFFF;">${item}：${params[index2].value}${unit}</span>
                </div>
            `;
                        }
                    });
                });
                childDiv += `</div>`;
                return `
				    <div style="font-size: 12px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">${currenrName}</div>
            ${childDiv}
			    `;
            },
            extraCssText:
                'background-color:rgba(0,13,35,0.9);padding:8px 12px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
        },
        legend: {
            data: legendData,
            // top: 16,
            // left: 0,
            itemWidth: 9,
            itemHeight: 9,
            itemGap: 16,
            textStyle: {
                fontSize: 12,
                color: '#000',
                fontFamily: fontFamily,
                padding: [0, 0, 0, 4]
            }
        },
        grid: {
            left: '24',
            right: '24',
            top: '50',
            bottom: '12',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: nameList,
            axisTick: {
                show: false //隐藏X轴刻度
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                show: true,
                margin: 12,
                textStyle: {
                    fontSize: 12,
                    color: '#000', //X轴文字颜色
                    fontFamily: fontFamily,
                    fontWeight: 400
                }
            }
        },
        yAxis: [
            {
                boundaryGap: ['0', '20%'],
                name: yName,
                nameTextStyle: {
                    fontSize: 12,
                    color: '#000', //X轴文字颜色
                    fontFamily: fontFamily,
                    align: 'left',
                    verticalAlign: 'center'
                },
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        width: 1,
                        color: '#999'
                    }
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    color: '#000',
                    fontFamily: fontFamily
                },
                splitArea: {
                    show: false
                }
            },
            {
                boundaryGap: ['0', '10%'],
                position: 'right',
                max: valueMax + 0.2 * valueMax,
                type: 'value',
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            }
        ],
        series: seriesData
    };
    // 图例legend改变时
    console.log(seriesData);
    myChart.on('legendselectchanged', (params) => {
        let selectArr = []; // 当前选中数据
        let lineData = []; // 折线图数据
        legend.map((item) => {
            if (params.selected[item]) {
                selectArr.push(item);
            }
        });
        if (selectArr.length < 2) {
            lineData = getLineDataSingle();
        } else {
            lineData = getLineDataAll();
        }
        myChart.setOption({
            series: [
                {
                    name: legend[0],
                    data: lineData[0]
                },
                {
                    name: legend[1],
                    data: lineData[1]
                }
            ]
        });
        console.log('图例', lineData, selectArr, seriesData);
    });

    // 鼠标移入
    myChart.on('mouseover', (params) => {
        const currentIndex = params.dataIndex;
        myChart.dispatchAction({
            type: 'downplay',
            seriesName: legend
        });
        myChart.dispatchAction({
            type: 'highlight',
            seriesName: legend,
            dataIndex: currentIndex
        });
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                showContent: true
            },
            series: [
                {
                    name: 'bgBar',
                    data: nameList.map((item, index) => {
                        if (index === currentIndex) {
                            return {
                                value: valueMax + 0.2 * valueMax,
                                itemStyle: {
                                    color: 'rgba(57,126,240,0.2)'
                                }
                            };
                        } else {
                            return {
                                value: valueMax + 0.2 * valueMax,
                                itemStyle: {
                                    color: 'rgba(57,126,240,0)'
                                }
                            };
                        }
                    })
                }
            ]
        });
    });
    // 鼠标移出
    myChart.on('mouseout', (params) => {
        let currentIndex = params.dataIndex;
        count = params.dataIndex + 1;
        myChart.setOption({
            tooltip: {
                trigger: 'none',
                showContent: false
            },
            series: [
                {
                    name: 'bgBar',
                    data: nameList.map((item, index) => {
                        return {
                            value: valueMax + 0.2 * valueMax,
                            itemStyle: {
                                color: 'rgba(57,126,240,0)'
                            }
                        };
                    })
                }
            ]
        });
    });

    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

// 租赁金额（运输车辆）
function initTwoCharts(obj) {
    const dataInfo = {
        status: '￥' + obj.payMoney,
        value: obj.progress
    }
    const color = '#3592FE'
    const option = {
        backgroundColor: 'transparent',
        series: [{
            name: '刻度',
            type: 'gauge',
            startAngle: 220,
            endAngle: -40,
            min: 0,
            max: 150,
            radius: '98%',
            axisLine: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                show: true,
                offsetCenter: [0, '65%'],
                formatter: function () {
                    return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '%}';
                },
                rich: {
                    status: {
                        fontSize: 14,
                        lineHeight: 22,
                        color: '#999'
                    },
                    value: {
                        fontSize: 20,
                        lineHeight: 32,
                        color: '#000'
                    }
                }
            },
            axisTick: {
                show: false,
                length: 0,
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                length: 6,
                width: 2,
                lineStyle: {
                    color: color
                }
            },
            axisLabel: {
                color: '#8098BC'
            },
            pointer: {
                length: '50%',
                width: 6
            },
            itemStyle: {
                color: color,
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            markPoint: {
                data: [{
                    x: "50%",
                    y: "50%",
                    symbol: 'circle',
                    symbolSize: 24,
                    itemStyle: {
                        color: color
                    },
                }, {
                    x: "50%",
                    y: "50%",
                    symbol: 'circle',
                    symbolSize: 18,
                    itemStyle: {
                        color: "#fff"
                    },
                }]
            },
            data: [dataInfo]

        },
        {
            name: '外圈',
            type: 'gauge',
            radius: '100%',
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            title: {
                show: false
            },
            detail: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 16,
                    color: [
                        [
                            (dataInfo.value) / 150, color
                        ],
                        [
                            1, 'rgba(53, 146, 254, 0.1)'
                        ]
                    ],
                    // shadowColor: 'rgba(0,138,255,0.35)',
                    // shadowBlur: 5,
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false,
            },
            itemStyle: {
                normal: {
                    color: '#54F200',
                }
            },
            data: [dataInfo]
        }
        ]

    }

    myChart2.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart2.resize();
    });
}

// 租赁金额（吊车）
function initThreeCharts(obj) {
    const dataInfo = {
        status: '￥' + obj.payMoney,
        value: obj.progress
    }
    const color = '#3592FE'
    const option = {
        backgroundColor: 'transparent',
        series: [{
            name: '刻度',
            type: 'gauge',
            startAngle: 220,
            endAngle: -40,
            min: 0,
            max: 150,
            radius: '98%',
            axisLine: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                show: true,
                offsetCenter: [0, '65%'],
                formatter: function () {
                    return '{status|' + dataInfo.status + '}\n{value|' + dataInfo.value + '%}';
                },
                rich: {
                    status: {
                        fontSize: 14,
                        lineHeight: 22,
                        color: '#999'
                    },
                    value: {
                        fontSize: 20,
                        lineHeight: 32,
                        color: '#000'
                    }
                }
            },
            axisTick: {
                show: false,
                length: 0,
                lineStyle: {
                    color: '#999'
                }
            },
            splitLine: {
                length: 6,
                width: 2,
                lineStyle: {
                    color: color
                }
            },
            axisLabel: {
                color: '#8098BC'
            },
            pointer: {
                length: '50%',
                width: 6
            },
            itemStyle: {
                color: color,
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            markPoint: {
                data: [{
                    x: "50%",
                    y: "50%",
                    symbol: 'circle',
                    symbolSize: 24,
                    itemStyle: {
                        color: color
                    },
                }, {
                    x: "50%",
                    y: "50%",
                    symbol: 'circle',
                    symbolSize: 18,
                    itemStyle: {
                        color: "#fff"
                    },
                }]
            },
            data: [dataInfo]

        },
        {
            name: '外圈',
            type: 'gauge',
            radius: '100%',
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            title: {
                show: false
            },
            detail: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 16,
                    color: [
                        [
                            (dataInfo.value) / 150, color
                        ],
                        [
                            1, 'rgba(53, 146, 254, 0.1)'
                        ]
                    ],
                    // shadowColor: 'rgba(0,138,255,0.35)',
                    // shadowBlur: 5,
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false,
            },
            itemStyle: {
                normal: {
                    color: '#54F200',
                }
            },
            data: [dataInfo]
        }
        ]

    }
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}