<template>

  <!-- BTC 地址统计 -->
  <div v-loading="newAddressBoxloading" class="newAddressMain">
    <!-- 对数线性显示切换 -->
    <!-- <el-row class="switch">
      <el-col>
         <el-button @click="handelLineSwitch"
         style="margin-left:100px;height:35px;border-radius:6px;"
         >{{ $t(`home.switch`)
          }}<span class="according"> {{ $t(switch3) }}</span></el-button
        >
      </el-col>
    </el-row> -->
    <el-row>
      <el-col>
        <Dropdown
          :dataSelection="dataSelection"
          :onSelect="handleSelect"
          :realTimeData="realTimeData"
        ></Dropdown>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div
          id="newAddressBox"
          style="width: 100%; height: 600px; padding-top: 50px"
          v-on-echart-resize
        ></div>
      </el-col>
    </el-row>

    


    <!-- <el-row>
      <el-col :span="24">
        <div
        v-show="realTimeGraph"
          id="newAddressBox2"
          style="width: 100%; height: 600px; padding-top: 50px"
          v-on-echart-resize
        ></div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import onWebScoket from "../webscoket/index1.js";

import "../util/chartResize";
import {
  handelNewAddress,
  handelAddressData,
  resetTheChart,
  handelLineType,
  handelBtcPrice,
  handelSmaData,
  getDateArray,
  fetchBtcPrice,
  fetchEthPrice,
  handelWatermark,
  $addStorageEvent,
  handelZoom,
  handelSwitchs,
  chartsWidth,
  emptyData,
  dataLength,
} from "../util/processingData";
import { getAddress } from "../api/realTimeData";
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
            },
          },
          //解决tooltip显示不全问题1
          confine: true,
        },
        legend: {
          right: 100,
          //处理legengd过长
          // formatter: function (name) {
          //   return echarts.format.truncateText(
          //     name,
          //     100,
          //     "14px Microsoft Yahei",
          //     "…"
          //   );
          // },

          selected: {
            "Total Address": false,
            "Send Address": true,
            "Receive Address": true,
          },
        },
        xAxis: {
          // type: "time",
          boundaryGap: ["0%", "0%"], //图表两边都不留白
          // axisLabel: {
          //   formatter: `{yyyy}-{MM}-{dd}`,
          // },
          // axisLine: {
          //             //去除轴线
          //             show: false,
          //         },
          data: [],
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: [`0%`, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            position: "right",
            // boundaryGap: [0, "100%"],
            show: true,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 80,
            end: 100,
            // minValueSpan: 3600 * 24 * 1000 * 7,
          },
          {
            start: 30,
            end: 100,
          },
        ],
        series: [
          {
            name: "Active Addresses",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#75c1df",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#75c1df",
              width: "1",
            },
            yAxisIndex: 0,
            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",
            //       yAxis: 0,
            //     },
            //     //  {
            //     //   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: "Total Address",
          //   type: "line",
          //   smooth: false,
          //   symbol: "circle",
          //   showSymbol: false,
          //   symbolSize: 5,
          //   // areaStyle: {},
          //   // #f7931a
          //   itemStyle: {
          //     color: "#f7931a",
          //     borderColor: "rgba(221,220,107,0.1)",
          //     borderWidth: 12,
          //   },
          //   lineStyle: {
          //     //线条样式
          //     color: "#f7931a",
          //     width: "1",
          //   },
          //   data: [],
          //   yAxisIndex: 5,
          // },
          {
            name: "Send Addresses",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#b8322e",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 0,
            lineStyle: {
              //线条样式
              color: "#b8322e",
              width: "1",
            },
            data: [],
          },
          {
            name: "Receive Addresses",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#3ba171",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#3ba171",
              width: "1",
            },
            data: [],
            yAxisIndex: 0,
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#000",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#000",
              width: "1",
            },
            yAxisIndex: 1,
            data: [],
          },
          // {
          //   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: 4,
          //   data: [],
          // },
        ],
      },
      option2: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
            },
          },
          //解决tooltip显示不全问题1
          confine: true,
        },
        legend: {
          right: 100,
          //处理legengd过长
          // formatter: function (name) {
          //   return echarts.format.truncateText(
          //     name,
          //     100,
          //     "14px Microsoft Yahei",
          //     "…"
          //   );
          // },
          selected: {
            "Transaction Volume of New Address": false,
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: ["0%", "0%"], //图表两边都不留白
          // axisLabel: {
          //   formatter: `{yyyy}-{MM}-{dd}`,
          // },
          // axisLine: {
          //             //去除轴线
          //             show: false,
          //         },
          data: [],
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: [`0%`, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            // min: "dataMin",
            // max: "dataMax",
            position: "right",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
            // minValueSpan: 3600 * 24 * 1000 * 7,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "New Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            // #f7931a
            itemStyle: {
              color: "#f7931a",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#f7931a",
              width: "1",
            },
            data: [],
            yAxisIndex: 0,
          },
          {
            name: "Transaction Volume of New Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#975fb0",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 0,
            lineStyle: {
              //线条样式
              color: "#975fb0",
              width: "1",
            },
            data: [],
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#000",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#000",
              width: "1",
            },
            yAxisIndex: 1,
            data: [],
          },
          // {
          //   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: 3,
          //   data: [],
          // },
        ],
      },
      realTimeOption3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
            },
          },
          //解决tooltip显示不全问题1
          confine: true,
        },
        legend: {
          right: 100,
          //处理legengd过长
          // formatter: function (name) {
          //   return echarts.format.truncateText(
          //     name,
          //     100,
          //     "14px Microsoft Yahei",
          //     "…"
          //   );
          // },

          selected: {
            "Total Address": false,
            "Send Address": false,
            "Receive Address": false,
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: ["0%", "0%"], //图表两边都不留白
          // axisLabel: {
          //   formatter: `{yyyy}-{MM}-{dd}`,
          // },
          // axisLine: {
          //             //去除轴线
          //             show: false,
          //         },
          data: [],
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: [`0%`, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: true,
            min: "dataMin",
            max: "dataMax",
            position: "right",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            // show: true,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
            // minValueSpan: 3600 * 24 * 1000 * 7,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "Active Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#75c1df",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#75c1df",
              width: "1",
            },
            yAxisIndex: 0,
            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",
            //       yAxis: 0,
            //     },
            //     //  {
            //     //   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: "Total Address",
          //   type: "line",
          //   smooth: false,
          //   symbol: "circle",
          //   showSymbol: false,
          //   symbolSize: 5,
          //   // areaStyle: {},
          //   // #f7931a
          //   itemStyle: {
          //     color: "#f7931a",
          //     borderColor: "rgba(221,220,107,0.1)",
          //     borderWidth: 12,
          //   },
          //   lineStyle: {
          //     //线条样式
          //     color: "#f7931a",
          //     width: "1",
          //   },
          //   data: [],
          //   yAxisIndex: 5,
          // },
          {
            name: "Send Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#b8322e",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 0,
            lineStyle: {
              //线条样式
              color: "#b8322e",
              width: "1",
            },
            data: [],
          },
          {
            name: "Receive Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            yAxisIndex: 0,
            // areaStyle: {},
            itemStyle: {
              color: "#3ba171",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#3ba171",
              width: "1",
            },
            data: [],
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#000",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#000",
              width: "1",
            },
            yAxisIndex: 1,
            data: [],
          },
          // {
          //   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: 4,
          //   data: [],
          // },
        ],
      },
      addData: [],
      NewAddressValueList: [],
      show: "",
      params: {
        req: "address",
        radius: "btc",
        start: "",
        end: "",
      },
      newAddressBoxloading: false,
      switch3: "",
      btcFlag: true,
      ethFlag: false,
      fatherSmaData: [],
      start: "",
      end: "",
      sma: "",
      zoomStart: 0,
      zoomEnd: 0,
      DateArr: [],
      lengthTimer: null,
      dataSelection: [
        {
          value: "1d",
          label: "home.day1",
          disabled:false,
          authority:"guest",
          grade:1,
        },
        {
          value: "realTime",
          label: "home.realTimeData",
          disabled:false,
          authority:"vip",
          grade:4,
        },
      ],     
      realTimeData:"",
      selectedValue: "",
      realTimeGraph:true,
    };
  },
  mounted() {
    // new onWebScoket(`wss://13.214.133.132:7101/marketall/websocket/lx232`);
    //进入页面发起请求
    this.$nextTick(() => {
      this.fetchNewAddress(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end
      );
    });

  

    this.switch3 = handelSwitchs(this.option, this.switch3);
    this.show = localStorage.getItem("currentTabComponent");
    this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
    this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
    $addStorageEvent(1, "zoomStart", this.zoomStart);
    $addStorageEvent(1, "zoomEnd", this.zoomEnd);
    //监听localstorage变化
    window.addEventListener("setItem", () => {
      this.show = localStorage.getItem("currentTabComponent");
      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: {
    //数据选择
    handleSelect(selectedValue) {
      this.selectedValue = selectedValue;

      if (selectedValue == `1d`) {
        this.fetchNewAddress(
          this.params.req,
          this.params.radius,
          this.params.start,
          this.params.end
        );
        this.realTimeData=false 
      } else {
        this.fetchRealTimeData();
        this.realTimeData=true
      }
    },
    //初始化图表
    inCharts() {
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("newAddressBox"));
        chartsWidth("newAddressBox", this);
      }
      this.option = handelZoom(
        this.myChart,
        this.option,
        this,
        this.zoomStart,
        this.zoomEnd
      );

      this.myChart.setOption(this.option);
      window.addEventListener("resize", () => {
        if (this.myChart) this.myChart.resize();
      });
    },
    //初始化图表
    inCharts2() {
      if (this.myChart2 == null) {
        this.myChart2 = echarts.init(document.getElementById("newAddressBox2"));
        chartsWidth("newAddressBox2", this);
      }

      this.option2 = handelZoom(
        this.myChart2,
        this.option2,
        this,
        this.zoomStart,
        this.zoomEnd
      );
      this.myChart2.setOption(this.option2);

      window.addEventListener("resize", () => {
        if (this.myChart2) this.myChart2.resize();
      });
    },

    //初始化图表实时数据
    inCharts3() {
      if (this.myChart3 == null) {
        this.myChart3 = echarts.init(document.getElementById("newAddressBox"));
        chartsWidth("newAddressBox", this);
      }

      this.realTimeOption3 = handelZoom(
        this.myChart3,
        this.realTimeOption3,
        this,
        this.zoomStart,
        this.zoomEnd
      );
      this.myChart3.setOption(this.realTimeOption3);

      window.addEventListener("resize", () => {
        if (this.myChart3) this.myChart3.resize();
      });
    },
    //请求实时数据
    async fetchRealTimeData() {
      this.newAddressBoxloading = true;
      let { data } = await getAddress();
      let RealTimeData = data.data;
      //空数据处理
      let noData = emptyData(
        this.addData,
        this.realTimeOption3.series,
        this.inCharts,
        this
      );
      if (noData) {
        this.newAddressBoxloading = false;
        return;
      }
      let activeAddress = [];
      let totalAddress = [];
      let sendAddress = [];
      let receiveAddress = [];
      let price = [];
      let newAddress = [];
      let newAddressVolume = [];
      let xAxisData = [];
      RealTimeData.forEach((item) => {
        item.date = `${item.date.split("T")[0]} ${
          item.date.split("T")[1].split(`.`)[0]
        } `;
        activeAddress.push(item.activeAddress.toFixed(2));
        totalAddress.push(item.totalAddress.toFixed(2));
        sendAddress.push(item.sendAddress.toFixed(2));
        receiveAddress.push(item.receiveAddress.toFixed(2));
        newAddress.push(item.newAddress.toFixed(2));
        newAddressVolume.push(item.newAddressVolume.toFixed(2));
        price.push(item.price.toFixed(2));
        xAxisData.push(item.date);
      });
    
      this.realTimeOption3.xAxis.type = "category";
      this.option2.xAxis.type = "category";
      this.realTimeOption3 = handelWatermark(this.realTimeOption3);
      // this.option2 = handelWatermark(this.option2);
    
      this.realTimeOption3.xAxis.data = xAxisData
      this.option2.xAxis.data = xAxisData
      this.realTimeOption3.series[0].data = activeAddress;
      // this.option3.series[1].data = totalAddress;
      this.realTimeOption3.series[1].data = sendAddress;
      this.realTimeOption3.series[2].data = receiveAddress;
      this.realTimeOption3.series[3].data = price;

      // this.option2.series[0].data = newAddress;
      // this.option2.series[1].data = newAddressVolume;
      // this.option2.series[2].data = price;
      this.realTimeGraph=false
      this.myChart.clear();
      this.inCharts3()
      console.log(this.realTimeOption3,"几分开发");
      // this.inCharts(this.option);
      // this.inCharts2(this.option2);
      this.newAddressBoxloading = false;

      setTimeout(() => {
        //监听echarts 图表滚动
        this.myChart3.on("dataZoom", function (e) {

          this.zoomStart =e.start || e.batch[0].start;
          this.zoomEnd = e.end || e.batch[0].end;
          $addStorageEvent(1, "zoomStart", this.zoomStart);
          $addStorageEvent(1, "zoomEnd", this.zoomEnd);
        });
      });
    },
    //请求数据
    async fetchNewAddress(req, radius, start, end, sma) {
      this.newAddressBoxloading = true;
      let list = await this.$API.getNewAddress(req, radius, start, end, sma);
      this.option ={
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              show: false,
            },
          },
          //解决tooltip显示不全问题1
          confine: true,
        },
        legend: {
          right: 100,
          //处理legengd过长
          // formatter: function (name) {
          //   return echarts.format.truncateText(
          //     name,
          //     100,
          //     "14px Microsoft Yahei",
          //     "…"
          //   );
          // },

          // selected: {
          //   "Total Address": false,
          //   "Send Address": false,
          //   "Receive Address": false,
          // },
        },
        xAxis: {
          // type: "time",
          boundaryGap: ["0%", "0%"], //图表两边都不留白
          // axisLabel: {
          //   formatter: `{yyyy}-{MM}-{dd}`,
          // },
          // axisLine: {
          //             //去除轴线
          //             show: false,
          //         },
          data: [],
        },
        yAxis: [
          {
            type: "value",
            boundaryGap: [`0%`, "100%"],
            axisLabel: {
              formatter: function (e) {
                let value;
                if (e > 1000000) {
                  value = e / 100000;
                } else if (e > 100000) {
                  value = e / 1000;
                } else {
                  value = e / 100;
                }
                return value;
              },
            },
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            position: "right",
            show: true,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            // min: "dataMin",
            // max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
          {
            type: "value",
            // boundaryGap: [0, "100%"],
            show: false,
            min: "dataMin",
            max: "dataMax",
          },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 80,
            end: 100,
            // minValueSpan: 3600 * 24 * 1000 * 7,
          },
          {
            start: 30,
            end: 100,
          },
        ],
        series: [
          {
            name: "Active Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#75c1df",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#75c1df",
              width: "1",
            },
            yAxisIndex: 0,
            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",
            //       yAxis: 0,
            //     },
            //     //  {
            //     //   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: "Send Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            // areaStyle: {},
            itemStyle: {
              color: "#b8322e",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            yAxisIndex: 0,
            lineStyle: {
              //线条样式
              color: "#b8322e",
              width: "1",
            },
            data: [],
          },
          {
            name: "Receive Address",
            type: "line",
            smooth: false,
            symbol: "circle",
            showSymbol: false,
            symbolSize: 5,
            yAxisIndex: 0,
            // areaStyle: {},
            itemStyle: {
              color: "#3ba171",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#3ba171",
              width: "1",
            },
            data: [],
          },
          {
            name: "Price[BTC]",
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            // areaStyle: {},
            itemStyle: {
              color: "#000",
              borderColor: "rgba(221,220,107,0.1)",
              borderWidth: 12,
            },
            lineStyle: {
              //线条样式
              color: "#000",
              width: "1",
            },
            yAxisIndex: 1,
            data: [],
          },
          // {
          //   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: 4,
          //   data: [],
          // },
        ],
      }
      // let list = await getAddress();
      this.realTimeGraph=true
      this.addData = list.data.data;
      // this.option.xAxis.type = "time";
      // this.option2.xAxis.type = "time";
      //空数据处理
      let noData = emptyData(
        this.addData,
        this.option.series,
        this.inCharts,
        this
      );
      if (noData) {
        this.newAddressBoxloading = false;
        return;
      }
      //空数据处理
      let noData1 = emptyData(
        this.addData,
        this.option2.series,
        this.inCharts2,
        this
      );
      if (noData1) {
        this.newAddressBoxloading = false;
        return;
      }

      this.start = this.addData[0].date.split("T")[0];
      this.end = this.addData[this.addData.length - 1].date.split("T")[0];
      const price = await this.$API.getBtcPrice2("BTC", this.start,  this.end);
       
       let priceData =[]
       price.data.data.forEach(item=>{
           priceData.push(Number(item.value.toFixed(2)))
       })


      this.option = handelWatermark(this.option);
      this.option2 = handelWatermark(this.option2);
       let activeAddress=[]
       let sendAddress=[]
       let receiveAddress=[]
       let xAxisData = []
      this.addData.forEach((item) => {
        item.date = item.date.split("T")[0];
        activeAddress.push(Number(item.activeAddress.toFixed(2)))
        sendAddress.push(Number(item.sendAddress.toFixed(2)))
        receiveAddress.push(Number(item.receiveAddress.toFixed(2)))
        xAxisData.push(item.date)
      });

      this.option.xAxis.data = xAxisData
      this.option.series[0].data = activeAddress
      this.option.series[1].data = sendAddress
      this.option.series[2].data = receiveAddress
      this.option.series[3].data = priceData


      //根据渲染的数据时间渲染对应的价格线和移动平均线
      // this.handelSonBtcPrice("BTC", true);
     

      //接口返回了Total数据在添加
      // this.NewAddressValueList = handelNewAddress(this.addData);

      // this.option.series[1].data = handelAddressData(
      //   //activeAddress
      //   this.addData,
      //   this.NewAddressValueList[5]
      // ); //Total Address 待后端新增

      // this.option.series[0].data = handelAddressData(
      //   //activeAddress
      //   this.addData,
      //   this.NewAddressValueList[1]
      // );
      // this.option.series[1].data = handelAddressData(
      //   //sendAddress
      //   this.addData,
      //   this.NewAddressValueList[3]
      // );
      // this.option.series[2].data = handelAddressData(
      //   //receiveAddress
      //   this.addData,
      //   this.NewAddressValueList[2]
      // );

      // this.option2.series[0].data = handelAddressData(
      //   //newAddress
      //   this.addData,
      //   this.NewAddressValueList[0]
      // );
      // this.option2.series[1].data = handelAddressData(
      //   //newAddressVolume
      //   this.addData,
      //   this.NewAddressValueList[4]
      // );
      
      // resetTheChart(this);
      if (this.myChart3) {
        this.myChart3.clear();
      }
      console.log(this.option);

      this.inCharts(this.option);
      // this.inCharts2(this.option2);
      // 
      setTimeout(() => {
        //监听echarts 图表滚动
        this.myChart.on("dataZoom", function (e) {
          this.zoomStart = e.start || e.batch[0].start;
          this.zoomEnd = e.end || e.batch[0].end;
          $addStorageEvent(1, "zoomStart", this.zoomStart);
          $addStorageEvent(1, "zoomEnd", this.zoomEnd);
        });
      });
      this.newAddressBoxloading = 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(star, end) {
      this.params.start = star;
      this.params.end = end;
      this.fetchNewAddress(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end,
        this.sma
      );
    },
    checkMissingDays(dates) {
      // 按照日期升序排序
      dates.sort((a, b) => new Date(a) - new Date(b));

      for (let i = 1; i < dates.length; i++) {
        const currentDate = new Date(dates[i]);
        const previousDate = new Date(dates[i - 1]);

        // 计算相邻日期之间的天数差异
        const dayDiff = (currentDate - previousDate) / (1000 * 60 * 60 * 24);

        if (dayDiff > 1) {
          // 发现漏掉一天的情况
          return true;
        }
      }

      // 没有漏掉一天的情况
      return false;
    },
    //默认判断显示对数/线性
    // handelSwitch(data) {
    //   //判断子级option是不是数组 并改变默认值（线性/对数）
    //   if (Array.isArray(data.yAxis)) {
    //     if (data.yAxis[0].type == "log") {
    //       this.switch3 = "home.switch2";
    //     } else {
    //       this.switch3 = "home.switch1";
    //     }
    //   } else {
    //     if (data.yAxis.type == "log") {
    //       this.switch3 = "home.switch2";
    //     } else {
    //       this.switch3 = "home.switch1";
    //     }
    //   }
    // },
    //点击对数/线性按钮切换
    handelLineSwitch() {
      this.option = handelLineType(this.option);
      this.option2 = handelLineType(this.option2);

      this.switch3 = handelSwitchs(this.option, this.switch3);
      this.switch3 = handelSwitchs(this.option2, this.switch3);
      this.myChart.setOption(this.option);
      this.myChart2.setOption(this.option2);
    },

    //父级点击BTC价格按钮
    handelSonBtcPrice(radius, flag) {
      
      this.btcFlag = flag;
      fetchBtcPrice(
        "BTC",
        this.option.series[3],
        this.start,
        this.end,
        this.inCharts,
        this,
        this.btcFlag
      );
      fetchBtcPrice(
        "BTC",
        this.option2.series[2],
        this.start,
        this.end,
        this.inCharts2,
        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.inCharts,
        this,
        this.ethFlag
      );
      fetchEthPrice(
        "ETH",
        this.option2.series[3],
        this.start,
        this.end,
        this.inCharts2,
        this,
        this.ethFlag
      );
    },
    //父级选择Sma
    handelSonSma(smaNum) {
      this.sma = smaNum;
      this.fetchNewAddress(
        this.params.req,
        this.params.radius,
        this.params.start,
        this.params.end,
        smaNum
      );
      this.realTimeData=false;
      this.$addStorageEvent(1, "sma", this.sma);
     
      // this.fatherSmaData = smaDataList;
      // handelSmaData(
      //   smaDataList,
      //   this.option.series[5],
      //   this.inCharts,
      //   this.start,
      //   this.end
      // );
    },
  },
  beforeDestroy() {
    if (this.lengthTimer) {
      clearTimeout(this.lengthTimer);
    }
  },
};
</script>
    
<style lang="scss" scoped>
.newAddressMain {
  width: 100%;
  // width: calc(100vw - 320px);
  min-height: 600px;
  //  background-color: aquamarine;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // padding-left: 8%;
  // outline: 1px solid  red;
}
.index {
  font-weight: 600;
}
.index:hover {
  font-weight: 600;
  color: #f7931a;
  text-decoration: underline;
  cursor: pointer;
}
</style>