lizixuan/coinbus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码推送

Browse Source
This commit is contained in:
yaoqin
2026-01-16 10:32:27 +08:00
parent 8da877de40
commit 408e40b206
570 changed files with 172605 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

782
yq/src/views/addressBalance/index.js Normal file
View File

@@ -0,0 +1,782 @@
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,
//柱状图配置
columnar: {
title: {
text: "",
left: "center",
textStyle: {
fontSize: 15,
fontWeight: "normal"
},
},
tooltip: {
trigger: "axis",
textStyle: {
align: "left",
},
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
// formatter: function (params) {
// var res = params[0].axisValueLabel;
// for (let i = 0; i <= params.length - 1; i++) {
// res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].value[1]}</span> ${params[i].seriesName}`;
// }
// return "111";
// },
},
toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ["line", "bar"] },
// restore: { show: true },
// saveAsImage: { show: true },
// },
},
legend: {
right: 100,
formatter: function (name) {
return name;
},
},
xAxis: [
{
type: "category",
data: [
"balance0",
"balance001",
"balance01",
"balance1",
"balance10",
"balance100",
"balance1000",
"balance10000",
],
// axisPointer: {
// type: "shadow",
// },
},
],
yAxis: [
{
type: "value",
// name: "Precipitation",
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
formatter: function (value) {
let label = value / 1000000
return `${label}M`
},
},
},
// {
// type: "value",
// // name: "Temperature",
// // min: 0,
// // max: 25,
// // interval: 5,
// // axisLabel: {
// // formatter: "{value} °C",
// // },
// },
],
series: [
{
// name: "Futures Volume (Latest 24h) [USD]",
type: "bar",
colorBy: "data",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
data: [],
itemStyle: {
color: "#fdaa56",
},
},
{
name: "Change 24h",
type: "bar",
itemStyle: {
color: "#607d8b",
},
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
data: [],
},
],
},
params: {
req: "utxos",
radius: "btc"
},
utxosLoading: false,
//饼图配置
pieChart: {
legend: {
top: 'top'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'utxos',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
// { value: 40, name: 'rose 1' },
// { value: 38, name: 'rose 2' },
// { value: 32, name: 'rose 3' },
// { value: 30, name: 'rose 4' },
// { value: 28, name: 'rose 5' },
// { value: 26, name: 'rose 6' },
// { value: 22, name: 'rose 7' },
// { value: 18, name: 'rose 8' }
]
}
]
},
//折线图配置
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 < 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: "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 < 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: [],
},
],
},
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();
// });
},
inChartsLine2() {
if (this.myChart2 == null) {
this.myChart2 = echarts.init(document.getElementById("utxosLine2"));
}
this.option2 = handelZoom(this.myChart2, this.option2, this, this.zoomStart, this.zoomEnd)
chartsWidth("utxosLine2", this);
this.myChart2.setOption(this.option2);
// 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();;
// });
},
//请求数据
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.balance0)
rate0List.push((item.rate0 * 100).toFixed(2))
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.ratio.series[1].data = handelUsdt(this.UtxosData, rate001List)
this.inChartsLine()
// this.inChartsLine2()
this.inChartSratioLine()
// this.inChartSratioLine2()
console.log( this.ratio,"sfkgo ");
// this.inChartsPieChart()
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.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, 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)
}
}
}

68
yq/src/views/addressBalance/index.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div v-loading="utxosLoading">
<!-- 对数线性显示切换 -->
<el-row>
<el-col>
<!-- @handelSwitch="handelSwitch" -->
<el-button @click="handelLineSwitch"
style="margin-left:100px;height:35px;border-radius:6px;line-height: 10px;"
>{{ $t(`home.switch`)
}}<span class="according"> {{ $t(switch3) }}</span></el-button
>
</el-col>
</el-row>
<h3 class="minTitle">{{$t(`menu.onchain5`)}}</h3>
<div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure`) }}</div>
<el-row type="flex" class="row-bg" justify="space-between">
<!-- style="width: 40vw; height: 600px; margin-left: -80px" -->
<el-col :span="24">
<div
id="utxosLine"
style="width: 100%; height: 600px; margin-left: 20px"
></div>
</el-col>
</el-row>
<div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure2`) }}</div>
<!-- 比率图 -->
<h3 class="minTitle">{{$t(`arh.ratio`)}}</h3>
<el-row type="flex" class="row-bg" justify="space-between">
<!-- style="width: 40vw; height: 600px; margin-left: -80px" -->
<el-col :span="24">
<div
id="ratioLine"
style="width: 100%; height: 600px; margin-left: 20px"
></div>
</el-col>
</el-row>
</div>
</template>
<script>
import indexJs from "./index";
export default {
mixins: [indexJs],
};
</script>
<style scoped>
.minTitle{
color: rgba(0, 0, 0, 0.5);
/* outline: 1px solid red; */
padding: 5px;
text-align: center;
margin: 0 auto;
}
.figure{
padding: 10px;
color: rgba(0,0,0,0.5);
}
</style>