代码推送
This commit is contained in:
262
yq/src/views/USDC/index.js
Normal file
262
yq/src/views/USDC/index.js
Normal file
@@ -0,0 +1,262 @@
|
||||
import * as echarts from "echarts";
|
||||
import { chartsWidth,emptyData,dataLength, handelProfitrate, handelZoom, handelLineType, handelSwitchs, handelUsdt, handelWatermark } from "../../util/processingData"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lengthTimer:null,
|
||||
USDCLoading: false,
|
||||
params: {
|
||||
req: "usdcVolume",
|
||||
radius: "ETH",
|
||||
start: "",
|
||||
end: ""
|
||||
},
|
||||
tronParams: {
|
||||
req: "tronUsdcVolume",
|
||||
radius: "ETH",
|
||||
},
|
||||
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}      <span style="font-weight: bold">${params[i].value[1]}</span>`
|
||||
|
||||
}
|
||||
return res;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: "100",
|
||||
// data:[`sopr`,'asopr','easopr','lthsopr','sthsopr',],
|
||||
// selected:{
|
||||
// 'asopr': false,
|
||||
// 'easopr': false,
|
||||
// 'lthsopr': false,
|
||||
// 'sthsopr': 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 {
|
||||
value = e;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
},
|
||||
min: "dataMin",
|
||||
max: "dataMax",
|
||||
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// boundaryGap: [0, "100%"],
|
||||
show: true,
|
||||
position: "right",
|
||||
min: "dataMin",
|
||||
max: "dataMax",
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "USDC on ETH",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
symbolSize: 5,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#f7931a",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#f7931a",
|
||||
width: "1",
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "USDC on TRON",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
symbolSize: 5,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#f49495",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#f49495",
|
||||
width: "1",
|
||||
},
|
||||
data: [],
|
||||
yAxisIndex: 0
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
switch3: "",
|
||||
sma: "",
|
||||
zoomStart: 0,
|
||||
zoomEnd: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.switch3 = handelSwitchs(this.option, this.switch3)
|
||||
|
||||
this.fetchUSDC(this.params.req, this.params.radius)
|
||||
|
||||
this.$addStorageEvent(1, "zoomStart", this.zoomStart);
|
||||
this.$addStorageEvent(1, "zoomEnd", this.zoomEnd);
|
||||
window.addEventListener("setItem", () => {
|
||||
this.zoomStart = localStorage.getItem("zoomStart")
|
||||
this.zoomEnd = localStorage.getItem("zoomEnd")
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//初始化图表
|
||||
inCharts() {
|
||||
if (this.myChart == null) {
|
||||
this.myChart = echarts.init(document.getElementById("USDCBox"));
|
||||
}
|
||||
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
|
||||
|
||||
this.myChart.setOption(this.option);
|
||||
chartsWidth("USDCBox", this);
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.myChart) this.myChart.resize();
|
||||
});
|
||||
},
|
||||
async fetchUSDC(req, radius, start, end, sma) {
|
||||
this.USDCLoading = true
|
||||
const { data } = await this.$API.getCsupply(req, radius, start, end, sma)
|
||||
let usdtData = data.data
|
||||
|
||||
const tron = await this.$API.getCsupply(this.tronParams.req, this.tronParams.radius, start, end, sma)
|
||||
let tronData = tron.data.data
|
||||
|
||||
//空数据处理
|
||||
let noData = emptyData(data.data, this.option.series, this.inCharts, this)
|
||||
if (noData) {
|
||||
this.USDCLoading = false
|
||||
return
|
||||
}
|
||||
|
||||
let usdtValueList = []
|
||||
//添加水印
|
||||
this.option = handelWatermark(this.option)
|
||||
|
||||
//渲染usdt
|
||||
usdtData.forEach(item => {
|
||||
usdtValueList.push(parseInt(item.volume * 100) / 100)
|
||||
})
|
||||
let tronValueList = []
|
||||
//渲染usdt USDt on TRON交易量
|
||||
tronData.forEach(item => {
|
||||
if (!item.date) return
|
||||
tronValueList.push(parseInt(item.volumeSelf * 100) / 100)
|
||||
})
|
||||
this.option.series[0].data = handelUsdt(usdtData, usdtValueList)
|
||||
//判断USDt on TRON交易量 没有数据返回
|
||||
if (tronData[0].date) {
|
||||
this.option.series[1].data = handelProfitrate(tronData, tronValueList)
|
||||
}
|
||||
|
||||
|
||||
this.inCharts()
|
||||
|
||||
this.USDCLoading = 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) {
|
||||
let type
|
||||
this.params.start = start;
|
||||
this.params.end = end;
|
||||
this.fetchUSDC(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)
|
||||
},
|
||||
//点击对数/线性按钮切换
|
||||
handelLineSwitch() {
|
||||
this.option = handelLineType(this.option)
|
||||
this.switch3 = handelSwitchs(this.option, this.switch3)
|
||||
this.myChart.setOption(this.option);
|
||||
|
||||
},
|
||||
//父级选择Sma
|
||||
handelSonSma(smaNUm) {
|
||||
this.sma = smaNUm
|
||||
let type
|
||||
this.fetchUSDC(this.params.req, this.params.radius, this.params.start, this.params.end, this.sma)
|
||||
this.$addStorageEvent(1, "sma", this.sma);
|
||||
// this.fatherSmaData = smaDataList
|
||||
// handelSmaData(smaDataList, this.option.series[3], this.inChart, this.start, this.end)
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.lengthTimer) {
|
||||
clearTimeout(this.lengthTimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user