深度图

　　

<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>