import * as echarts from "echarts";
import { handelLineType,chartsWidth,dataLength,emptyData, handelSwitchs,fetchBtcPrice,handelZoom, handelWatermark,fetchEthPrice, handelSmaData, getDateArray, handelUsdt  } from "../../util/processingData"
export default {
    data() {
        return {
            lengthTimer:null,

            params: {
                req: "utxos2nd",
                radius: "btc"
            },
            ut2dLoading: false,
         
            Utxos2ndData: [],
            //折线图配置
            option: {

                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    // formatter: function (params) {
                    //     var res
                    //     res = params[0].axisValueLabel;
                    //     res += `</br>${params[0].marker} <span style="font-weight: bold">${params[0].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].value}% 
                    //     </br>${params[1].marker} <span style="font-weight: bold">${params[1].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[1].value} 
                    //     </br>${params[2].marker} <span style="font-weight: bold">${params[2].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[2].value}`;

                    //     return res;
                    // },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },

                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name:this.$t(`home.figure`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value / 10000).toFixed(2)} W`
                            }
                        }
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "balance <= 0.01",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >=0.01 and Balance <0.1",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#b6b7e9",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#b6b7e9",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                    },
                    {
                        name: "balance >=0.1 and Balance <1",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#4fd77f",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#4fd77f",
                            width: "1",
                        },
                        yAxisIndex: 2,
                        data: [],
                    },
                    {
                        name: "balance >=1 and Balance <10",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ff8e9c",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ff8e9c",
                            width: "1",
                        },
                        yAxisIndex: 3,
                        data: [],
                    },
                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#888888",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#888888",
                            width: "1",
                        },
                        yAxisIndex: 4,
                        data: [],
                        //绘制右侧Y轴
                        markLine: {
                            symbol: ["none", "none"], //去掉箭头
                            itemStyle: {
                                normal: {
                                    lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                                },
                            },
                            // lineStyle:{
                            //   color:"red"
                            // },

                            label: {
                                formatter: "{b}",
                                fontSize: 10,
                                color: "rgba(0,0,0,0.8)",
                                align: "left",
                            },
                            data: [
                                {
                                    name: "$0.02",
                                    yAxis: 0.02,
                                },
                                {
                                    name: "$0.06",
                                    yAxis: 0.06,
                                },
                                {
                                    name: "$0.1",
                                    yAxis: 0.1,
                                },
                                {
                                    name: "$0.4",
                                    yAxis: 0.4,
                                },
                                {
                                    name: "$0.8",
                                    yAxis: 0.8,
                                },
                                {
                                    name: "$2",
                                    yAxis: 2,
                                },
                                {
                                    name: "$6",
                                    yAxis: 6,
                                },
                                {
                                    name: "$10",
                                    yAxis: 10,
                                },
                                {
                                    name: "$40",
                                    yAxis: 40,
                                },
                                {
                                    name: "$80",
                                    yAxis: 80,
                                },
                                // {
                                //     name: "$120",
                                //     yAxis: 120,
                                // },
                                {
                                    name: "$160",
                                    yAxis: 160,
                                },
                                // {
                                //     name: "$200",
                                //     yAxis: 200,
                                // },
                                {
                                    name: "$240",
                                    yAxis: 240,
                                },
                                {
                                    name: "$300",
                                    yAxis: 300,
                                },
                                {
                                    name: "$500",
                                    yAxis: 500,
                                },
                                {
                                    name: "$700",
                                    yAxis: 700,
                                },
                                {
                                    name: "$900",
                                    yAxis: 900,
                                },
                                {
                                    name: "$1100",
                                    yAxis: 1100,
                                },
                                // {
                                //     name: "$1200",
                                //     yAxis: 1200,
                                // },
                                {
                                    name: "$1800",
                                    yAxis: 1800,
                                },
                                {
                                    name: "$3000",
                                    yAxis: 3000,
                                },
                                //  {
                                //   name: "$40W",
                                //   yAxis: 400000,
                                // },
                                {
                                    name: "$70W",
                                    yAxis: 700000,
                                },
                                {
                                    name: "$40W",
                                    yAxis: 400000,
                                },

                                {
                                    name: "$10W",
                                    yAxis: 100000,
                                },
                                {
                                    name: "$100W",
                                    yAxis: 1000000,
                                    // position: ['100%', '50'],
                                },
                                {
                                    name: "$120W",
                                    yAxis: 1200000,
                                },

                                {
                                    name: "$140W",
                                    yAxis: 1400000,
                                },
                            ],
                        },
                    },
                    // {
                    //     name: "Price [ETH]",
                    //     type: "line",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#627eea",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#627eea",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 5,
                    //     data: [],
                    // },



                ],
            },
            option2: {

                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    // formatter: function (params) {
                    //     var res
                    //     res = params[0].axisValueLabel;
                    //     res += `</br>${params[0].marker} <span style="font-weight: bold">${params[0].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[0].value}% 
                    //     </br>${params[1].marker} <span style="font-weight: bold">${params[1].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[1].value} 
                    //     </br>${params[2].marker} <span style="font-weight: bold">${params[2].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${params[2].value}`;

                    //     return res;
                    // },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },

                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name:this.$t(`home.figure2`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value / 10000).toFixed(2)} W`
                            }
                        }
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },


                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "balance >=10 and Balance <100",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#9a60b4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#9a60b4",
                            width: "1",
                        },

                        data: [],
                    },
                    {
                        name: "balance >=100 and Balance <1000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#3ba272",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#3ba272",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                    },
                    {
                        name: "balance >=1000 and Balance <10000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ea7ccc",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ea7ccc",
                            width: "1",
                        },
                        yAxisIndex: 2,
                        data: [],
                    },
                    {
                        name: "balance >=10000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#73c0de",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#73c0de",
                            width: "1",
                        },
                        yAxisIndex: 3,
                        data: [],
                    },
                    {
                        name: "Price[BTC]",
                        type: "line",
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        // areaStyle: {},
                        itemStyle: {
                            color: "#888888",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#888888",
                            width: "1",
                        },
                        yAxisIndex: 4,
                        data: [],
                        //绘制右侧Y轴
                        markLine: {
                            symbol: ["none", "none"], //去掉箭头
                            itemStyle: {
                                normal: {
                                    lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
                                },
                            },
                            // lineStyle:{
                            //   color:"red"
                            // },

                            label: {
                                formatter: "{b}",
                                fontSize: 10,
                                color: "rgba(0,0,0,0.8)",
                                align: "left",
                            },
                            data: [
                                {
                                    name: "$0.02",
                                    yAxis: 0.02,
                                },
                                {
                                    name: "$0.06",
                                    yAxis: 0.06,
                                },
                                {
                                    name: "$0.1",
                                    yAxis: 0.1,
                                },
                                {
                                    name: "$0.4",
                                    yAxis: 0.4,
                                },
                                {
                                    name: "$0.8",
                                    yAxis: 0.8,
                                },
                                {
                                    name: "$2",
                                    yAxis: 2,
                                },
                                {
                                    name: "$6",
                                    yAxis: 6,
                                },
                                {
                                    name: "$10",
                                    yAxis: 10,
                                },
                                {
                                    name: "$40",
                                    yAxis: 40,
                                },
                                {
                                    name: "$80",
                                    yAxis: 80,
                                },
                                // {
                                //     name: "$120",
                                //     yAxis: 120,
                                // },
                                {
                                    name: "$160",
                                    yAxis: 160,
                                },
                                // {
                                //     name: "$200",
                                //     yAxis: 200,
                                // },
                                {
                                    name: "$240",
                                    yAxis: 240,
                                },
                                {
                                    name: "$300",
                                    yAxis: 300,
                                },
                                {
                                    name: "$500",
                                    yAxis: 500,
                                },
                                {
                                    name: "$700",
                                    yAxis: 700,
                                },
                                {
                                    name: "$900",
                                    yAxis: 900,
                                },
                                {
                                    name: "$1100",
                                    yAxis: 1100,
                                },
                                // {
                                //     name: "$1200",
                                //     yAxis: 1200,
                                // },
                                {
                                    name: "$1800",
                                    yAxis: 1800,
                                },
                                {
                                    name: "$3000",
                                    yAxis: 3000,
                                },
                                //  {
                                //   name: "$40W",
                                //   yAxis: 400000,
                                // },
                                {
                                    name: "$70W",
                                    yAxis: 700000,
                                },
                                {
                                    name: "$40W",
                                    yAxis: 400000,
                                },

                                {
                                    name: "$10W",
                                    yAxis: 100000,
                                },
                                {
                                    name: "$100W",
                                    yAxis: 1000000,
                                    // position: ['100%', '50'],
                                },
                                {
                                    name: "$120W",
                                    yAxis: 1200000,
                                },

                                {
                                    name: "$140W",
                                    yAxis: 1400000,
                                },
                            ],
                        },
                    },
                    // {
                    //     name: "Price [ETH]",
                    //     type: "line",
                    //     smooth: false, //线条是否圆滑
                    //     symbol: "circle",
                    //     symbolSize: 5,
                    //     showSymbol: false,
                    //     itemStyle: {
                    //         color: "#627eea",
                    //         borderColor: "rgba(221,220,107,0.1)",
                    //         borderWidth: 12,
                    //     },
                    //     lineStyle: {
                    //         //线条样式
                    //         color: "#627eea",
                    //         width: "1",
                    //     },
                    //     yAxisIndex: 5,
                    //     data: [],
                    // },



                ],
            },
            //折线图配置比率图
            ratio: {

                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {
                        var res

                        res = params[0].axisValueLabel;
                        for (let i = 0; i < params.length; i++) {
                            res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${Number(params[i].value[1].toFixed(2))}%  `;

                        }


                        return res;
                    },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },

                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name:this.$t(`home.figure3`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value).toFixed(3)} %`
                            }
                        }
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },

                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "balance <= 0.01",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#f7931a",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#f7931a",
                            width: "1",
                        },
                        data: [],
                    },
                    {
                        name: "balance >=0.01 and Balance <0.1",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#627eea",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#627eea",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                    },
                    {
                        name: "balance >=0.1 and Balance <1",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#4fd77f",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#4fd77f",
                            width: "1",
                        },
                        yAxisIndex: 2,
                        data: [],
                    },
                    {
                        name: "balance >=1 and Balance <10",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ff8e9c",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ff8e9c",
                            width: "1",
                        },
                        yAxisIndex: 3,
                        data: [],
                    },
                  



                ],
            },
            ratio2: {

                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                    animation: false,
                    formatter: function (params) {
                        var res
                       
                        res = params[0].axisValueLabel;
                        for (let i = 0; i < params.length; i++) {
                            res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].seriesName}</span>\u00A0\u00A0\u00A0\u00A0 ${Number(params[i].value[1].toFixed(2))}%  `;

                        }


                        return res;
                    },
                    axisPointer: {
                        animation: false,
                        snap: true,
                        label: {
                            precision: 2, //坐标轴保留的位数
                        },
                        type: "cross", //cross shadow
                        crossStyle: {
                            //十字轴横线
                            // opacity: "0",
                            width: 0.5,
                        },
                        lineStyle: {
                            // opacity: 0,
                        },
                    },
                },
                legend: {
                    right: "100",
                    //处理legengd过长
                    // formatter: function (name) {

                    //     return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
                    // },
                    tooltip: {
                        show: true
                    }
                },

                xAxis: {
                    type: "time",
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        //去除刻度
                        show: false,
                    },
                    axisLine: {
                        //去除轴线
                        show: false,
                    },
                    // axisLabel: {
                    //     formatter: (params) => {
                    //         let time = params.split(" ")[1]
                    //         return time
                    //     }
                    // }
                },
                yAxis: [
                    {
                        // name:this.$t(`home.figure4`),
                        position: "left",
                        type: "value",
                        min: "dataMin",
                        max: "dataMax",
                        axisLabel: {
                            formatter: function (value) {

                                return `${(value).toFixed(3)} %`
                            }
                        }
                    },
                    {
                        position: "right",
                        type: "log",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },
                    {
                        position: "right",
                        type: "value",
                        // splitNumber: "5",
                        min: "dataMin",
                        max: "dataMax",
                        show: false,
                    },


                ],
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                        maxSpan: 100,
                        minSpan: 2,
                        animation: false,
                    },
                    {
                        // type: "inside",
                        start: 0,
                        end: 20,
                        showDetail: false,
                    },
                ],
                series: [
                    {
                        name: "balance >=10 and Balance <100",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#9a60b4",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#9a60b4",
                            width: "1",
                        },

                        data: [],
                    },
                    {
                        name: "balance >=100 and Balance <1000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#3ba272",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#3ba272",
                            width: "1",
                        },
                        yAxisIndex: 1,
                        data: [],
                    },
                    {
                        name: "balance >=1000 and Balance <10000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#ea7ccc",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#ea7ccc",
                            width: "1",
                        },
                        yAxisIndex: 2,
                        data: [],
                    },
                    {
                        name: "balance >=10000",
                        type: "line",
                        smooth: false, //线条是否圆滑
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        itemStyle: {
                            color: "#73c0de",
                            borderColor: "rgba(221,220,107,0.1)",
                            borderWidth: 12,
                        },
                        lineStyle: {
                            //线条样式
                            color: "#73c0de",
                            width: "1",
                        },
                        yAxisIndex: 3,
                        data: [],
                    },



                ],
            },
            switch3: "",
            btcFlag: null,
            ethFlag: null,
            start:"",
            end:"",
            fatherSmaData: [],
            sma:"",
            times: {
                start: "",
                end: ""
            },
            zoomStart: 0,
            zoomEnd: 0,
          
        }
    },
    mounted() {
      
        this.fetchData(this.params.req, this.params.radius)

        this.switch3 = handelSwitchs(this.option, this.switch3)

        this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
        this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
        this.$addStorageEvent(1, "zoomStart", this.zoomStart);
        this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);

        window.addEventListener("setItem", () => {
            this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
            this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
            this.zoomStart= localStorage.getItem("zoomStart")
            this.zoomEnd= localStorage.getItem("zoomEnd")


        })
    },
    methods: {
        //初始化折线图图表
        inChartsLine() {
            if (this.myChart == null) {
                this.myChart = echarts.init(document.getElementById("ut2dLine"));
            }
            this.option= handelZoom(this.myChart,this.option,this,this.zoomStart, this.zoomEnd)
           
            this.myChart.setOption(this.option);
            chartsWidth("ut2dLine", this);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();;
            });

        },
        inChartsLine2() {
            if (this.myChart2 == null) {
                this.myChart2 = echarts.init(document.getElementById("ut2dLine2"));
            }
            this.option2= handelZoom(this.myChart2,this.option2,this,this.zoomStart, this.zoomEnd)
           
            this.myChart2.setOption(this.option2);
            chartsWidth("ut2dLine2", this);
            window.addEventListener("resize", () => {
                if (this.myChart2) this.myChart2.resize();;
            });
        },
        //初始化比率折线图图表
        inChartSratioLine() {
            if (this.myChart3 == null) {
                this.myChart3 = echarts.init(document.getElementById("ratioLine"));
            }
            this.ratio= handelZoom(this.myChart3,this.ratio,this,this.zoomStart, this.zoomEnd)
           
            this.myChart3.setOption(this.ratio);
            chartsWidth("ratioLine", this);
            window.addEventListener("resize", () => {
                if (this.myChart3) this.myChart3.resize();;
            });
        },
        inChartSratioLine2() {
            if (this.myChart4 == null) {
                this.myChart4 = echarts.init(document.getElementById("ratioLine2"));
            }
            this.ratio2= handelZoom(this.myChart4,this.ratio2,this,this.zoomStart, this.zoomEnd)
           
            this.myChart4.setOption(this.ratio2);
            chartsWidth("ratioLine2", this);
            window.addEventListener("resize", () => {
                if (this.myChart4) this.myChart4.resize();;
            });
        },
        //初始化饼图
        inChartsPieChart() {
            this.myChart = echarts.init(document.getElementById("ut2dPieChart"));
            chartsWidth("ut2dPieChart", this);
            this.myChart.setOption(this.pieChart);
            window.addEventListener("resize", () => {
                if (this.myChart) this.myChart.resize();;
            });
        },
        //请求数据
        async fetchData(req, radius, start, end,sma) {
            this.ut2dLoading = true
            const { data } = await this.$API.getNewAddress(req, radius, start, end,sma)
            //空数据处理
            let noData = emptyData(data.data, this.option.series, this.inChartsLine, this)
            if (noData) {
                emptyData(data.data, this.option2.series, this.inChartsLine2, this)
                emptyData(data.data, this.ratio.series, this.inChartSratioLine, this)
                emptyData(data.data, this.ratio2.series, this.inChartSratioLine2, this)
                this.ut2dLoading = false
                return
            }
            this.Utxos2ndData = data.data
            this.start = this.Utxos2ndData[0].dateTime.split("T")[0]
            this.end = this.Utxos2ndData[this.Utxos2ndData.length-1].dateTime.split("T")[0]
             //添加水印
             this.option= handelWatermark(this.option)
             this.option2= handelWatermark(this.option2)
             this.ratio= handelWatermark(this.ratio)
             this.ratio2= handelWatermark(this.ratio2)

            this.$nextTick(() => {
                //移动平均线没值 才渲染正常价格数据 
                if (this.start && !this.fatherSmaData[0]) {
                    this.handelSonBtcPrice("BTC", true)
                }
                //点击时间 移动平均线有值 就渲染查询移动平均线
                if (this.fatherSmaData[0] && this.start) {
                    this.handelSonSma(this.fatherSmaData, this.start, this.end)
                }
                  //渲染ETH
                  if (this.ethFlag) {                 
                    this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
                    this.handelSonEthPrice("ETH",this.ethFlag)
                }
            })

          

       
            let balanceAmount0List = []
            let balanceAmount001List = []
            let balanceAmount01List = []
            let balanceAmount1List = []
            let balanceAmount10List = []
            let balanceAmount100List = []
            let balanceAmount1000List = []
            let balanceAmount10000List = []
            let rateAmount0List = []
            let rateAmount001List = []
            let rateAmount01List = []
            let rateAmount1List = []
            let rateAmount10List = []
            let rateAmount1001List = []
            let rateAmount1000List = []
            let rateAmount10000List = []

          
            this.Utxos2ndData.forEach(item => {           
                balanceAmount0List.push(item.balanceAmount0)
                balanceAmount001List.push(item.balanceAmount001)
                balanceAmount01List.push(item.balanceAmount01)
                balanceAmount1List.push(item.balanceAmount1)
                balanceAmount10List.push(item.balanceAmount10)
                balanceAmount100List.push(item.balanceAmount100)
                balanceAmount1000List.push(item.balanceAmount1000)
                balanceAmount10000List.push(item.balanceAmount10000)
                rateAmount0List.push(Number((item.rateAmount0 * 100).toFixed(2)))
                rateAmount001List.push(Number((item.rateAmount001 * 100).toFixed(2)))
                rateAmount01List.push(Number((item.rateAmount01 * 100).toFixed(2)))
                rateAmount1List.push(Number((item.rateAmount1 * 100).toFixed(2)))
                rateAmount10List.push(Number((item.rateAmount10 * 100).toFixed(2)))
                rateAmount1001List.push(Number((item.rateAmount100 * 100).toFixed(2)))
                rateAmount1000List.push(Number((item.rateAmount1000 * 100).toFixed(2)))
                rateAmount10000List.push(Number((item.rateAmount10000 * 100).toFixed(2)))
            })
            this.option.series[0].data = handelUsdt(this.Utxos2ndData, balanceAmount0List)
            this.option.series[1].data = handelUsdt(this.Utxos2ndData, balanceAmount001List)
            this.option.series[2].data = handelUsdt(this.Utxos2ndData, balanceAmount01List)
            this.option.series[3].data = handelUsdt(this.Utxos2ndData, balanceAmount1List)
            this.option2.series[0].data = handelUsdt(this.Utxos2ndData, balanceAmount10List)
            this.option2.series[1].data = handelUsdt(this.Utxos2ndData, balanceAmount100List)
            this.option2.series[2].data = handelUsdt(this.Utxos2ndData, balanceAmount1000List)
            this.option2.series[3].data = handelUsdt(this.Utxos2ndData, balanceAmount10000List)
            this.ratio.series[0].data = handelUsdt(this.Utxos2ndData, rateAmount0List)
            this.ratio.series[1].data = handelUsdt(this.Utxos2ndData, rateAmount001List)
            this.ratio.series[2].data = handelUsdt(this.Utxos2ndData, rateAmount01List)
            this.ratio.series[3].data = handelUsdt(this.Utxos2ndData, rateAmount1List)
            this.ratio2.series[0].data = handelUsdt(this.Utxos2ndData, rateAmount10List)
            this.ratio2.series[1].data = handelUsdt(this.Utxos2ndData, rateAmount1001List)
            this.ratio2.series[2].data = handelUsdt(this.Utxos2ndData, rateAmount1000List)
            this.ratio2.series[3].data = handelUsdt(this.Utxos2ndData, rateAmount10000List)



            this.inChartsLine()
            this.inChartsLine2()
            this.inChartSratioLine()
            this.inChartSratioLine2()
            this.ut2dLoading = false


            //判定页面条数是否一致
            if (this.lengthTimer) {
                clearTimeout(this.lengthTimer)
            }
            this.lengthTimer = setTimeout(() => {

                this.$addStorageEvent(1, "lengthFlag", dataLength(this.option, this.option.series[0].data.length), );
                this.$addStorageEvent(1, "lengthFlag", dataLength(this.option2, this.option2.series[0].data.length), );
               


            }, 10000)

        },
        //父级时间
        handelSonTime(start, end) {

            this.times.start = start;
            this.times.end = end;
            this.fetchData(this.params.req, this.params.radius, this.times.start ,  this.times.end,this.sma)
        },

 
        //点击对数/线性按钮切换
        handelLineSwitch() {
            this.option = handelLineType(this.option)
            this.option2 = handelLineType(this.option2)
            this.ratio = handelLineType(this.ratio)
            this.ratio2 = handelLineType(this.ratio2)
            this.switch3 = handelSwitchs(this.option, this.switch3)

            this.myChart.setOption(this.option);
            this.myChart2.setOption(this.option2);
            this.myChart3.setOption(this.ratio);
            this.myChart4.setOption(this.ratio2);

        },
          //父级点击BTC价格按钮
          handelSonBtcPrice(radius, flag) {
            this.btcFlag = flag
            fetchBtcPrice("BTC", this.option.series[4], this.start, this.end, this.inChartsLine, this, this.btcFlag)
            fetchBtcPrice("BTC", this.option2.series[4], this.start, this.end, this.inChartsLine2, this, this.btcFlag)

        },
        //父级点击ETH价格按钮
        handelSonEthPrice(radius, flag) {
            this.ethFlag = flag
            this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
            fetchEthPrice("ETH", this.option.series[5], this.start, this.end, this.inChartsLine, this, this.ethFlag)
            fetchEthPrice("ETH", this.option2.series[5], this.start, this.end, this.inChartsLine2, this, this.ethFlag)
        },
        //父级选择Sma
        handelSonSma(smaDataList) {

            
            this.sma = smaDataList
            this.fetchData(this.params.req, this.params.radius, this.times.start ,  this.times.end,this.sma)
            this.$addStorageEvent(1, "sma", this.sma);



            // this.fatherSmaData = smaDataList
            // handelSmaData(smaDataList, this.option.series[4], this.inChartsLine,this.start, this.end)
            // handelSmaData(smaDataList, this.option2.series[4], this.inChartsLine2,this.start, this.end)

        },

    },
    beforeDestroy() {
        if (this.lengthTimer) {
            clearTimeout(this.lengthTimer)
        }
    }
}