import * as echarts from "echarts";
import { getDistributionEth, } 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,
distributionEthLoading: 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 += `${params[0].marker} ${params[0].seriesName} ${params[0].value[1]}M`
// }else{
// res += `${params[i].marker} ${params[i].seriesName} ${params[i].value[1]}`
// }
// }
// 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: false,
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,
},
{
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,
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: true,
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: true,
},
{
type: "value",
// boundaryGap: [0, "100%"],
min: "dataMin",
max: "dataMax",
show: false,
},
],
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
name: "balance >= 0 and balance < 1",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#aa3550",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 5,
lineStyle: {
//线条样式
color: "#aa3550",
width: "1",
},
data: [],
},
{
name: "balance >= 1 and balance < 10 ",
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: "balance >= 10 and balance < 100",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#40200d",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 1,
lineStyle: {
//线条样式
color: "#40200d",
width: "1",
},
data: [],
},
{
name: "balance >= 100 and balance < 1000",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#13a72c",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 2,
lineStyle: {
//线条样式
color: "#13a72c",
width: "1",
},
data: [],
},
{
name: "balance >= 1000 and balance < 10000",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#595856",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 3,
lineStyle: {
//线条样式
color: "#595856",
width: "1",
},
data: [],
},
{
name: "balance >= 10000",
type: "line",
smooth: false,
symbol: "circle",
showSymbol: false,
symbolSize: 5,
// areaStyle: {},
itemStyle: {
color: "#1d2088",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
yAxisIndex: 4,
lineStyle: {
//线条样式
color: "#1d2088",
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: 8,
// 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: 9,
data: [],
},
],
},
switch3: "",
oldY: null,
btcFlag: null,
ethFlag: null,
fatherSmaData: [],
start: "",
end: "",
params: {
start: "",
end: "",
sma: ""
},
zoomStart: 0,
zoomEnd: 0,
}
},
mounted() {
this.fetchDistributionEth()
//禁用时间框
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("distributionEthBox"));
}
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
this.myChart.setOption(this.option);
chartsWidth("distributionEthBox", this);
window.addEventListener("resize", () => {
if (this.myChart) this.myChart.resize();
});
},
async fetchDistributionEth(params) {
this.distributionEthLoading = true
const { data } = await getDistributionEth(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.distributionEthLoading = false
return
}
let distributionEthData = data.data
this.start = distributionEthData[0].date.split("T")[0]
this.end = distributionEthData[distributionEthData.length - 1].date.split("T")[0]
// //添加水印
this.option = handelWatermark(this.option)
//根据渲染的数据时间渲染对应的价格线和移动平均线
// this.$nextTick(() => {
// //渲染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 balance1ValueList = []
let balance1kValueList = []
let balance10ValueList = []
let balance10kValueList = []
let balance100ValueList = []
let nozeroValueList = []
distributionEthData.forEach(item => {
balance1ValueList.push(Number(item.balance1.toFixed(2)))
balance1kValueList.push(Number(item.balance1k.toFixed(2)))
balance10ValueList.push(Number(item.balance10.toFixed(2)))
balance10kValueList.push(Number(item.balance10k.toFixed(2)))
balance100ValueList.push(Number(item.balance100.toFixed(2)))
nozeroValueList.push(Number(item.nozero.toFixed(2)))
})
this.option.series[1].data = handelProfitrate(distributionEthData, balance1ValueList)
this.option.series[2].data = handelProfitrate(distributionEthData, balance10ValueList)
this.option.series[3].data = handelProfitrate(distributionEthData, balance100ValueList)
this.option.series[4].data = handelProfitrate(distributionEthData, balance1kValueList)
this.option.series[5].data = handelProfitrate(distributionEthData, balance10kValueList)
this.option.series[0].data = handelProfitrate(distributionEthData, nozeroValueList)
this.inCharts()
this.distributionEthLoading = 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.fetchDistributionEth(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[6], this.start, this.end, this.inCharts, this, this.btcFlag)
},
//父级点击ETH价格按钮
handelSonEthPrice(radius, flag) {
this.ethFlag = flag
fetchEthPrice("ETH", this.option.series[6], this.start, this.end, this.inCharts, this, this.ethFlag)
},
//父级选择Sma
handelSonSma(smaDataList) {
this.params.sma = smaDataList
this.fetchDistributionEth(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)
}
}
}