|
|
@ -191,33 +191,126 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
chartInstance = echarts.init(KlineCanvs.value) |
|
|
|
chartInstance.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', |
|
|
|
crossStyle: { |
|
|
|
color: '#999', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
color: '#999', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
} |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
if (params.seriesType === 'candlestick') { |
|
|
|
const date = params.name |
|
|
|
// 开收低高分别取参数的第2到第5个数 |
|
|
|
const open = params.data[1] |
|
|
|
const close = params.data[2] |
|
|
|
const low = params.data[3] |
|
|
|
const high = params.data[4] |
|
|
|
return `日期: ${date}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}` |
|
|
|
if (params && params.length > 0) { |
|
|
|
let result = `日期: ${params[0].name}<br/>` |
|
|
|
params.forEach(param => { |
|
|
|
if (param.seriesType === 'candlestick') { |
|
|
|
const open = param.data[1] |
|
|
|
const close = param.data[2] |
|
|
|
const low = param.data[3] |
|
|
|
const high = param.data[4] |
|
|
|
result += `${param.seriesName}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}<br/>` |
|
|
|
} else if (param.seriesType === 'line') { |
|
|
|
result += `${param.seriesName}: ${param.value}<br/>` |
|
|
|
} |
|
|
|
}) |
|
|
|
return result |
|
|
|
} |
|
|
|
return params.value[2] |
|
|
|
return '' |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white' } }, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: dateLabels, |
|
|
|
axisLine: { lineStyle: { color: 'white' } } |
|
|
|
axisLine: { lineStyle: { color: '#00BFFF' } }, |
|
|
|
axisLabel: { |
|
|
|
color: '#FFFFFF', |
|
|
|
fontSize: 12, |
|
|
|
fontWeight: 'bold' |
|
|
|
}, |
|
|
|
|
|
|
|
axisTick: { lineStyle: { color: '#00BFFF' } }, |
|
|
|
axisPointer: { |
|
|
|
show: true, |
|
|
|
type: 'line', |
|
|
|
lineStyle: { |
|
|
|
color: '#999', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
color: 'black' |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
yAxis: [{ |
|
|
|
axisLine: { lineStyle: { color: 'white' } } |
|
|
|
axisLine: { lineStyle: { color: '#00FF7F' } }, |
|
|
|
axisLabel: { |
|
|
|
color: '#FFFFFF', |
|
|
|
fontSize: 12, |
|
|
|
fontWeight: 'bold' |
|
|
|
}, |
|
|
|
axisTick: { lineStyle: { color: '#00FF7F' } }, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#333333', |
|
|
|
type: 'solid', |
|
|
|
opacity: 0.3 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisPointer: { |
|
|
|
show: true, |
|
|
|
type: 'line', |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
color: 'black' |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
color: '#999', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
} |
|
|
|
} |
|
|
|
}, { |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
position: 'right', |
|
|
|
axisLabel: { color: '#FFA500' }, |
|
|
|
axisLine: { lineStyle: { color: 'purple', width: 2 } } |
|
|
|
axisLabel: { |
|
|
|
color: '#FFFF00', |
|
|
|
fontSize: 12, |
|
|
|
fontWeight: 'bold' |
|
|
|
}, |
|
|
|
axisLine: { lineStyle: { color: '#FF1493', width: 2 } }, |
|
|
|
axisTick: { lineStyle: { color: '#FF1493' } }, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#444444', |
|
|
|
type: 'solid', |
|
|
|
opacity: 0.3 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisPointer: { |
|
|
|
show: true, |
|
|
|
type: 'line', |
|
|
|
lineStyle: { |
|
|
|
color: '#999', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
color: 'black' |
|
|
|
}, |
|
|
|
} |
|
|
|
}], |
|
|
|
color: ['#f00', 'white'], |
|
|
|
series: [ |
|
|
|