361 lines
13 KiB
JavaScript
361 lines
13 KiB
JavaScript
|
import * as echarts from "echarts";
|
||
|
|
import { getCddEth, } from "../../api/pages"
|
||
|
|
import { chartsWidth,emptyData, dataLength,handelProfitrate, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
lengthTimer:null,
|
||
|
|
CDDEthLoading: 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++) {
|
||
|
|
// if (i==0) {
|
||
|
|
// res += `</br>${params[0].marker} ${params[0].seriesName}      <span style="font-weight: bold">${params[0].value[1]}E</span>`
|
||
|
|
// }else{
|
||
|
|
// res += `</br>${params[i].marker} ${params[i].seriesName}      <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).toFixed(2)}E`;
|
||
|
|
} else if (e > 1000000) {//百万
|
||
|
|
value = `${(e / 1000000).toFixed(2)}M`;
|
||
|
|
} else if (e >= 10000) {//万
|
||
|
|
value = `${(e / 10000).toFixed(2)}W`;
|
||
|
|
} else if (e < -1000000) {//百万
|
||
|
|
value = `${(e / 1000000).toFixed(2)}M`;
|
||
|
|
} else if (e < -10000) {//万
|
||
|
|
value = `${(e / 10000).toFixed(2)}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: "Coin Days Destroyed",
|
||
|
|
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: "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: 4,
|
||
|
|
// data: [],
|
||
|
|
|
||
|
|
|
||
|
|
// },
|
||
|
|
{
|
||
|
|
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: 1,
|
||
|
|
data: [],
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
switch3: "",
|
||
|
|
oldY: null,
|
||
|
|
btcFlag: null,
|
||
|
|
ethFlag: null,
|
||
|
|
fatherSmaData: [],
|
||
|
|
start: "",
|
||
|
|
end: "",
|
||
|
|
params: {
|
||
|
|
start: "",
|
||
|
|
end: "",
|
||
|
|
sma: ""
|
||
|
|
},
|
||
|
|
zoomStart: 0,
|
||
|
|
zoomEnd: 0,
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetchCddEth()
|
||
|
|
//禁用时间框
|
||
|
|
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")
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//初始化图表
|
||
|
|
inCharts() {
|
||
|
|
if (this.myChart == null) {
|
||
|
|
this.myChart = echarts.init(document.getElementById("CDDEthBox"));
|
||
|
|
}
|
||
|
|
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
|
||
|
|
|
||
|
|
this.myChart.setOption(this.option);
|
||
|
|
chartsWidth("CDDEthBox", this);
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
if (this.myChart) this.myChart.resize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async fetchCddEth(params) {
|
||
|
|
this.CDDEthLoading = true
|
||
|
|
const { data } = await getCddEth(params)
|
||
|
|
|
||
|
|
if (data.code !== 200) {
|
||
|
|
this.$message({
|
||
|
|
message: data.msg,
|
||
|
|
type: "error",
|
||
|
|
customClass: "messageClass",
|
||
|
|
});
|
||
|
|
return
|
||
|
|
}
|
||
|
|
//空数据处理
|
||
|
|
let noData = emptyData(data.data, this.option.series, this.inCharts, this)
|
||
|
|
if (noData) {
|
||
|
|
this.CDDEthLoading = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
let CDDEthData = data.data
|
||
|
|
this.start = CDDEthData[0].date.split("T")[0]
|
||
|
|
this.end = CDDEthData[CDDEthData.length - 1].date.split("T")[0]
|
||
|
|
// //添加水印
|
||
|
|
this.option = handelWatermark(this.option)
|
||
|
|
|
||
|
|
//根据渲染的数据时间渲染对应的价格线和移动平均线
|
||
|
|
// this.$nextTick(() => {
|
||
|
|
// // //移动平均线没值 才渲染正常价格数据
|
||
|
|
// // if (this.start && !this.fatherSmaData[0]) {
|
||
|
|
// // this.ethFlag = true
|
||
|
|
// // this.handelSonEthPrice("ETH", true);
|
||
|
|
// // this.$addStorageEvent(1, "ethFlag", JSON.stringify(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)
|
||
|
|
// }
|
||
|
|
// //渲染BTC价格
|
||
|
|
// if (this.btcFlag) {
|
||
|
|
// this.$addStorageEvent(1, "btcFlag", JSON.stringify(this.btcFlag));
|
||
|
|
// this.handelSonBtcPrice("BTC", this.btcFlag)
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// })
|
||
|
|
|
||
|
|
this.handelSonEthPrice("ETH", true)
|
||
|
|
let ValueList = []
|
||
|
|
CDDEthData.forEach(item => {
|
||
|
|
|
||
|
|
|
||
|
|
// item.value= item.value/1000000000
|
||
|
|
|
||
|
|
|
||
|
|
ValueList.push(Number(item.value.toFixed(2)))
|
||
|
|
|
||
|
|
})
|
||
|
|
this.option.series[0].data = handelProfitrate(CDDEthData, ValueList)
|
||
|
|
|
||
|
|
|
||
|
|
this.inCharts()
|
||
|
|
|
||
|
|
this.CDDEthLoading = 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.params.start = start;
|
||
|
|
this.params.end = end;
|
||
|
|
this.fetchCDDEthIndicator(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[1], this.start, this.end, this.inCharts, this, this.btcFlag)
|
||
|
|
|
||
|
|
},
|
||
|
|
//父级点击ETH价格按钮
|
||
|
|
handelSonEthPrice(radius, flag) {
|
||
|
|
this.ethFlag = flag
|
||
|
|
fetchEthPrice("ETH", this.option.series[1], this.start, this.end, this.inCharts, this, this.ethFlag)
|
||
|
|
},
|
||
|
|
//父级选择Sma
|
||
|
|
handelSonSma(smaDataList) {
|
||
|
|
|
||
|
|
this.params.sma = smaDataList
|
||
|
|
this.fetchCddEth(this.params)
|
||
|
|
this.$addStorageEvent(1, "sma", smaDataList);
|
||
|
|
// this.fatherSmaData = smaDataList
|
||
|
|
// handelSmaData(smaDataList, this.option.series[2], this.inCharts,this.start, this.end,)
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.lengthTimer) {
|
||
|
|
clearTimeout(this.lengthTimer)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|