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

885
yq/src/views/jzr60/index.js Normal file
View File

@@ -0,0 +1,885 @@
import * as echarts from "echarts";
import {
handelLineType, emptyData,
fetchBtcPrice, fetchEthPrice, dataLength, handelProfitrate, chartsWidth, handelZoom, getDateArray, handelWatermark
} from "../../util/processingData";
export default {
data() {
return {
lengthTimer: null,
jzr60Loading: false,
option: {
legend: {
right: 100,
formatter: function (name) {
return name;
},
},
tooltip: {
trigger: "axis",
//解决tooltip显示不全问题1
confine: true,
textStyle: {
align: "left",
},
animation: false,
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
console.log(params,"就覅积分覅就");
for (let i = 0; i <= params.length - 1; i++) {
console.log(i,params.length - 1);
if (i == params.length - 1) {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}</span>`
} else {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value[1]}%</span>`
}
}
// if (params[1]) {
// res += `</br>${params[0].marker} ${params[0].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[0].value[1]}%</span>
// </br>${params[1].marker} ${params[1].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[1].value[1]}</span>`;
// } else {
// res += `</br>${params[0].marker} ${params[0].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[0].value[1]}%</span>
// `;
// }
return res;
},
axisPointer: {
animation: false,
snap: true,
label: {
precision: 2, //坐标轴保留的位数
},
type: "cross", //cross shadow
crossStyle: {
//十字轴横线
// opacity: "0",
width: 0.5,
},
lineStyle: {
// opacity: 0,
},
},
},
xAxis: {
type: "time",
boundaryGap: false,
data: [],
axisTick: {
//去除刻度
show: false,
},
axisLine: {
//去除轴线
show: false,
},
},
yAxis: [
{
// name: this.$t(`home.figure`),
position: "left",
type: "value",
axisLabel: {
// formatter:function(value){
// return `${value/1000} k`
// }
}
},
{
position: "right",
type: "value",
splitNumber: "5",
show: false,
},
{
position: "right",
type: "value",
splitNumber: "5",
show: false,
},
],
dataZoom: [
{
type: "inside",
start: 10,
end: 100,
maxSpan: 100,
minSpan: 2,
animation: false,
},
{
start: 0,
end: 20,
// showDetail: false,
},
],
series: [
{
name: "7 days of cumulative gains",
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: "30 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#b82eae",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#b82eae",
width: "1",
},
data: [],
},
{
name: "60 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#ab334f",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#ab334f",
width: "1",
},
data: [],
},
{
name: "90 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#1a7f54",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#1a7f54",
width: "1",
},
data: [],
},
{
name: "Price[BTC]",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#888888",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#888888",
width: "1",
},
yAxisIndex: 1,
data: [],
markLine: {
symbol: ["none", "none"], //去掉箭头
itemStyle: {
normal: {
lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
},
},
// lineStyle:{
// opacity:0
// },
label: {
formatter: "{b}",
fontSize: 10,
color: "rgba(0,0,0,0.8)",
align: "left",
},
data: [
{
name: "$0",
yAxis: 0,
},
{
name: "$10k",
yAxis: 10000,
},
{
name: "$20K",
yAxis: 20000,
},
{
name: "$30K",
yAxis: 30000,
},
{
name: "$40K",
yAxis: 40000,
},
{
name: "$50K",
yAxis: 50000,
},
{
name: "$60K",
yAxis: 60000,
},
{
name: "$70K",
yAxis: 70000,
},
{
name: "$80K",
yAxis: 80000,
},
{
name: "$90K",
yAxis: 90000,
},
{
name: "$100K",
yAxis: 100000,
},
],
},
},
{
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: 2,
data: [],
},
],
},
dayOption: {
legend: {
right: 100,
formatter: function (name) {
return name;
},
},
tooltip: {
trigger: "axis",
textStyle: {
align: "left",
},
animation: false,
formatter: function (params) {
var res = params[0].axisValueLabel;
for (let i = 0; i <= params.length - 1; i++) {
if (i == params.length - 1) {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`
} else {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}%</span>`
}
}
return res;
},
axisPointer: {
animation: false,
snap: true,
label: {
precision: 2, //坐标轴保留的位数
},
type: "cross", //cross shadow
crossStyle: {
//十字轴横线
// opacity: "0",
width: 0.5,
},
lineStyle: {
// opacity: 0,
},
},
},
xAxis: {
// type: "time",
boundaryGap: false,
data: [],
axisTick: {
//去除刻度
show: false,
},
axisLine: {
//去除轴线
show: false,
},
axisLabel: {
formatter: function (value) {
let hours = value.split(" ")[1].split(":")[0];
let min = value.split(" ")[1].split(":")[1];
return `${hours}:${min}`;
},
},
},
yAxis: [
{
// name: this.$t(`home.figure2`),
position: "left",
type: "value",
// min: `dataMin`,
// max: `dataMax`,
// axisLabel:{
// formatter:function(value){
// let data = (value/10000).toFixed(3)
// return `${data} W`
// }
// }
},
{
position: "right",
type: "value",
min: `dataMin`,
max: `dataMax`,
show: false,
},
{
position: "right",
type: "value",
min: `dataMin`,
max: `dataMax`,
// splitNumber: "5",
show: false,
},
],
dataZoom: [
{
type: "inside",
start: 10,
end: 100,
maxSpan: 100,
minSpan: 2,
animation: false,
},
{
start: 0,
end: 20,
// showDetail: false,
},
],
series: [
{
name: "7 days of cumulative gains",
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: "30 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#b82eae",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#b82eae",
width: "1",
},
data: [],
},
{
name: "60 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#ab334f",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#ab334f",
width: "1",
},
data: [],
},
{
name: "90 days of cumulative gains",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#1a7f54",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#1a7f54",
width: "1",
},
data: [],
},
{
name: "Price[BTC]",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#888888",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#888888",
width: "1",
},
yAxisIndex: 0,
data: [],
// markLine: {
// symbol: ["none", "none"], //去掉箭头
// itemStyle: {
// normal: {
// lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
// },
// },
// // lineStyle:{
// // opacity:0
// // },
// label: {
// formatter: "{b}",
// fontSize: 10,
// color: "rgba(0,0,0,0.8)",
// align: "left",
// },
// data: [
// {
// name: "$0",
// yAxis: 0,
// },
// {
// name: "$10k",
// yAxis: 10000,
// },
// {
// name: "$20K",
// yAxis: 20000,
// },
// {
// name: "$30K",
// yAxis: 30000,
// },
// {
// name: "$40K",
// yAxis: 40000,
// },
// {
// name: "$50K",
// yAxis: 50000,
// },
// {
// name: "$60K",
// yAxis: 60000,
// },
// {
// name: "$70K",
// yAxis: 70000,
// },
// {
// name: "$80K",
// yAxis: 80000,
// },
// {
// name: "$90K",
// yAxis: 90000,
// },
// {
// name: "$100K",
// yAxis: 100000,
// },
// ],
// },
},
{
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: 0,
data: [],
},
],
},
timeParams: {
req: "jzr60",
start: "",
end: ""
},
dayParams: {
req: "jzr60day",
start: "",
end: ""
},
jzrData: [],
jzrDayData: [],
radius: "btc",
timer: "",
btcFlag: null,
ethFlag: null,
fatherSmaData: [],
start: "",
end: "",
sma: "",
zoomStart: 0,
zoomEnd: 0,
}
},
watch: {
radius(val) {
this.fetchJzr(this.timeParams.req, this.radius)
this.fetchJzrDay(this.dayParams.req, this.radius)
}
},
mounted() {
this.radius = localStorage.getItem("radius");
this.$addStorageEvent(1, "zoomStart", this.zoomStart);
this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);
this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
//监听localstorage变化
window.addEventListener("setItem", () => {
this.radius = localStorage.getItem("radius");
this.zoomStart = localStorage.getItem("zoomStart")
this.zoomEnd = localStorage.getItem("zoomEnd")
this.ethFlag = JSON.parse(localStorage.getItem("ethFlag"));
this.btcFlag = JSON.parse(localStorage.getItem("btcFlag"));
});
if (this.timer) {
clearInterval(this.timer)
}
//5分钟请求一次页面
this.timer = setInterval(() => {
this.fetchJzr(this.timeParams.req, this.radius)
this.fetchJzrDay(this.dayParams.req, this.radius)
}, 300000)
},
methods: {
//初始化
inChart() {
if (this.myChart == null) {
this.myChart = echarts.init(document.getElementById("jzr60Box"));
}
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
this.myChart.setOption(this.option);
chartsWidth("jzr60Box", this);
window.addEventListener("resize", () => {
if (this.myChart) this.myChart.resize();
});
},
//初始化
inChartDay() {
if (this.myChartDay == null) {
this.myChartDay = echarts.init(document.getElementById("jzr60DayBox"));
}
this.dayOption = handelZoom(this.myChartDay, this.dayOption, this, this.zoomStart, this.zoomEnd)
this.myChartDay.setOption(this.dayOption);
chartsWidth("jzr60DayBox", this);
window.addEventListener("resize", () => {
this.myChartDay.resize();
});
},
//请求
async fetchJzr(req, radius, start, end, sma) {
this.jzr60Loading = true
const { data } = await this.$API.getMa370(req, radius, start, end, sma)
this.jzrData = data.data
//空数据处理
let noData = emptyData(data.data, this.option.series, this.inChart, this)
if (noData) {
this.jzr60Loading = false
return
}
this.start = this.jzrData[0].date.split("T")[0]
this.end = this.jzrData[this.jzrData.length - 1].date.split("T")[0]
//添加水印
this.option = handelWatermark(this.option)
//不同币种显示不同价格曲线
if (radius == "BTC") {
this.option.series = this.option.series.filter(item => item.name !== "Price [ETH]")
// this.handelSonBtcPrice("BTC", true)
} else if (radius == "ETH") {
this.option.series = this.option.series.filter(item => item.name !== "Price[BTC]")
// this.handelSonEthPrice("ETH", true)
}
let jzr7ValueList = []
let jzr30ValueList = []
let jzr60ValueList = []
let jzr90ValueList = []
let priceList = []
this.jzrData.forEach(item => {
jzr7ValueList.push(Number((item.jzr7 * 100).toFixed(2)))
jzr30ValueList.push(Number((item.jzr30 * 100).toFixed(2)))
jzr60ValueList.push(Number((item.jzr60 * 100).toFixed(2)))
jzr90ValueList.push(Number((item.jzr90 * 100).toFixed(2)))
priceList.push(item.price.toFixed(2))
})
this.option.series[0].data = handelProfitrate(this.jzrData, jzr7ValueList)
this.option.series[1].data = handelProfitrate(this.jzrData, jzr30ValueList)
this.option.series[2].data = handelProfitrate(this.jzrData, jzr60ValueList)
this.option.series[3].data = handelProfitrate(this.jzrData, jzr90ValueList)
this.option.series[4].data = handelProfitrate(this.jzrData, priceList)
this.inChart()
this.jzr60Loading = 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.dayOption, this.dayOption.series[0].data.length),);
}, 15000)
},
//请求JzrDay渲染数据
async fetchJzrDay(req, radius, start, end, sma) {
const { data } = await this.$API.getMa370(req, radius, start, end, sma)
//空数据处理
let noData = emptyData(data.data, this.dayOption.series, this.inChartDay, this)
if (noData) {
return
}
this.jzrDayData = data.data
this.dayOption.xAxis.data.length = 0
this.dayOption.series[0].data.length = 0
// this.dayOption.series[1].data.length = 0
//添加水印
this.dayOption = handelWatermark(this.dayOption)
//不同币种显示不同价格曲线
if (radius == "BTC") {
this.dayOption.series = this.dayOption.series.filter(item => item.name !== "Price [ETH]")
// this.handelSonBtcPrice("BTC", true)
} else if (radius == "ETH") {
this.dayOption.series = this.dayOption.series.filter(item => item.name !== "Price[BTC]")
// this.handelSonEthPrice("ETH", true)
}
this.dayOption.series[0].data = []
this.dayOption.series[1].data = []
this.dayOption.xAxis.data = []
this.jzrDayData.forEach(item => {
let year = item.date.split("T")[0]
let hour = item.date.split("T")[1].split(".")[0]
let time = `${year} ${hour}`
this.dayOption.xAxis.data.push(time)
//判断负数保留两位小数处理
// if (item.jzr60.toString().indexOf("-") !== -1) {
// item.jzr60 = 0 - Number(Math.abs(item.jzr60).toFixed(4))
// } else {
// item.jzr60 = Number(item.jzr60.toFixed(4))
// }
this.dayOption.series[0].data.push(Number(item.jzr7 * 100).toFixed(4))
this.dayOption.series[1].data.push(Number(item.jzr30 * 100).toFixed(4))
this.dayOption.series[2].data.push(Number(item.jzr60 * 100).toFixed(4))
this.dayOption.series[3].data.push(Number(item.jzr90 * 100).toFixed(4))
this.dayOption.series[4].data.push(item.price)
// this.dayOption.series[1].data.push(Number(item.price.toFixed(2)))
})
this.inChartDay()
},
//父级时间
handelSonTime(start, end) {
this.timeParams.start = start;
this.timeParams.end = end;
this.fetchJzr(this.timeParams.req, this.radius, this.timeParams.start, this.timeParams.end, this.sma)
// if (this.radius =="BTC") {
// //this.handelSonEthPrice()
// }else{
// this.handelSonBtcPrice("BTC",true)
// }
},
//父级点击BTC价格按钮
handelSonBtcPrice(radius, flag) {
//父级BTC默认是true 在ETH页面btcFlag 取反才能正常点击父级就渲染
// if (this.radius == "ETH") {
// this.btcFlag = !flag;
// } else {
// this.btcFlag = flag;
// }
this.btcFlag = flag;
fetchBtcPrice("BTC", this.option.series[1], this.start, this.end, this.inChart, this, this.btcFlag)
},
//父级点击ETH价格按钮
handelSonEthPrice(radius, flag) {
//父级BTC默认是true 在ETH页面btcFlag 取反才能正常点击父级就渲染
// if (this.radius== "ETH") {
// this.ethFlag = !flag;
// } else {
// this.ethFlag = flag;
// }
this.ethFlag = flag;
this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
fetchEthPrice("ETH", this.option.series[1], this.start, this.end, this.inChart, this, this.ethFlag)
},
//父级选择Sma
handelSonSma(smaDataList) {
this.sma = smaDataList
this.fetchJzr(this.timeParams.req, this.radius, this.timeParams.start, this.timeParams.end, this.sma)
this.$addStorageEvent(1, "sma", this.sma);
// this.fatherSmaData = smaDataList
// handelSmaData(smaDataList, this.option.series[1], this.inChart, this.start, this.end,)
},
},
beforeDestroy() {
// console.log("销毁咯 清除定时器");
clearInterval(this.timer)
if (this.lengthTimer) {
clearTimeout(this.lengthTimer)
}
},
}

