|
|
|
@ -18,7 +18,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { |
|
|
|
bottomRadarChart = echarts.init(bottomRadarChartDom) |
|
|
|
|
|
|
|
// 日期-作为x轴 |
|
|
|
let dateArray = KlineData.map(subArray => subArray[0]) |
|
|
|
let dateArray = barAndLineData.map(subArray => subArray[0]) |
|
|
|
// k线，取前四个即可 |
|
|
|
let kLineDataArray = KlineData.map(subArray => subArray.slice(1, 5)) |
|
|
|
// 红线，取第二个值 |
|
|
|
@ -103,33 +103,84 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { |
|
|
|
let option = { |
|
|
|
// backgroundColor: '#000046', // 设置整个图表的背景色 |
|
|
|
tooltip: { |
|
|
|
show: false, // 不展示tip |
|
|
|
// 当前echart版本十字准星独立渲染了; 4.x+才有showAxisPointer |
|
|
|
show: true, // 启用tooltip显示 |
|
|
|
trigger: 'axis', |
|
|
|
triggerOn: 'mousemove', |
|
|
|
confine: true, |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', |
|
|
|
crossStyle: { |
|
|
|
color: '#999' |
|
|
|
color: '#fff', |
|
|
|
width: 1, |
|
|
|
type: 'solid' |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff', |
|
|
|
width: 1, |
|
|
|
type: 'solid' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
|
color: '#fff', |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
backgroundColor: 'rgba(255, 255, 255, 0.8)', |
|
|
|
borderColor: '#ccc', |
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1, |
|
|
|
padding: 10, |
|
|
|
textStyle: { |
|
|
|
color: '#333' |
|
|
|
color: '#fff', |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
let result = `<div style="font-weight: bold;">${params[0].name}</div>` |
|
|
|
if (!params || params.length === 0) return '' |
|
|
|
|
|
|
|
// 检查是否有第二个或第三个网格的数据，如果有则不显示tooltip |
|
|
|
let hasSecondOrThirdGrid = params.some(param => { |
|
|
|
return (param.seriesName === '红线' && param.axisIndex === 1) || |
|
|
|
(param.axisIndex === 2) || |
|
|
|
(param.seriesName !== 'K线' && param.seriesName !== '基础base') |
|
|
|
}) |
|
|
|
|
|
|
|
// 如果鼠标悬浮在第二个或第三个网格上，不显示tooltip |
|
|
|
if (hasSecondOrThirdGrid && !params.some(param => param.seriesType === 'candlestick')) { |
|
|
|
return '' |
|
|
|
} |
|
|
|
|
|
|
|
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>` |
|
|
|
|
|
|
|
params.forEach(param => { |
|
|
|
let value = param.value |
|
|
|
let color = param.color |
|
|
|
|
|
|
|
if (param.seriesType === 'candlestick') { |
|
|
|
result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: 开 ${value[0]}, 收 ${value[1]}, 低 ${value[2]}, 高 ${value[3]}</div>` |
|
|
|
} else { |
|
|
|
result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>` |
|
|
|
// ECharts candlestick的value格式：[开盘, 收盘, 最低, 最高] |
|
|
|
// 但param.value可能包含额外信息，需要从原始数据中获取 |
|
|
|
let dataIndex = param.dataIndex |
|
|
|
let candlestickData = kLineDataArray[dataIndex] |
|
|
|
|
|
|
|
let openPrice = candlestickData[0] // 开盘价 |
|
|
|
let closePrice = candlestickData[1] // 收盘价 |
|
|
|
let lowPrice = candlestickData[2] // 最低价 |
|
|
|
let highPrice = candlestickData[3] // 最高价 |
|
|
|
let priceChange = closePrice - openPrice |
|
|
|
let changePercent = ((priceChange / openPrice) * 100).toFixed(2) |
|
|
|
let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨绿色，下跌红色 |
|
|
|
|
|
|
|
result += `<div style="margin-bottom: 6px;">` |
|
|
|
result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>` |
|
|
|
result += `<div style="color: #fff;">开盘: ${openPrice.toFixed(2)}</div>` |
|
|
|
result += `<div style="color: #fff;">收盘: ${closePrice.toFixed(2)}</div>` |
|
|
|
result += `<div style="color: #fff;">最低: ${lowPrice.toFixed(2)}</div>` |
|
|
|
result += `<div style="color: #fff;">最高: ${highPrice.toFixed(2)}</div>` |
|
|
|
result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>` |
|
|
|
result += `</div>` |
|
|
|
} else if (param.seriesName === '红线') { |
|
|
|
result += `<div style="color: #ef232a; margin-bottom: 4px;">${param.seriesName}: ${value}</div>` |
|
|
|
} else if (param.seriesName !== '基础base' && value > 0) { |
|
|
|
result += `<div style="color: ${color}; margin-bottom: 4px;">${param.seriesName}: ${value}</div>` |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
@ -372,37 +423,38 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
xAxisIndex: [0, 2], |
|
|
|
// start: 80, |
|
|
|
// end: 100, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
xAxisIndex: [0, 2], |
|
|
|
// start: 80, |
|
|
|
// end: 100, |
|
|
|
show: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'slider', |
|
|
|
xAxisIndex: [0, 2], |
|
|
|
// 一次性全部 or 后20% |
|
|
|
// start: 80, |
|
|
|
// end: 100, |
|
|
|
show: false, // 先不显示 |
|
|
|
xAxisIndex: [0, 1, 2], |
|
|
|
start: 70, |
|
|
|
end: 100, |
|
|
|
show: true, |
|
|
|
bottom: 10, |
|
|
|
height: 20, |
|
|
|
borderColor: '#CFD6E3', |
|
|
|
fillerColor: 'rgba(135, 175, 274, 0.2)', |
|
|
|
handleStyle: { |
|
|
|
color: '#CFD6E3' |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' |
|
|
|
}, |
|
|
|
dataBackground: { |
|
|
|
// 线 |
|
|
|
lineStyle: { |
|
|
|
color: '#CFD6E3' |
|
|
|
}, |
|
|
|
// 阴影 |
|
|
|
areaStyle: { |
|
|
|
color: 'rgba(241,243,247,0.5)' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
xAxisIndex: [0, 1, 2], |
|
|
|
start: 70, |
|
|
|
end: 100, |
|
|
|
zoomOnMouseWheel: true, |
|
|
|
moveOnMouseMove: true, |
|
|
|
moveOnMouseWheel: false |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
@ -412,18 +464,18 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { |
|
|
|
xAxisIndex: 0, |
|
|
|
yAxisIndex: 0, |
|
|
|
itemStyle: { |
|
|
|
color: '#ef232a', // 上涨颜色 (红) |
|
|
|
color0: '#14b143', // 下跌颜色 (绿) |
|
|
|
borderColor: '#ef232a', |
|
|
|
borderColor0: '#14b143', |
|
|
|
color: '#14b143', // 上涨颜色 (绿) |
|
|
|
color0: '#ef232a', // 下跌颜色 (红) |
|
|
|
borderColor: '#14b143', |
|
|
|
borderColor0: '#ef232a', |
|
|
|
normal: { |
|
|
|
color: '#ef232a', // 上涨颜色 (红) |
|
|
|
color0: '#14b143', // 下跌颜色 (绿) |
|
|
|
borderColor: '#ef232a', |
|
|
|
borderColor0: '#14b143', |
|
|
|
color: '#14b143', // 上涨颜色 (绿) |
|
|
|
color0: '#ef232a', // 下跌颜色 (红) |
|
|
|
borderColor: '#14b143', |
|
|
|
borderColor0: '#ef232a', |
|
|
|
opacity: function (params) { |
|
|
|
// 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明 |
|
|
|
return params.data[2] > params.data[1] ? 0 : 1 |
|
|
|
// K线数据格式：[开,收,低,高] 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明 |
|
|
|
return params.data[1] > params.data[0] ? 0 : 1 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -472,7 +524,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) { |
|
|
|
data: transparentFillingDataArray, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '黄色块', |
|
|
|
name: '黄色', |
|
|
|
type: 'bar', |
|
|
|
stack: 'total', |
|
|
|
// barGap: '-100%', // 重叠 |
|
|
|
|
宋杰
1 week ago