代码推送
This commit is contained in:
552
yq/src/views/balanceData/index.js
Normal file
552
yq/src/views/balanceData/index.js
Normal file
@@ -0,0 +1,552 @@
|
||||
import * as echarts from "echarts";
|
||||
import { handelWatermark, chartsWidth ,emptyData} from "../../util/processingData"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//柱状图配置
|
||||
columnar: {
|
||||
|
||||
},
|
||||
//饼图配置
|
||||
pieChart: {
|
||||
// title: {
|
||||
// text: '同名数量统计',
|
||||
// subtext: '纯属虚构',
|
||||
// left: 'center'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
right: 150,
|
||||
// top: 20,
|
||||
// bottom: 20,
|
||||
// data: []
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: '姓名',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['40%', '50%'],
|
||||
data: [],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
params: {
|
||||
req: "getDayBalanceData",
|
||||
radius: "btc",
|
||||
value: "",
|
||||
},
|
||||
//折线图
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
position: function (pt) {
|
||||
return [pt[0], "10%"];
|
||||
},
|
||||
// formatter:(value)=>{
|
||||
// console.log(value,"交多少就覅");
|
||||
// }
|
||||
|
||||
},
|
||||
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",
|
||||
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// boundaryGap: [0, "100%"],
|
||||
show: false,
|
||||
position: "right",
|
||||
min: "dataMin",
|
||||
max: "dataMax",
|
||||
|
||||
},
|
||||
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 20,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "MVRV",
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 2,
|
||||
data: [],
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
},
|
||||
paramsTime: {
|
||||
start: "",
|
||||
end: ""
|
||||
},
|
||||
balanceData: [],
|
||||
balanceLoading: false,
|
||||
introduce: "",//接口介绍
|
||||
timeFlag: "",//时间变化的时候才发起请求
|
||||
value1: "",
|
||||
DateTime: "",
|
||||
pickerOptions: {
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() > new Date(this.DateTime).getTime()
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.onOption();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$addStorageEvent(1, "buttonShow", false);
|
||||
let menuObj = localStorage.getItem("params");
|
||||
this.params.req = JSON.parse(menuObj).componentReq;
|
||||
this.introduce = JSON.parse(menuObj).introduce;
|
||||
this.params.value = JSON.parse(menuObj).parameter;
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.myChart) this.myChart.resize();
|
||||
});
|
||||
//监听localstorage变化
|
||||
window.addEventListener("setItem", () => {
|
||||
let menuObj = localStorage.getItem("params");
|
||||
this.params.req = JSON.parse(menuObj).componentReq;
|
||||
this.introduce = JSON.parse(menuObj).introduce;
|
||||
this.params.value = JSON.parse(menuObj).parameter;
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
|
||||
params: {
|
||||
handler(val) {
|
||||
|
||||
if (val.req == "getDayBalanceData" || val.req == "getDayBalanceAmountData") {
|
||||
|
||||
|
||||
this.fetchBalanceData(this.params.req, this.params.radius, val.value)
|
||||
|
||||
|
||||
this.value1 = ""
|
||||
} else {
|
||||
return
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
|
||||
},
|
||||
//监听时间变化发起请求
|
||||
timeFlag: {
|
||||
handler(time) {
|
||||
if (this.params.req == "getDayBalanceData" || this.params.req == "getDayBalanceAmountData") {
|
||||
this.fetchBalanceData(this.params.req, this.params.radius, this.params.value, this.paramsTime.start, this.paramsTime.end)
|
||||
this.paramsTime.start = ""
|
||||
this.paramsTime.end = ""
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//初始化柱状图图表
|
||||
inCharts() {
|
||||
this.myChart = echarts.init(document.getElementById("balanceData"));
|
||||
this.myChart.setOption(this.columnar);
|
||||
chartsWidth("balanceData", this);
|
||||
},
|
||||
//初始化饼图
|
||||
inChartsPieChart() {
|
||||
this.myChart = echarts.init(document.getElementById("balanceDataPieChart"));
|
||||
|
||||
this.myChart.setOption(this.pieChart);
|
||||
chartsWidth("balanceDataPieChart", this);
|
||||
},
|
||||
async fetchBalanceData(req, radius, value, start, end) {
|
||||
this.balanceLoading = true
|
||||
const { data } = await this.$API.getBalanceData(req, radius, value, start, end)
|
||||
|
||||
this.balanceData = data.data
|
||||
//空数据处理
|
||||
let noData = emptyData(data.data, this.columnar.series, this.inCharts, this)
|
||||
if (noData) {
|
||||
this.balanceLoading = false
|
||||
emptyData(data.data, this.pieChart.series, this.inChartsPieChart, this)
|
||||
return
|
||||
}
|
||||
this.columnar.xAxis.data.length = 0
|
||||
this.columnar.series[0].data.length = 0
|
||||
//添加水印
|
||||
this.columnar = handelWatermark(this.columnar)
|
||||
|
||||
//更新数据后渲染
|
||||
|
||||
|
||||
let arr = Object.entries(this.balanceData[0])
|
||||
|
||||
arr.forEach(item => {
|
||||
if (item[0] == "id" || item[0] == "dateTime") {
|
||||
if (item[0] == "dateTime") {
|
||||
|
||||
this.DateTime = item[1].split(" ")[0]
|
||||
this.columnar.title.text = `${this.DateTime}`
|
||||
}
|
||||
return
|
||||
|
||||
} else {
|
||||
|
||||
let days = item[0].split("y")[1]
|
||||
if (days >= 365) {
|
||||
|
||||
|
||||
this.columnar.xAxis.data.push(`${(days / 365).toFixed(0)}years`)
|
||||
} else {
|
||||
|
||||
this.columnar.xAxis.data.push(`${days}days`)
|
||||
}
|
||||
|
||||
this.columnar.series[0].data.push(Number(item[1]).toFixed(2))
|
||||
}
|
||||
})
|
||||
|
||||
this.inCharts()
|
||||
this.balanceLoading = false
|
||||
},
|
||||
onOption() {
|
||||
let that = this
|
||||
this.columnar = {
|
||||
animation: false,
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
right: 80,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
align: "left",
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
// type:"category",
|
||||
splitLine: {
|
||||
color: "rgba(0,0,0,0.1)"
|
||||
},
|
||||
// axisLabel: {
|
||||
// formatter: function (a) {
|
||||
// let value
|
||||
// if (a>=10000) {
|
||||
// value = `${a / 1000}k`
|
||||
// }else{
|
||||
// value =a
|
||||
// }
|
||||
|
||||
// return value
|
||||
// }
|
||||
// },
|
||||
data: [],
|
||||
//最大值和最小值显示
|
||||
// showMinLabel: true,
|
||||
// showMaxLabel: true
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
name: this.$t(`home.figure`),
|
||||
// type: "log",
|
||||
position: "left",
|
||||
//坐标两边留白
|
||||
|
||||
//网格线设置
|
||||
// splitLine: {
|
||||
// color: "rgba(0,0,0,0.1)",
|
||||
// },
|
||||
|
||||
axisLabel: {
|
||||
// interval:0
|
||||
// formatter: function (value) {
|
||||
// let label
|
||||
// label = value / 1000000
|
||||
|
||||
// return `${label}M`
|
||||
// },
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
// minSpan: 10,
|
||||
start: 1,
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
type: 'inside',
|
||||
// filterMode: 'none',
|
||||
// minSpan: 0.1,
|
||||
// maxSpan: 99,
|
||||
// yAxisIndex: [0],
|
||||
// startValue: -20,
|
||||
// endValue: 20
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showSymbol: false,
|
||||
// clip: true,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#fdaa56",
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
//替换对象的key
|
||||
objKeyReplace(obj) {
|
||||
let time = obj.dateTime.split(" ")[0]
|
||||
let keyMap = {
|
||||
"dateTime": "dateTime",
|
||||
"day0": `${time}_0`,
|
||||
"day1": `${time}_1`,
|
||||
"day2": `${time}_2`,
|
||||
"day3": `${time}_3`,
|
||||
"day4": `${time}_4`,
|
||||
"day5": `${time}_5`,
|
||||
"day6": `${time}_6`,
|
||||
"day7": `${time}_7`,
|
||||
"day15": `${time}_15`,
|
||||
"day30": `${time}_30`,
|
||||
"day60": `${time}_60`,
|
||||
"day90": `${time}_90`,
|
||||
"day180": `${time}_180`,
|
||||
"day360": `${time}_360`,
|
||||
"day540": `${time}_540`,
|
||||
"day720": `${time}_720`,
|
||||
"day1080": `${time}_1080`,
|
||||
"day1440": `${time}_1440`,
|
||||
"day1880": `${time}_1880`,
|
||||
"day2160": `${time}_2160`,
|
||||
"day2520": `${time}_2520`,
|
||||
"day2880": `${time}_2880`,
|
||||
"day3240": `${time}_3240`,
|
||||
"day3600": `${time}_3600`,
|
||||
"day3960": `${time}_3960`,
|
||||
}
|
||||
for (const key in obj) {
|
||||
let newKey = keyMap[key]
|
||||
if (newKey) {
|
||||
obj[newKey] = obj[key]
|
||||
delete obj[key]
|
||||
}
|
||||
}
|
||||
return obj
|
||||
},
|
||||
handelSonTime(start, end) {
|
||||
this.paramsTime.start = start;
|
||||
this.paramsTime.end = end;
|
||||
this.timeFlag = start
|
||||
},
|
||||
//时间选择
|
||||
handeldate() {
|
||||
|
||||
this.fetchBalanceData(this.params.req, this.params.radius, this.params.value, this.value1)
|
||||
}
|
||||
}
|
||||
}
|
||||
61
yq/src/views/balanceData/index.vue
Normal file
61
yq/src/views/balanceData/index.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col class="date">
|
||||
|
||||
<el-date-picker v-model="value1" @change ="handeldate" value-format="yyyy-MM-dd" type="date" :placeholder="$t(`placeholder.data`)">
|
||||
</el-date-picker>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" v-loading="balanceLoading">
|
||||
|
||||
<div
|
||||
id="balanceData"
|
||||
style="width: 100%; min-height: 700px"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- <el-row>
|
||||
<div class="tableAnnotation">{{$t(`home.figure2`)}}</div>
|
||||
<el-col :span="24">
|
||||
<div
|
||||
id="balanceDataPieChart"
|
||||
style="width: 100%; min-height: 700px"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indeJs from "./index";
|
||||
export default {
|
||||
mixins: [indeJs],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tableAnnotation{
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
padding: 2px 0px;
|
||||
font-size: 13px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.date{
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
margin-bottom: 30px;
|
||||
/* padding: 10px 10px; */
|
||||
padding: 10px 100px !important;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style >
|
||||
.date .el-input__inner{
|
||||
margin: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user