99
yq/src/views/jzr60/index.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div
v-loading="jzr60Loading"
style="width: 100%; min-height: 700px"
>
<!-- 公式 -->
<div class="formulaBox">
<div class="formula">
<div> {{ $t(`arh.jzr`) }} =</div>
<div style="position: relative;"> <span class="Summation"> &sum;</span> &nbsp;&nbsp;&nbsp; {{ $t(`home.Increase`) }}<span style="font-size:12px">t</span> </div>
</div>
</div>
<el-row>
<el-col :span="24">
<h3 style="text-align: center; color: rgba(0, 0, 0, 0.6)">
{{ $t(`arh.jzr`) }}
</h3>
<div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure`) }}</div>
<div
id="jzr60Box"
style="width: 100%; min-height: 700px"
></div>
</el-col>
</el-row>
<!-- 24小时数据 -->
<el-row>
<el-col :span="24">
<h3 style="text-align: center; color: rgba(0, 0, 0, 0.6)">
{{ $t(`arh.dayGraph`) }}
</h3>
<div style="padding-left: 9%;font-size:12px;color:rgba(0,0,0,0.6);margin-top: 10px;">{{ $t(`home.figure2`) }}</div>
<div
id="jzr60DayBox"
style="width: 100%; min-height: 700px"
></div>
</el-col>
</el-row>
<!-- <div class="formulaBox">
<p>{{ $t(`home.formula`) }}</p>
<div class="formula">
<div> {{ $t(`arh.jzr`) }} =</div>
<div style="position: relative;"> <span class="Summation"> &sum;</span> &nbsp;&nbsp;&nbsp; {{ $t(`home.Increase`) }}<span style="font-size:12px">t</span> </div>
</div>
</div> -->
</div>
</template>
<script>
import IndexJs from "../jzr60/index";
export default {
mixins: [IndexJs],
};
</script>
<style lang="scss" scoped>
.according {
color: #f7931a;
}
.formulaBox {
width: 98.7%;
padding: 10px 0px;
margin-bottom: -30px;
// height: 60px;
// background: #e5e5e5;
color: rgba(0, 0, 0, 0.7);
position: relative;
margin-bottom: 10px;
display: flex;
justify-content: center;
p{
padding: 0px 10px;
}
.formula{
display: flex;
// outline: 1px solid red;
padding: 0px 10px;
}
.Summation:after{
content: "60";
font-size: 12px;
position: absolute;
top: -3px;
}
.Summation:before{
content: "t=1";
font-size: 12px;
position: absolute;
top: 10px;
left: 12px;
}
}
</style>