代码推送
This commit is contained in:
379
yq/src/views/liveliness/index.js
Normal file
379
yq/src/views/liveliness/index.js
Normal file
@@ -0,0 +1,379 @@
|
||||
import * as echarts from "echarts";
|
||||
import { chartsWidth,emptyData,dataLength, handelProfitrate, handelZoom, handelLineType, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lengthTimer:null,
|
||||
livelinessLoading: false,
|
||||
params: {
|
||||
req: "liveliness",
|
||||
radius: "btc"
|
||||
},
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
//解决tooltip显示不全问题1
|
||||
confine: true,
|
||||
},
|
||||
legend: {
|
||||
right: "100",
|
||||
//处理legengd过长
|
||||
// formatter: function (name) {
|
||||
|
||||
// return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
|
||||
// },
|
||||
tooltip: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: "time",
|
||||
// type: 'category',
|
||||
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 {
|
||||
value = e;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// boundaryGap: [0, "100%"],
|
||||
show: true,
|
||||
position: "right"
|
||||
},
|
||||
|
||||
],
|
||||
dataZoom: [
|
||||
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Liveliness",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
// stack: 'Total',
|
||||
symbolSize: 5,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#f7931a",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#f7931a",
|
||||
width: "2",
|
||||
},
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {//接近数据轴线
|
||||
// offset: 0,
|
||||
// color: 'rgba(247,147,26,0.7)'
|
||||
// },
|
||||
// {//接近X轴
|
||||
// offset: 1,
|
||||
// color: 'rgba(247,147,26,0.2)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [],
|
||||
yAxisIndex: 0,
|
||||
},
|
||||
{
|
||||
name: "liveliness(CE)",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
// stack: 'Total',
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
symbolSize: 5,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#b9332b",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#b9332b",
|
||||
width: "1",
|
||||
},
|
||||
yAxisIndex: 0,
|
||||
// areaStyle: {
|
||||
// opacity: 0.8,
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {//接近数据轴线
|
||||
// offset: 0,
|
||||
// color: 'rgba(185,51,43,0.7)'
|
||||
// },
|
||||
// {//接近X轴
|
||||
// offset: 1,
|
||||
// color: 'rgba(185,51,43,0.2)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
yAxisIndex: 0,
|
||||
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轴
|
||||
|
||||
},
|
||||
// {
|
||||
// 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: 3,
|
||||
// data: [],
|
||||
// },
|
||||
|
||||
],
|
||||
},
|
||||
livelinessData: [],
|
||||
parmesTime: {
|
||||
start: "",
|
||||
end: ""
|
||||
},
|
||||
switch3: "",
|
||||
btcFlag: null,
|
||||
ethFlag: null,
|
||||
fatherSmaData: [],
|
||||
start: "",
|
||||
end: "",
|
||||
sma: "",
|
||||
zoomStart: 0,
|
||||
zoomEnd: 0,
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.fetchLiveliness(this.params.req, this.params.radius)
|
||||
// setTimeout(() => {
|
||||
// this.pass()
|
||||
// }, 3000);
|
||||
|
||||
this.switch3 = handelSwitchs(this.option, this.switch3)
|
||||
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"));
|
||||
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("livelinessBox"));
|
||||
|
||||
}
|
||||
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
|
||||
|
||||
this.myChart.setOption(this.option);
|
||||
chartsWidth("livelinessBox", this);
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.myChart) this.myChart.resize();
|
||||
});
|
||||
},
|
||||
async fetchLiveliness(req, radius, start, end, sma) {
|
||||
this.livelinessLoading = true
|
||||
const { data } = await this.$API.getCsupply(req, radius, start, end, sma)
|
||||
this.livelinessData = data.data
|
||||
//空数据处理
|
||||
let noData = emptyData(data.data, this.option.series, this.inCharts, this)
|
||||
if (noData) {
|
||||
this.livelinessLoading = false
|
||||
return
|
||||
}
|
||||
this.start = this.livelinessData[0].date.split("T")[0]
|
||||
this.end = this.livelinessData[this.livelinessData.length - 1].date.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.$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 livelinessValueList = []
|
||||
let ealivelinessValueList = []
|
||||
let xAxisData=[]
|
||||
this.livelinessData.forEach(item => {
|
||||
|
||||
livelinessValueList.push(Number(item.ealiveliness.toFixed(6)))
|
||||
ealivelinessValueList.push(Number(item.liveliness.toFixed(6)))
|
||||
//判断渲染与上面数据时间一致得价格数据
|
||||
xAxisData.push(item.date.split("T")[0])
|
||||
})
|
||||
this.option.xAxis.data = xAxisData
|
||||
this.option.series[0].data = livelinessValueList
|
||||
this.option.series[1].data =ealivelinessValueList
|
||||
this.option.series[2].data = priceData
|
||||
this.inCharts()
|
||||
this.livelinessLoading = 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.parmesTime.start = start;
|
||||
this.parmesTime.end = end;
|
||||
this.fetchLiveliness(this.params.req, this.params.radius, this.parmesTime.start, this.parmesTime.end, this.sma)
|
||||
},
|
||||
//传值给父组件改变Ecarts 图表的线性和对数显示
|
||||
// pass(){
|
||||
// this.$emit("handelSwitch",this.option)
|
||||
// },
|
||||
//接收父级改变后的option
|
||||
handelFatherSwitch(val) {
|
||||
this.option.yAxis = val.yAxis
|
||||
this.myChart.setOption(this.option);
|
||||
},
|
||||
//点击对数/线性按钮切换
|
||||
handelLineSwitch() {
|
||||
this.option = handelLineType(this.option)
|
||||
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
|
||||
this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
|
||||
fetchEthPrice("ETH", this.option.series[3], this.start, this.end, this.inCharts, this, this.ethFlag)
|
||||
},
|
||||
//父级选择Sma
|
||||
handelSonSma(smaDataList) {
|
||||
|
||||
this.sma = smaDataList
|
||||
|
||||
this.fetchLiveliness(this.params.req, this.params.radius, this.parmesTime.start, this.parmesTime.end, this.sma)
|
||||
|
||||
this.$addStorageEvent(1, "sma", this.sma);
|
||||
|
||||
|
||||
// this.fatherSmaData = smaDataList
|
||||
// handelSmaData(smaDataList, this.option.series[2], this.inCharts,this.start, this.end,)
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.lengthTimer) {
|
||||
clearTimeout(this.lengthTimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
198
yq/src/views/liveliness/index.vue
Normal file
198
yq/src/views/liveliness/index.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div v-loading="livelinessLoading" style="width: 100%; min-height: 700px">
|
||||
|
||||
<!-- 公式 -->
|
||||
<el-row type="flex" justify="center">
|
||||
<div class="formulaBox1">
|
||||
<section class="title">Liveliness</section>
|
||||
|
||||
<section class="right">
|
||||
|
||||
<div class="formula2">
|
||||
<p>=</p>
|
||||
<div class="right2">
|
||||
<p>Cumulative CDD</p>
|
||||
<p>Cumulative Total Supply</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formula3">
|
||||
<p>=</p>
|
||||
<div class="right2">
|
||||
<p>value · lifespan <span style="color:rgba(0,0,0,0.4);font-size:16px">[blocks](of all outputs ever spent)</span> </p>
|
||||
<p>value · lifespan <span style="color:rgba(0,0,0,0.4)">[blocks] (of all outputs ever created)</span> </p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</el-row>
|
||||
<!-- 对数线性显示切换 -->
|
||||
<el-row class="nav">
|
||||
<el-col :span="3">
|
||||
<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 :span="24">
|
||||
<div
|
||||
id="livelinessBox"
|
||||
style="width: 100%; min-height: 700px"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 移动平均线 -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="24">
|
||||
<div
|
||||
id="smaBox"
|
||||
style="width: 100%; min-height: 700px"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IndexJs from "../liveliness/index";
|
||||
export default {
|
||||
mixins: [IndexJs],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nav{
|
||||
/* outline: 1px solid red; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.header-new-drop{
|
||||
// background: goldenrod;
|
||||
// height: 200px;
|
||||
.item{
|
||||
// background: red !important;
|
||||
// height: 30px ;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
}
|
||||
.dropdown2{
|
||||
outline: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 8px 20px;
|
||||
// .items{
|
||||
// outline: 1px solid red;
|
||||
// .item{
|
||||
// outline: 1px solid red;
|
||||
// }
|
||||
// }
|
||||
// .el-dropdown-item{
|
||||
// outline: 1px solid red;
|
||||
// }
|
||||
}
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
// outline: 1px solid red;
|
||||
/* color: #f7931a; */
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 12px;
|
||||
// outline: 1px solid red;
|
||||
|
||||
}
|
||||
|
||||
.formulaBox1{
|
||||
// outline: 1px solid red;
|
||||
display: flex;
|
||||
// margin-top: 10px;
|
||||
// outline: 1px solid red;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin-bottom: 20px;
|
||||
|
||||
|
||||
.title{
|
||||
// outline: 1px solid red;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.right{
|
||||
// outline: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: left;
|
||||
|
||||
p{
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
div{
|
||||
// margin-top: 5px;
|
||||
// outline: 1px solid goldenrod;
|
||||
}
|
||||
.formula2{
|
||||
padding: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p{
|
||||
padding: 0;
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
|
||||
.right2{
|
||||
padding: 0px 5px;
|
||||
p:nth-of-type(1){
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
||||
margin: 0px;
|
||||
}
|
||||
p:nth-of-type(2){
|
||||
// padding-left: 80px;
|
||||
// outline: 1px solid red;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.formula3{
|
||||
padding: 0px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right2{
|
||||
padding: 0px 5px;
|
||||
p:nth-of-type(1){
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
||||
margin: 0px;
|
||||
span{
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
span:nth-of-type(1){
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(2){
|
||||
// padding-left: 80px;
|
||||
margin: 0px;
|
||||
span{
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user