239 lines
8.8 KiB
JavaScript
239 lines
8.8 KiB
JavaScript
|
import * as echarts from "echarts";
|
||
|
|
import { handelBtcPrice, handelProfitrate,handelLineType,handelSwitchs } from "../../util/processingData"
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
tronUsdtVolumeLoading:false,
|
||
|
|
params:{
|
||
|
|
req:"tronUsdtVolume",
|
||
|
|
radius:"ETH",
|
||
|
|
start:"",
|
||
|
|
end:""
|
||
|
|
},
|
||
|
|
option: {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
position: function (pt) {
|
||
|
|
return [pt[0], "10%"];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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: 20,
|
||
|
|
end: 100,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
start: 0,
|
||
|
|
end: 100,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "number of token transferred",
|
||
|
|
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: "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轴
|
||
|
|
// markLine: {
|
||
|
|
// symbol: ["none", "none"], //去掉箭头
|
||
|
|
// itemStyle: {
|
||
|
|
// normal: {
|
||
|
|
// lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// // lineStyle:{
|
||
|
|
// // color:"red"
|
||
|
|
// // },
|
||
|
|
|
||
|
|
// label: {
|
||
|
|
// formatter: "{b}",
|
||
|
|
// fontSize: 10,
|
||
|
|
// color: "rgba(0,0,0,0.8)",
|
||
|
|
// align: "left",
|
||
|
|
// },
|
||
|
|
// data: [
|
||
|
|
// // {
|
||
|
|
// // name: "0",
|
||
|
|
// // yAxis: 0,
|
||
|
|
// // },
|
||
|
|
// // {
|
||
|
|
// // name: "$40W",
|
||
|
|
// // yAxis: 400000,
|
||
|
|
// // },
|
||
|
|
// {
|
||
|
|
// name: "$70W",
|
||
|
|
// yAxis: 700000,
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// name: "$40W",
|
||
|
|
// yAxis: 400000,
|
||
|
|
// },
|
||
|
|
|
||
|
|
// {
|
||
|
|
// name: "$10W",
|
||
|
|
// yAxis: 100000,
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// name: "$100W",
|
||
|
|
// yAxis: 1000000,
|
||
|
|
// // position: ['100%', '50'],
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// name: "$120W",
|
||
|
|
// yAxis: 1200000,
|
||
|
|
// },
|
||
|
|
|
||
|
|
// {
|
||
|
|
// name: "$140W",
|
||
|
|
// yAxis: 1400000,
|
||
|
|
// },
|
||
|
|
// ],
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
switch3:""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.switch3 = handelSwitchs(this.option, this.switch3)
|
||
|
|
|
||
|
|
this.fetchTronUsdtVolume(this.params.req,this.params.radius)
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
//初始化图表
|
||
|
|
inCharts() {
|
||
|
|
this.myChart = echarts.init(document.getElementById("tronUsdtVolumeBox"));
|
||
|
|
|
||
|
|
this.myChart.setOption(this.option);
|
||
|
|
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
if (this.myChart) this.myChart.resize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//返回了三个字段 目前只做volumeSelf
|
||
|
|
async fetchTronUsdtVolume(req, radius, start, end){
|
||
|
|
this.tronUsdtVolumeLoading = true
|
||
|
|
const { data } = await this.$API.getCsupply(req, radius, start, end)
|
||
|
|
let tronUsdtVolumeData = data.data
|
||
|
|
|
||
|
|
|
||
|
|
let time =""
|
||
|
|
let volumeSelfList = []
|
||
|
|
tronUsdtVolumeData.forEach(item=>{
|
||
|
|
time = item.date.split("T")[0]
|
||
|
|
volumeSelfList.push(parseInt(item.volumeSelf*100)/100)
|
||
|
|
|
||
|
|
})
|
||
|
|
this.option.series[0].data = handelProfitrate(tronUsdtVolumeData, volumeSelfList)
|
||
|
|
|
||
|
|
this.inCharts()
|
||
|
|
this.tronUsdtVolumeLoading = false
|
||
|
|
},
|
||
|
|
//接收Home传的时间handelParmesTime
|
||
|
|
handelSonTime(start, end) {
|
||
|
|
this.params.start = start;
|
||
|
|
this.params.end = end;
|
||
|
|
this.fetchTronUsdtVolume(this.params.req,this.params.radius,this.params.start, this.params.end)
|
||
|
|
},
|
||
|
|
//点击对数/线性按钮切换
|
||
|
|
handelLineSwitch() {
|
||
|
|
this.option = handelLineType(this.option)
|
||
|
|
this.switch3 = handelSwitchs(this.option, this.switch3)
|
||
|
|
this.myChart.setOption(this.option);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|