596 lines
21 KiB
JavaScript
596 lines
21 KiB
JavaScript
import * as echarts from "echarts";
|
|
import { handelLineType,dataLength, chartsWidth,emptyData, handelSwitchs, handelZoom, fetchBtcPrice, fetchEthPrice, handelWatermark, handelSmaData, getDateArray, handelUsdt } from "../../util/processingData"
|
|
export default {
|
|
data() {
|
|
return {
|
|
lengthTimer:null,
|
|
|
|
params: {
|
|
req: "utxos",
|
|
radius: "btc"
|
|
},
|
|
utxosLoading: false,
|
|
|
|
//折线图配置
|
|
option: {
|
|
tooltip: {
|
|
//解决tooltip显示不全问题1
|
|
confine: true,
|
|
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,
|
|
},
|
|
data:[]
|
|
// 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: "value",
|
|
// type: "log",
|
|
// splitNumber: "5",
|
|
// min: "dataMin",
|
|
// max: "dataMax",
|
|
show: true,
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
start: 0,
|
|
end: 100,
|
|
maxSpan: 100,
|
|
minSpan: 2,
|
|
animation: false,
|
|
},
|
|
{
|
|
// type: "inside",
|
|
start: 0,
|
|
end: 20,
|
|
// showDetail: false,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "Balance >=1000 and Balance <10000",
|
|
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: "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: 5,
|
|
// data: [],
|
|
// },
|
|
|
|
|
|
|
|
],
|
|
},
|
|
|
|
//折线图配置比率图
|
|
ratio: {
|
|
|
|
tooltip: {
|
|
//解决tooltip显示不全问题1
|
|
confine: true,
|
|
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(parseInt(params[i].value * 1000000) / 1000000)}% `;
|
|
|
|
}
|
|
|
|
|
|
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, 180, '14px Microsoft Yahei', '…');
|
|
// },
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
|
|
xAxis: {
|
|
// type: "time",
|
|
boundaryGap: false,
|
|
data: [],
|
|
axisTick: {
|
|
//去除刻度
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
//去除轴线
|
|
show: false,
|
|
},
|
|
data:[]
|
|
// 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: true,
|
|
},
|
|
{
|
|
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 >=1000 and Balance <10000",
|
|
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: [],
|
|
},
|
|
|
|
|
|
|
|
|
|
],
|
|
},
|
|
|
|
switch3: "",
|
|
btcFlag: null,
|
|
ethFlag: null,
|
|
fatherSmaData: [],
|
|
start: "",
|
|
end: "",
|
|
sma: "",
|
|
times: {
|
|
start: "",
|
|
end: ""
|
|
},
|
|
zoomStart: 0,
|
|
zoomEnd: 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
this.fetchUtxos(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("utxosLine"));
|
|
}
|
|
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
|
|
|
|
this.myChart.setOption(this.option);
|
|
chartsWidth("utxosLine", this);
|
|
// window.addEventListener("resize", () => {
|
|
// if (this.myChart) this.myChart.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();;
|
|
// });
|
|
},
|
|
|
|
|
|
//请求数据
|
|
async fetchUtxos(req, radius, start, end, sma) {
|
|
this.utxosLoading = true
|
|
let { data } = await this.$API.getNewAddress(req, radius, start, end, sma)
|
|
|
|
this.UtxosData = data.data
|
|
//空数据处理
|
|
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.utxosLoading = false
|
|
return
|
|
}
|
|
|
|
this.start = this.UtxosData[0].dateTime.split("T")[0]
|
|
this.end = this.UtxosData[this.UtxosData.length - 1].dateTime.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.ratio = handelWatermark(this.ratio)
|
|
//根据渲染的数据时间渲染对应的价格线和移动平均线
|
|
|
|
|
|
let balance0List = []
|
|
let rate0List = []
|
|
let xAxisData= []
|
|
this.UtxosData.forEach(item => {
|
|
balance0List.push(item.balance1000)
|
|
rate0List.push((item.rate1000 * 100).toFixed(6))
|
|
xAxisData.push(item.dateTime.split("T")[0])
|
|
})
|
|
this.option.xAxis.data = xAxisData
|
|
this.option.series[0].data = balance0List
|
|
this.option.series[1].data = priceData
|
|
this.ratio.xAxis.data = xAxisData
|
|
this.ratio.series[0].data =rate0List
|
|
|
|
|
|
this.inChartsLine()
|
|
this.inChartSratioLine()
|
|
|
|
|
|
this.utxosLoading = 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.fetchUtxos(this.params.req, this.params.radius, this.times.start, this.times.end, this.sma)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
//点击对数/线性按钮切换
|
|
handelLineSwitch() {
|
|
this.option = handelLineType(this.option)
|
|
this.ratio = handelLineType(this.ratio)
|
|
this.switch3 = handelSwitchs(this.option, this.switch3)
|
|
this.myChart.setOption(this.option);
|
|
this.myChart3.setOption(this.ratio);
|
|
|
|
},
|
|
//父级点击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, start, end) {
|
|
|
|
this.sma = smaDataList
|
|
this.fetchUtxos(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)
|
|
}
|
|
}
|
|
} |