{{ symbol.pair }}
<<<<<<< HEAD
=======
if (this.channel != newValue.webSocketChannel) {
this.is = false
}
this.channel = newValue.webSocketChannel
const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = './static/echarts.js';
script.onload = this.upData.bind(this);
document.head.appendChild(script);
},
calculateMA(dayCount, data) {
var result = [];
if(data.values){
for (var i = 0, len = data.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data.values[i - j][1];
}
result.push(+(sum / dayCount).toFixed(3));
}
}
return result;
},
upData(myChart) {
const upColor = '#00C873';
const downColor = '#FF3750';
var chartDom = document.getElementById('kline');
if (!this.is) {
// console.log("this.is11111111", this.is)
this.myChart = echarts.init(chartDom);
if(this.kdata.categoryData){
if (this.kdata.categoryData.length < 100) {
this.start = 50
this.end = 100
} else if (this.kdata.categoryData.length < 200) {
this.start = 85
this.end = 100
} else {
this.start = 98
this.end = 100
}
}
} else {
// console.log(this.myChart.getModel().option.dataZoom[0].start)
this.start = this.myChart.getModel().option.dataZoom[0].start
this.end = this.myChart.getModel().option.dataZoom[0].end
}
this.is = true;
var option;
this.myChart.setOption(
(option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
width: 1,
opacity: 3
}
}
},
xAxis: [{
type: 'category',
data: this.kdata.categoryData,
boundaryGap: false,
axisLine: {
show: false,
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
min: 'dataMin',
max: 'dataMax',
axisPointer: {
z: 100
}
},
{
type: 'category',
gridIndex: 1,
data: this.kdata.categoryData,
boundaryGap: false,
axisLine: {
onZero: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min: 'dataMin',
max: 'dataMax'
}
],
yAxis: [{
position: 'right',
scale: true,
axisLine: {
show: false
},
axisTick: {
show: true
},
splitArea: {
show: false, // areaStyle: {
// color: 'transparency',
// },
},
splitLine: {
show: true,
lineStyle: {
// 使用深浅的间隔色
color: ['#211F32']
}
}
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}
],
visualMap: {
show: false,
seriesIndex: 5,
dimension: 2,
pieces: [{
value: 1,
color: downColor
},
{
value: -1,
color: upColor
}
]
},
grid: [{
top: '8%',
left: '10rpx',
right: '50rpx',
height: '60%',
backgroundColor: 'transparent',
},
{
left: '10rpx',
right: '50rpx',
top: '80%',
height: '16%'
}
],
dataZoom: [{
type: 'inside',
start: this.start,
end: this.end
},
{
show: false,
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: this.start,
end: this.end
}
],
series: [{
type: 'candlestick',
data: this.kdata.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: undefined,
borderColor0: undefined
},
markLine: {
symbol: ['none', 'none'],
data: [
{
name: 'max line on close',
type: 'max',
valueDim: 'highest'
}
]
},
tooltip: {
formatter: function(param) {
param = param[0];
return [
'Date: ' + param.name +
'
',
'Open: ' + param.data[0] + '
',
'Close: ' + param.data[1] + '
',
'Lowest: ' + param.data[2] + '
',
'Highest: ' + param.data[3] + '
'
].join('');
}
}
},
{
name: 'MA5',
type: 'line',
showSymbol: false,
data: this.calculateMA(5, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
showSymbol: false,
data: this.calculateMA(10, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
showSymbol: false,
data: this.calculateMA(20, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA30',
type: 'line',
showSymbol: false,
data: this.calculateMA(30, this.kdata),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Volume',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: this.kdata.volumes,
itemStyle: {
color: upColor,
borderColor: undefined,
},
}
]
}),
true
);
}
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
columData: function(newQuestion, oldQuestion) {
// this.updateEcharts(this.option)
}
},
}
>>>>>>> 1e578ec94e2ad85c6c797e5669f396b7f88e1b91