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

691
yq/src/views/MoneyStockMeasures/index.js Normal file
View File

@@ -0,0 +1,691 @@
import * as echarts from "echarts";
import { MoneyStockMeasures } from "../../api/pages"
import { chartsWidth, emptyData, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"
export default {
data() {
return {
MoneyStockMeasuresLoading: false,
option: {
// tooltip: {
// trigger: "axis",
// //解决tooltip显示不全问题1
// confine: true,
// formatter: function (params) {
// var res = params[0].axisValueLabel;
// 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} </span>`
// }
// return res;
// },
// },
// legend: {
// right: "100",
// },
// 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: 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: 0,
// end: 100,
// },
// {
// start: 0,
// end: 100,
// },
// ],
// series: [
// {
// name: "M1",
// 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: "2",
// },
// data: [],
// },
// {
// name: "M2",
// type: "line",
// smooth: false,
// symbol: "circle",
// showSymbol: false,
// symbolSize: 5,
// // areaStyle: {},
// itemStyle: {
// color: "#e43961",
// borderColor: "rgba(221,220,107,0.1)",
// borderWidth: 12,
// },
// yAxisIndex: 0,
// lineStyle: {
// //线条样式
// color: "#e43961",
// width: "2",
// },
// data: [],
// },
// {
// name: "Mb",
// type: "line",
// smooth: false,
// symbol: "circle",
// showSymbol: false,
// symbolSize: 5,
// // areaStyle: {},
// itemStyle: {
// color: "#383d71",
// borderColor: "rgba(221,220,107,0.1)",
// borderWidth: 12,
// },
// yAxisIndex: 0,
// lineStyle: {
// //线条样式
// color: "#383d71",
// width: "2",
// },
// data: [],
// },
// ],
},
switch3: "",
oldY: null,
btcFlag: null,
ethFlag: null,
fatherSmaData: [],
start: "",
end: "",
params: {
start: "",
end: "",
ifAdjusted: 0
},
zoomStart: 0,
zoomEnd: 0,
choiceList: [{
value: 0,
label: "home.Unadjusted",
}, {//经过季节性调整
value: 1,
label: "home.Adjusted",
},],
isactive: 0,
}
},
mounted() {
this.fetchMoneyStockMeasuresIndicator(this.params)
//禁用时间框
// this.$addStorageEvent(1, "timeDisable", true);
// 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")
})
chartsWidth("MoneyStockMeasuresBox", this);
},
methods: {
//初始化图表
inCharts() {
if (this.myChart == null) {
this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
}
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
this.myChart.setOption(this.option);
chartsWidth("MoneyStockMeasuresBox", this);
window.addEventListener("resize", () => {
if (this.myChart) this.myChart.resize();
});
},
async fetchMoneyStockMeasuresIndicator(params) {
this.MoneyStockMeasuresLoading = true
let timer
if (timer) {
clearTimeout(timer)
}
const { data } = await MoneyStockMeasures(params)
let MoneyStockMeasuresData = data.data
var option1
var option2
//空数据处理
if (MoneyStockMeasuresData.length == 0) {
this.$message({
message: this.$t(`home.NoData`),
type: 'warning'
});
if ( this.myChart) {
this.myChart.dispose();
}
this.MoneyStockMeasuresLoading = false
return
}
let m1ValueList = []
let m2ValueList = []
let mbValueList = []
let timeList = []
MoneyStockMeasuresData.forEach(item => {
m1ValueList.push(Number(item.m1.toFixed(2)))
m2ValueList.push(Number(item.m2.toFixed(2)))
if (item.mb) {
mbValueList.push(Number(item.mb.toFixed(2)))
}
item.date = `${item.date.split("T")[0].split("-")[0]}-${item.date.split("T")[0].split("-")[1]}`
timeList.push(item.date)
})
//有MB数据的情况 显示legend
if (MoneyStockMeasuresData[0].mb) {
if ( this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
option1 = {
tooltip: {
trigger: "axis",
//解决tooltip显示不全问题1
confine: true,
formatter: function (params) {
var res = params[0].axisValueLabel;
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} </span>`
}
return res;
},
},
legend: {
right: "100",
},
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: 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: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: "M1",
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: "2",
},
data: [],
},
{
name: "M2",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#e43961",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 0,
lineStyle: {
//线条样式
color: "#e43961",
width: "2",
},
data: [],
},
{
name: "Mb",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#383d71",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 0,
lineStyle: {
//线条样式
color: "#383d71",
width: "2",
},
data: [],
},
],
}
option1.series[0].data = m1ValueList
option1.series[1].data = m2ValueList
option1.series[2].data = mbValueList
option1.xAxis.data = timeList
option1= handelWatermark(option1) //添加水印
this.myChart.setOption(option1);
}else if (!MoneyStockMeasuresData[0].mb) {
if ( this.myChart) {
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById("MoneyStockMeasuresBox"));
option2 = {
tooltip: {
trigger: "axis",
//解决tooltip显示不全问题1
confine: true,
formatter: function (params) {
var res = params[0].axisValueLabel;
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} </span>`
}
return res;
},
},
legend: {
right: "100",
selected: {
"Mb": false
}
},
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: 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: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: "M1",
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: "2",
},
data: [],
},
{
name: "M2",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#e43961",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 0,
lineStyle: {
//线条样式
color: "#e43961",
width: "2",
},
data: [],
},
],
}
option2.series[0].data = m1ValueList
option2.series[1].data = m2ValueList
option2.xAxis.data = timeList
option2= handelWatermark(option2) //添加水印
this.myChart.setOption(option2);
}
timer = setTimeout(() => {
//添加水印
// this.option = handelWatermark(this.option)
// this.inCharts()
this.MoneyStockMeasuresLoading = false
}, 1000)
},
//接收Home传的时间handelParmesTime
handelSonTime(start, end) {
this.params.start = start;
this.params.end = end;
this.fetchMoneyStockMeasuresIndicator(this.params)
},
//点击对数/线性按钮切换
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[2], this.start, this.end, this.inCharts, this, this.btcFlag)
},
//父级点击ETH价格按钮
handelSonEthPrice(radius, flag) {
this.ethFlag = flag
fetchEthPrice("ETH", this.option.series[2], this.start, this.end, this.inCharts, this, this.ethFlag)
},
//父级选择Sma
handelSonSma(smaDataList) {
this.params.sma = smaDataList
this.fetchMoneyStockMeasuresIndicator(this.params)
this.$addStorageEvent(1, "sma", smaDataList);
// this.fatherSmaData = smaDataList
// handelSmaData(smaDataList, this.option.series[2], this.inCharts,this.start, this.end,)
},
handelZone(value, index) {
this.params.ifAdjusted = value
this.isactive = index
// console.log(value, index,"尽快if就覅");
this.fetchMoneyStockMeasuresIndicator(this.params)
},
}
}

