<template>
<div id="com-quotation_depth">
<div id="echarts" style="height: 1.74rem; width: 100%" ref='echartsdepth'></div>
</div>
</template>
<script>
// 引入基本模板
import echarts from 'echarts'
// 引入柱状图组件
import 'echarts/lib/chart/line'
// 引入提示框和title组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import {
mapState
} from 'vuex'
export default {
name: 'com-quotation_depth',
data() {
return {
marketCoin: '',
nowSymbol: '',
depthData: {},
depthMap: {},
asksNum: 0,
buysNum: 0,
eachartColor: {
// 买区域颜色
buyAreaColor: {
start: 'rgba(4, 193, 158, 1)', // 开始颜色
end: 'rgba(4, 193, 158, 0.1)' // 结束颜色
},
// 卖区域颜色
sellAreaColor: {
start: 'rgba(239, 86, 86, 1)',
end: 'rgba(239, 86, 86, 0.1)' // 结束颜色
},
// 坐标轴刻度上的颜色, 坐标轴刻度文字的颜色
tickColor: '#98A9B6',
// 网格颜色
gridColor: '#EAECEF'
}
}
},
components: {},
watch: {},
computed: {},
created () {
this.marketCoin = this._P.getStorage('nowSymbol')
this.nowSymbol = this.marketCoin.split('/')[1]
},
mounted() {
this.initEcharts()
this.initDepth()
},
methods: {
shortNumber (num, digits=2) {
const si = [{
value: 1,
symbol: "k"
},
{
value: 1E3,
symbol: "K"
},
{
value: 1E6,
symbol: "M"
},
{
value: 1E9,
symbol: "G"
},
{
value: 1E12,
symbol: "T"
},
{
value: 1E15,
symbol: "P"
},
{
value: 1E18,
symbol: "E"
}
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
let i;
for (i = si.length - 1; i > 0; i--) {
if (num >= si[i].value) {
break;
}
}
return (num / si[i].value).toPrecision(digits) + si[i].symbol;
},
initDepth () {
let num = 20
let content = {}
content.asks = []
content.buys = []
for (let i = 0; i < num; i++) {
content.asks.push({
price: '--',
vol: '--',
total: 0
})
content.buys.push({
price: '--',
vol: '--',
total: 0
})
}
this.depthData = content
},
update(data) {
let askMaxTotal = 0
let buyMaxTotal = 0
let askMaxPrice = 0
let buyMinPrice = 0
if (data.data.tick && data.type === 2) {
let asks = data.data.tick.asks
let buys = data.data.tick.buys
this.asksNum = asks.length
this.buysNum = buys.length
while (asks.length < this.asksNum) {
asks.push({
price: '--',
vol: '--',
total: 0
})
}
while (buys.length < this.buysNum) {
buys.push({
price: '--',
vol: '--',
total: 0
})
}
buys.forEach((e, i) => {
let vol = 0
if (e.vol) {
vol = e.vol === '--' ? 0 : e.vol
if (vol > buyMaxTotal) {
buyMaxTotal = vol
}
buyMinPrice = e.price === '--' ? buyMinPrice : e.price
} else {
vol = e[1] === '--' ? 0 : e[1]
if (vol > buyMaxTotal) {
buyMaxTotal = vol
}
buyMinPrice = e[0] === '--' ? buyMinPrice : e[0]
}
})
buys.forEach((e, i) => {
if (e.vol) {
e.total = buyMaxTotal
} else {
e.push(buyMaxTotal)
}
})
asks.forEach((e, i) => {
let vol = 0
if (e.vol) {
vol = e.vol === '--' ? 0 : e.vol
if (vol > askMaxTotal) {
askMaxTotal = vol
}
askMaxPrice = e.price === '--' ? askMaxPrice : e.price
} else {
vol = e[1] === '--' ? 0 : e[1]
if (vol > askMaxTotal) {
askMaxTotal = vol
}
askMaxPrice = e[0] === '--' ? askMaxPrice : e[0]
}
})
asks.forEach((e, i) => {
if (e.vol) {
e.total = askMaxTotal
} else {
e.push(askMaxTotal)
}
})
if (asks.length >= this.asksNum) {
asks = asks.slice(0, this.asksNum)
}
if (buys.length >= this.buysNum) {
buys = buys.slice(0, this.buysNum)
}
let channel = data.data.channel
channel = channel.split('_')[3]
if (channel === 'step0') {
this.depthData.asks = asks
this.depthData.buys = buys
}
this.$forceUpdate()
}
this.setData(this.depthData, buyMinPrice, askMaxPrice)
},
setData (newData, minval, maxval) {
if (!newData['buys']) { return }
this.minval = minval + ''
this.maxval = maxval + ''
// console.log('buy', this.buysArr)
// console.log('ask', this.asksArr)
this.myEcharts.resize()
this.eachart()
},
eachart () {
let buy = []
let buyTotal = 0
let buyVol = 0
this.depthData.buys.forEach((e) => {
let value = []
if (e.price) {
buyVol = (e.vol) + buyVol
value.push(e.price)
value.push(buyVol)
// value.push(e.total)
} else {
buyVol = (e[1]) + buyVol
value.push(e[0])
value.push(buyVol)
// value.push(e[2])
}
if (value[0] !== '--') {
let obj = {
value: value,
label: {},
itemStyle: {}
}
buy.unshift(obj)
}
})
let ask = []
let askTotal = 0
let askVol = 0
this.depthData.asks.forEach((e) => {
let value = []
if (e.price) {
askVol = (e.vol) + askVol
value.push(e.price)
value.push(askVol)
// value.push(e.total)
} else {
askVol = (e[1]) + askVol
value.push(e[0])
value.push(askVol)
// value.push(e[2])
}
if (value[0] !== '--') {
let obj = {
value: value,
label: {},
itemStyle: {}
}
ask.push(obj)
}
})
this.myEcharts.setOption({
dataZoom: [
{
type: 'inside'
},
{
type: 'inside'
}
],
xAxis: {
min: this.minval,
max: this.maxval
},
series: [
{
data: buy
},
{
data: ask
}
]
})
},
initEcharts() {
let _this = this
this.myEcharts = echarts.init(this.$refs.echartsdepth)
this.myEcharts.setOption({
// 点击后的弹层
tooltip: {
trigger: 'none', // 不限时弹层
// alwaysShowContent: true,
axisPointer: { // 显示随手指移动的刻度线
type: 'cross',
show: false,
crossStyle: { width: 0.5 }
}
},
// 网格
grid: {
show: true,
borderColor: this.eachartColor.gridColor,
borderWidth: 0,
containLabel: true,
left: 0,
top: 20,
right: 0,
bottom: 0
},
// 方位
legend: {},
animation: false,
xAxis: {
boundaryGap: false, // 坐标轴两边留白策略
axisLine: {
show: false
},
axisTick: {
show: false, // 是否显示坐标轴刻度。
lineStyle: {
color: this.eachartColor.tickColor
}
}, // 标色
axisLabel: {
fontSize: 10,
margin: 10,
color: this.eachartColor.tickColor, // 字体颜色
showMaxLabel: false,
showMinLabel: false,
// formatter: function (value, index) {
// if (index == _this.asksNum || index == _this.buysNum) {
// return value
// }
// }
},
type: 'category',
splitLine: {
lineStyle: {
color: ['rgba(153,153,153,0.07)']
}
}
},
yAxis: {
axisLine: {
show: false // 是否显示坐标轴轴线。
},
axisTick: {
show: false, // 是否显示坐标轴刻度。
lineStyle: {
color: this.eachartColor.tickColor // 坐标轴刻度颜色
}
},
axisLabel: {
inside: true, // 刻度标签是否朝内
fontSize: 10, // 文字大小
color: this.eachartColor.tickColor, // 字体颜色
formatter: function (name) { // 格式化文字
return _this.shortNumber(name, 4)
}
},
type: 'value',
splitLine: {
lineStyle: {
color: ['rgba(234,236,239,0.4)'] // 坐标轴在 grid 区域中的分隔线。
}
}
},
series: [
{
type: 'line',
smooth: 0, // 是否平滑曲线显示。
symbol: 'none',
lineStyle: {
normal: {
color: this.eachartColor.buyAreaColor.start,
width: 1
}
},
itemStyle: {
normal: {
color: this.eachartColor.buyAreaColor.start,
}
},
areaStyle: {
normal: {
// 买区域颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.eachartColor.buyAreaColor.start,
},
{
offset: 1,
color: this.eachartColor.buyAreaColor.end
}
])
}
},
data: []
},
{
type: 'line',
smooth: 0, // 如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。
symbol: 'none', // 区域上面的一条线
lineStyle: {
normal: {
color: this.eachartColor.sellAreaColor.start,
width: 1 // 区域上面的一条线宽度
}
},
itemStyle: {
normal: {
color: this.eachartColor.sellAreaColor.start
}
},
// 卖区域颜色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [
{
offset: 0,
color: this.eachartColor.sellAreaColor.start
},
{
offset: 1,
color: this.eachartColor.sellAreaColor.end
}
]
)
}
},
data: []
}
]
})
}
}
}
</script>
