代码推送
This commit is contained in:
239
yq/src/views/tronUsdtVolume/index.js
Normal file
239
yq/src/views/tronUsdtVolume/index.js
Normal file
@@ -0,0 +1,239 @@
|
||||
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);
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user