代码推送
This commit is contained in:
259
yq/src/views/bobp/index.js
Normal file
259
yq/src/views/bobp/index.js
Normal file
@@ -0,0 +1,259 @@
|
||||
import * as echarts from "echarts";
|
||||
import { getBobp } from "../../api/apiPost"
|
||||
import { chartsWidth, emptyData, handelLineType, handelZoom, handelWatermark, handelSwitchs, fetchBtcPrice, fetchEthPrice, handelSmaData, getDateArray } from "../../util/processingData"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bobpLoading: false,
|
||||
option: {
|
||||
color: ['#5470c6', '#91cc75', '#73c0de', '#fac858', '#e87e82', `#9a60b4`, `#a80000`, `#191a46`, `#2d993b`,`#fe0000`],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 100,
|
||||
},
|
||||
graphic: [],//水印
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
data: []
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
// {
|
||||
// name: "1",
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// // data: [120, 132, 101, 134, 90, 230, 210]
|
||||
// data:[]
|
||||
// },
|
||||
// {
|
||||
// name: '2',
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// // data: [220, 182, 191, 234, 290, 330, 310]
|
||||
// data:[]
|
||||
// },
|
||||
// {
|
||||
// name: '3',
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// // data: [150, 232, 201, 154, 190, 330, 410]
|
||||
// data:[]
|
||||
// },
|
||||
// {
|
||||
// name: '4',
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// // data: [150, 232, 201, 154, 190, 330, 410]
|
||||
// data:[]
|
||||
// },
|
||||
// {
|
||||
// name: '5',
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
|
||||
// data:[]
|
||||
// },
|
||||
// {
|
||||
// name: '6',
|
||||
// type: 'bar',
|
||||
// stack: 'Ad',
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// data:[]
|
||||
// },
|
||||
|
||||
]
|
||||
},
|
||||
switch3: "",
|
||||
oldY: null,
|
||||
btcFlag: null,
|
||||
ethFlag: null,
|
||||
fatherSmaData: [],
|
||||
start: "",
|
||||
end: "",
|
||||
params: {
|
||||
coin: "BTC"
|
||||
},
|
||||
zoomStart: 0,
|
||||
zoomEnd: 0,
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
this.fetchBobp(this.params)
|
||||
//禁用时间框
|
||||
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("bobpBox"));
|
||||
}
|
||||
this.option = handelZoom(this.myChart, this.option, this, this.zoomStart, this.zoomEnd)
|
||||
|
||||
this.myChart.setOption(this.option);
|
||||
chartsWidth("bobpBox", this);
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.myChart) this.myChart.resize();
|
||||
});
|
||||
},
|
||||
async fetchBobp(params) {
|
||||
|
||||
this.bobpLoading = true
|
||||
const { data } = await getBobp(params)
|
||||
let bobpData = data.data.list
|
||||
//空数据处理
|
||||
let noData = emptyData(bobpData, this.option.series, this.inCharts, this)
|
||||
if (noData) {
|
||||
this.bobpLoading = false
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
let seriesNum = bobpData[0].value.length
|
||||
|
||||
//动态添加series个数
|
||||
if (this.option.series.length == 0) {
|
||||
for (let i = 0; i < seriesNum; i++) {
|
||||
this.option.series.push({
|
||||
name: "",
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: []
|
||||
},)
|
||||
|
||||
}
|
||||
}
|
||||
// 清空 xAxis.data 和 series 中各个元素的 data 属性
|
||||
this.option.xAxis[0].data = [];
|
||||
for (let i = 0; i < this.option.series.length; i++) {
|
||||
this.option.series[i].data = [];
|
||||
}
|
||||
|
||||
bobpData.forEach((item, index) => {
|
||||
item.date = `${item.date.split(`T`)[0]} ${item.date.split(`T`)[1].split(`.`)[0]}`
|
||||
this.option.xAxis[0].data.push(item.date)
|
||||
|
||||
for (let i = 0; i < this.option.series.length; i++) {
|
||||
if (!item.value[i]) {
|
||||
this.option.series[i].data.push(Number(0));
|
||||
} else {
|
||||
this.option.series[i].data.push(
|
||||
Number(Number(item.value[i].num).toFixed(2))
|
||||
);
|
||||
this.option.series[i].name = item.value[i].price;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// // //添加水印
|
||||
this.option = handelWatermark(this.option)
|
||||
|
||||
|
||||
|
||||
this.inCharts()
|
||||
|
||||
this.bobpLoading = false
|
||||
},
|
||||
|
||||
//接收Home传的时间handelParmesTime
|
||||
handelSonTime(start, end) {
|
||||
this.params.start = start;
|
||||
this.params.end = end;
|
||||
this.fetchBobp(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
|
||||
this.$addStorageEvent(1, "ethFlag", JSON.stringify(this.ethFlag));
|
||||
fetchEthPrice("ETH", this.option.series[2], this.start, this.end, this.inCharts, this, this.ethFlag)
|
||||
},
|
||||
//父级选择Sma
|
||||
handelSonSma(smaDataList) {
|
||||
this.params.sma = smaDataList
|
||||
this.fetchBobp(this.params)
|
||||
this.$addStorageEvent(1, "sma", smaDataList);
|
||||
// this.fatherSmaData = smaDataList
|
||||
// handelSmaData(smaDataList, this.option.series[1], this.inCharts,this.start, this.end,)
|
||||
|
||||
},
|
||||
handelZone() {
|
||||
this.fetchBobp(this.params)
|
||||
},
|
||||
}
|
||||
}
|
||||
36
yq/src/views/bobp/index.vue
Normal file
36
yq/src/views/bobp/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
|
||||
<div v-loading="bobpLoading">
|
||||
<!-- 对数线性显示切换 -->
|
||||
|
||||
<!-- <el-row class="switch">
|
||||
<el-col>
|
||||
<el-button @click="handelLineSwitch"
|
||||
style="margin-left:100px;height:35px;border-radius:6px;"
|
||||
>{{ $t(`home.switch`)
|
||||
}}<span class="according"> {{ $t(switch3) }}</span></el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div
|
||||
id="bobpBox"
|
||||
style="width: 100%; min-height: 700px"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IndexJs from "./index"
|
||||
export default {
|
||||
mixins:[IndexJs]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user