diff --git a/pages/markets/kLine.vue b/pages/markets/kLine.vue index c4df73d..191396b 100644 --- a/pages/markets/kLine.vue +++ b/pages/markets/kLine.vue @@ -98,7 +98,7 @@ export default { }, onLoad() { this.kdata = this.splitData(ktest.JSON); - console.log(this.kdata, 1111) + // console.log(this.kdata, 1111) }, onShow() { }, methods: { @@ -144,6 +144,7 @@ export default { let kline export default { mounted() { + console.log('1111',this.kdata); if (typeof window.echarts === 'function') { //this.initEcharts() } else { @@ -184,8 +185,8 @@ export default { return result; }, upData(myChart){ - const upColor = '#00da3c'; - const downColor = '#ec0000'; + const upColor = '#00C873'; + const downColor = '#FF3750'; var chartDom = document.getElementById('kline'); var myChart = echarts.init(chartDom); var option; @@ -259,15 +260,16 @@ export default { } ] }, - grid: [ + grid: [ { left: '10%', - right: '8%', - height: '50%' + right: '0%', + height: '50%', + backgroundColor:'transparent', }, { left: '10%', - right: '8%', + right: '0%', top: '63%', height: '16%' } @@ -277,7 +279,8 @@ export default { type: 'category', data: this.kdata.categoryData, boundaryGap: false, - axisLine: { onZero: false }, + axisLine: {show: false, onZero: false }, + axisTick: { show: false }, splitLine: { show: false }, min: 'dataMin', max: 'dataMax', @@ -301,9 +304,20 @@ export default { yAxis: [ { scale: true, + axisLine: { show: false }, + axisTick: { show: false }, splitArea: { - show: true - } + show: false, + // areaStyle: { + // color: 'transparency', + // }, + }, + splitLine: { show: true, + lineStyle: { + // 使用深浅的间隔色 + color: ['#211F32'] + } + } }, { scale: true, @@ -355,6 +369,17 @@ export default { } } }, + { + name: 'Volume', + type: 'bar', + xAxisIndex: 1, + yAxisIndex: 1, + data: this.kdata.volumes, + itemStyle: { + color: upColor, + borderColor: undefined, + }, + } ] }), @@ -438,6 +463,13 @@ export default { } } + .kline { + margin-top: 20rpx; + padding-left: 32rpx; + padding-right: 28rpx; + background: #000000; + } + .MarketTrades { .headTitle { padding-left: 32rpx;