import * as echarts from "echarts"; import { handelLineType,emptyData, dataLength,handelZoom, handelSwitchs, handelProfitrate, chartsWidth, handelWatermark, getDateArray, fetchBtcPrice, fetchEthPrice } from "../../util/processingData" export default { data() { return { lengthTimer:null, minerAddressLoading: false, params: { req: "minerAddress", radius: "btc" }, balanceParams: { req: "minerBalance", radius: "btc" }, option: { tooltip: { trigger: "axis", //解决tooltip显示不全问题1 confine: true, }, legend: { right: "100", //处理legengd过长 // formatter: function (name) { // return echarts.format.truncateText(name, 60, '14px Microsoft Yahei', '…'); // }, tooltip: { show: true } }, xAxis: { type: "time", boundaryGap: false, // axisLabel: { // formatter: `{yyyy}-{MM}-{dd}`, // }, data: [] }, yAxis: [ { type: "value", // boundaryGap: [0, "100%"], axisLabel: { formatter: function (e) { let value; if (e > 100000000) { value = `${e / 100000000}E`; } else if (e > 1000000) {//百万 value = `${e / 1000000}M`; } else if (e >= 10000) {//万 value = `${e / 10000}W`; } else if (e < -1000000) {//百万 value = `${e / 1000000}M`; } else if (e < -10000) {//万 value = `${e / 10000}W`; } else { value = e; } return value; }, }, min: "dataMin", max: "dataMax", }, { type: "value", // boundaryGap: [0, "100%"], show: true, min: "dataMin", max: "dataMax", position: "right" }, { type: "value", // boundaryGap: [0, "100%"], min: "dataMin", max: "dataMax", show: true, }, { type: "value", // boundaryGap: [0, "100%"], min: "dataMin", max: "dataMax", show: false, }, ], dataZoom: [ { type: "inside", start: 0, end: 100, }, { start: 0, end: 100, }, ], series: [ { name: "Balance of Miner Address", type: "line", smooth: false, symbol: "circle", showSymbol: false, symbolSize: 5, // areaStyle: {}, itemStyle: { color: "#d90013", borderColor: "rgba(221,220,107,0.1)", borderWidth: 12, }, yAxisIndex: 0, lineStyle: { //线条样式 color: "#d90013", width: "1", }, data: [], }, { name: "Number of Miner Address", type: "line", smooth: false, symbol: "circle", showSymbol: false, symbolSize: 5, // areaStyle: {}, itemStyle: { color: "#f7931a", borderColor: "rgba(221,220,107,0.1)", borderWidth: 12, }, yAxisIndex: 1, lineStyle: { //线条样式 color: "#f7931a", width: "1", }, 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: 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: [], // }, ], }, switch3: "", btcFlag: true, ethFlag: false, fatherSmaData: [], start: "", end: "", sma: "", times: { start: "", end: "" }, zoomStart: 0, zoomEnd: 0, } }, mounted() { this.fetchMinerAddress(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: { //初始化图表 inCharts() { if (this.myChart == null) { this.myChart = echarts.init(document.getElementById("minerAddressBox")); } this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd) this.myChart.setOption(this.option); chartsWidth("minerAddressBox", this); window.addEventListener("resize", () => { if (this.myChart) this.myChart.resize(); }); }, async fetchMinerAddress(req, radius, start, end, sma) { this.minerAddressLoading = true //矿工地址数 const { data } = await this.$API.getCsupply(req, radius, start, end, sma) let minerData = data.data //空数据处理 let noData = emptyData(data.data, this.option.series, this.inCharts, this) if (noData) { this.minerAddressLoading = false return } this.start = minerData[0].date.split("T")[0] this.end = minerData[minerData.length - 1].date.split("T")[0] //添加水印 this.option = handelWatermark(this.option) //根据渲染的数据时间渲染对应的价格线和移动平均线 this.$nextTick(() => { //移动平均线没值 才渲染正常价格数据 if (this.start && !this.fatherSmaData[0]) { this.handelSonBtcPrice("BTC", true) } //ETH渲染的情况 选择时间照样显示数据 if (this.ethFlag) { this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag)); this.handelSonEthPrice("ETH", this.ethFlag); } //点击时间 移动平均线有值 就渲染查询移动平均线 if (this.fatherSmaData[0] && this.start) { this.handelSonSma(this.fatherSmaData, this.start, this.end) } }) let minerAddressList = [] minerData.forEach(item => { minerAddressList.push(Number(item.value).toFixed(2)) }) //请求矿工地址余额 const list = await this.$API.getCsupply(this.balanceParams.req, this.balanceParams.radius, start, end, sma) let minerBalanceData = list.data.data let minerBalanceList = [] minerBalanceData.forEach(item => { minerBalanceList.push(item.value.toFixed(2)) }) this.option.series[1].data = handelProfitrate(minerData, minerAddressList) this.option.series[0].data = handelProfitrate(minerBalanceData, minerBalanceList) this.inCharts() this.minerAddressLoading = false //判定页面条数是否一致 if (this.lengthTimer) { clearTimeout(this.lengthTimer) } this.lengthTimer = setTimeout(() => { this.$addStorageEvent(1, "lengthFlag", dataLength(this.option, this.option.series[0].data.length), ); }, 10000) }, //接收Home传的时间handelParmesTime handelSonTime(start, end) { this.times.start = start; this.times.end = end; this.fetchMinerAddress(this.params.req, this.params.radius, this.times.start, this.times.end, this.sma) }, //点击对数/线性按钮切换 handelLineSwitch() { this.option = handelLineType(this.option) this.switch3 = handelSwitchs(this.option, this.switch3) this.myChart.setOption(this.option); }, //父级点击BTC价格按钮 handelSonBtcPrice(radius, flag) { this.btcFlag = flag fetchBtcPrice("BTC", this.option.series[2], this.start, this.end, this.inCharts, this, this.btcFlag) }, //父级点击ETH价格按钮 handelSonEthPrice(radius, flag) { this.ethFlag = flag this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag)); fetchEthPrice("ETH", this.option.series[3], this.start, this.end, this.inCharts, this, this.ethFlag) }, //父级选择Sma handelSonSma(smaDataList) { this.sma = smaDataList this.fetchMinerAddress(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[2], this.inCharts, this.start, this.end,) }, }, beforeDestroy() { if (this.lengthTimer) { clearTimeout(this.lengthTimer) } } }