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

523
yq/src/views/lthmvrv/index.js Normal file
View File

@@ -0,0 +1,523 @@
import * as echarts from "echarts";
import { chartsWidth, dataLength,emptyData,handelProfitrate, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"
export default {
data() {
return {
lengthTimer:null,
lthmvrvLoading: false,
params: {
req: "lthmvrv",
radius: "btc"
},
option: {
tooltip: {
trigger: "axis",
//解决tooltip显示不全问题1
confine: true,
formatter: function (params) {
const date = new Date(params[0].value[0]);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
let time = `${year}-${month}-${day}`;
var res =time
for (let i = 0; i < params.length; i++) {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}</span>`
}
return res;
}
},
legend: {
right: "100",
//处理legengd过长
formatter: function (name) {
return echarts.format.truncateText(name, 100, '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;
},
},
},
{
type: "log",
// boundaryGap: [0, "100%"],
show: false,
min: "dataMin",
max: "dataMax",
position: "right"
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: false,
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: false,
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: false,
},
],
dataZoom: [
{
type: "inside",
start: 20,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: " LTH-MVRV",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#f7864c",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 0,
lineStyle: {
//线条样式
color: "#f7864c",
width: "1",
},
data: [],
},
// {
// name: "LTH_MV",
// type: "line",
// smooth: false,
// symbol: "circle",
// showSymbol: false,
// symbolSize: 5,
// // areaStyle: {},
// itemStyle: {
// color: "#8e62b2",
// borderColor: "rgba(221,220,107,0.1)",
// borderWidth: 12,
// },
// yAxisIndex: 3,
// lineStyle: {
// //线条样式
// color: "#8e62b2",
// width: "1",
// },
// data: [],
// },
// {
// name: "LTH_RV",
// type: "line",
// smooth: false,
// symbol: "circle",
// showSymbol: false,
// symbolSize: 5,
// // areaStyle: {},
// itemStyle: {
// color: "#b73127",
// borderColor: "rgba(221,220,107,0.1)",
// borderWidth: 12,
// },
// yAxisIndex: 2,
// lineStyle: {
// //线条样式
// color: "#b73127",
// 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: [],
//绘制右侧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: 4,
// data: [],
// },
],
},
switch3: "",
oldY: null,
btcFlag: null,
ethFlag: null,
fatherSmaData: [],
start: "",
end: "",
sma: "",
times: {
start: "",
end: ""
},
zoomStart: 0,
zoomEnd: 0,
}
},
mounted() {
this.fetchLthmvrv(this.params.req, this.params.radius)
this.switch3 = handelSwitchs(this.option, this.switch3)
this.oldY = this.option.yAxis
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("lthmvrvBox"));
}
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
this.myChart.setOption(this.option);
chartsWidth("lthmvrvBox", this);
window.addEventListener("resize", () => {
if (this.myChart) this.myChart.resize();
});
},
async fetchLthmvrv(req, radius, start, end, sma) {
this.lthmvrvLoading = true
const { data } = await this.$API.getCsupply(req, radius, start, end, sma)
let lthmvrvData = data.data
//空数据处理
let noData = emptyData(data.data, this.option.series, this.inCharts, this)
if (noData) {
this.lthmvrvLoading = false
return
}
this.start = lthmvrvData[0].date.split("T")[0]
this.end = lthmvrvData[lthmvrvData.length - 1].date.split("T")[0]
//添加水印
this.option = handelWatermark(this.option)
//根据渲染的数据时间渲染对应的价格线和移动平均线
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 lthmvrvValueList = []
let marketcapValueList = []
let rcapValueList = []
lthmvrvData.forEach(item => {
lthmvrvValueList.push(Number(item.mvrv.toFixed(2)))
marketcapValueList.push(Number(item.marketcap.toFixed(2)))
rcapValueList.push(Number(item.rcap.toFixed(2)))
})
this.option.series[0].data = handelProfitrate(lthmvrvData, lthmvrvValueList)
// this.option.series[1].data = handelProfitrate(lthmvrvData, marketcapValueList)
// this.option.series[2].data = handelProfitrate(lthmvrvData, rcapValueList)
this.inCharts()
this.lthmvrvLoading = 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.fetchLthmvrv(this.params.req, this.params.radius, this.times.start, this.times.end, this.sma)
},
//点击对数/线性按钮切换
handelLineSwitch() {
this.option = handelLineType(this.option, this.oldY)
this.switch3 = handelSwitchs(this.option, this.switch3)
this.myChart.setOption(this.option);
},
//父级点击BTC价格按钮
handelSonBtcPrice(radius, flag) {
this.btcFlag = flag
fetchBtcPrice("BTC", this.option.series[1], 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[2], this.start, this.end, this.inCharts, this, this.ethFlag)
},
//父级选择Sma
handelSonSma(smaDataList) {
this.sma = smaDataList
this.fetchLthmvrv(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[3], this.inCharts,this.start, this.end,)
},
},
beforeDestroy() {
if (this.lengthTimer) {
clearTimeout(this.lengthTimer)
}
}
}

63
yq/src/views/lthmvrv/index.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<!-- 长期持有者 MVRV Ratio -->
<div v-loading="lthmvrvLoading" style="width: 100%; min-height: 700px">
<!-- 公式 -->
<el-row type="flex" justify="center">
<section class="formulas">
<div>LTH-MVRV =</div>
<div>
<span> Market Cap <span style="color:rgba(0,0,0,0.4)">(of all UTXOs where age≥155 days)</span> </span>
<span>Realized Cap <span style="color:rgba(0,0,0,0.4);border:none"> (of all UTXOs where age≥155 days)</span></span>
</div>
</section>
</el-row>
<!-- 对数线性显示切换 -->
<el-row>
<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 >
<div
id="lthmvrvBox"
style="width: 100%; min-height: 700px"
></div>
</el-col>
</el-row>
</div>
</template>
<script>
import IndexJs from "../lthmvrv/index"
export default {
mixins:[IndexJs]
}
</script>
<style lang="scss">
.formulas{
display: flex;
justify-content: center;
align-items: center;
font-weight: 550;
color: rgba(0,0,0,0.7);
div:nth-of-type(2){
display: flex;
flex-direction: column;
margin-left: 10px;
span{
text-align: center;
}
span:nth-of-type(1){
border-bottom: 1px solid rgba(0,0,0,1);
}
}
}
</style>