144
yq/src/views/MoneyStockMeasures/index.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div v-loading="MoneyStockMeasuresLoading">
<div class="rowBox">
<el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
<el-row type="flex" justify="left">
<p style="font-weight:550;color:rgba(0,0,0,0.6)">MB = {{ $t(`home.cash`) }} + {{ $t(`home.deposit`) }} </p>
</el-row>
</el-row>
<el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
<el-row type="flex" justify="left">
<p style="font-weight:550;color:rgba(0,0,0,0.6)">M1 = {{ $t(`home.cash2`) }} + {{ $t(`home.current`) }} + {{ $t(`home.check`) }} + {{ $t(`home.depositCheck`) }}</p>
</el-row>
</el-row>
<el-row type="flex" justify="left" style="padding-left: 25%;height: 35px;">
<el-row type="flex" justify="left">
<p style="font-weight:550;color:rgba(0,0,0,0.6)">M2 = M1 + {{ $t(`home.savings`) }} + {{ $t(`home.regular`) }} + {{ $t(`home.otherDeposits`) }} </p>
</el-row>
</el-row>
</div>
<!-- 对数线性显示切换 -->
<!-- <el-row class="switch">
<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> -->
<div class="choiceBox" >
<span :class = "isactive === index ? 'addclass' : '' " v-for="item,index in choiceList" :key="item.value" @click="handelZone(item.value,index)" >{{ $t(item.label) }}</span>
</div>
<!-- 单位 -->
<div style="font-size: 12px;padding-right: 9%;color: rgba(0,0,0,0.6);text-align: right;">{{ $t(`home.unit`) }}: billion</div>
<el-row>
<el-col :span="24">
<div
id="MoneyStockMeasuresBox"
style="width: 100%; min-height: 700px"
></div>
</el-col>
</el-row>
<el-row style="font-size: 12px;padding: 20px;" >
<div>{{ $t(`home.M1`) }}</div>
<div>{{ $t(`home.M1_1`) }}</div>
<div>{{ $t(`home.M1_2`) }}</div>
<div>{{ $t(`home.M1_3`) }}</div>
<div>{{ $t(`home.M1_4`) }}</div>
<div>{{ $t(`home.M1_5`) }}</div>
<div>{{ $t(`home.M1_6`) }}</div>
<div>{{ $t(`home.M1_7`) }}</div>
<br>
<div>{{ $t(`home.M2`) }}</div>
<div>{{ $t(`home.M2_1`) }}</div>
<div>{{ $t(`home.M2_2`) }}</div>
<div>{{ $t(`home.M2_3`) }}</div>
<div>{{ $t(`home.M2_4`) }}</div>
<div>{{ $t(`home.M2_5`) }}</div>
<div>{{ $t(`home.M2_6`) }}</div>
</el-row>
</div>
</template>
<script>
import IndexJs from "./index"
export default {
mixins:[IndexJs]
}
</script>
<style lang="scss" scoped>
.maTillte {
margin-left: 45%;
color: rgba(0, 0, 0, 0.6);
}
.addclass{
color : darkorange;
}
.formulaBox{
width: 98.7%;
padding: 10px 0px;
margin-bottom: -30px;
font-size: 18px;
// height: 60px;
// background: #e5e5e5;
color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
margin-bottom: 20px;
font-weight: 600;
p{
padding: 0px 10px;
}
div{
padding: 0px 10px;
span{
font-size: 12px;
}
}
}
.choiceBox{
// outline: 1px solid red;
height: 30px;
line-height: 30px;
font-size: 14px;
// display: flex;
padding-left: 80px;
// margin-bottom: 30px;
span{
margin-left: 20px;
// color: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
span:hover{
color: #f7931a;
}
}
.rowBox{
margin-bottom: 20px;
.el-row--flex.is-justify-center{
height: 30px;
}
}
</style>