|
|
@ -64,6 +64,16 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
|
} |
|
|
|
return { categoryData, value }; |
|
|
|
}; |
|
|
|
|
|
|
|
let normalHeatmap = [] |
|
|
|
let rotateHeatmap = [] |
|
|
|
processedHeatmap.forEach((item) => { |
|
|
|
if (item[2] > 999) { |
|
|
|
rotateHeatmap.push(item) |
|
|
|
} else { |
|
|
|
normalHeatmap.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
const dealData = spliteDate(data); |
|
|
|
// 给配置项 |
|
|
|
const KlineOption = { |
|
|
@ -73,29 +83,29 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
|
axisPointer: { |
|
|
|
type: 'cross', // 十字准星效果 |
|
|
|
lineStyle: { |
|
|
|
color: 'grey', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
color: 'grey', |
|
|
|
width: 1, |
|
|
|
type: 'dashed' |
|
|
|
}, |
|
|
|
crossStyle: { |
|
|
|
color: '#999' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
|
color: '#fff', |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1 |
|
|
|
} |
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.8)', |
|
|
|
color: '#fff', |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
backgroundColor: 'rgba(232, 232, 242, 0.87)', |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1, |
|
|
|
borderRadius: 8, |
|
|
|
padding: 10, |
|
|
|
textStyle: { |
|
|
|
color: 'black', |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
borderColor: '#fff', |
|
|
|
borderWidth: 1, |
|
|
|
borderRadius: 8, |
|
|
|
padding: 10, |
|
|
|
textStyle: { |
|
|
|
color: 'black', |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
if (!params || params.length === 0) return '' |
|
|
|
|
|
|
@ -123,13 +133,13 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
|
left: window.outerWidth <= 768 ? "20%" : "10%", |
|
|
|
}, |
|
|
|
{ |
|
|
|
top: window.innerWidth <= 768 ? "40%" :"45%", |
|
|
|
top: window.innerWidth <= 768 ? "40%" : "45%", |
|
|
|
height: "35%", |
|
|
|
width: window.innerWidth <= 768 ? "70%" : "80%", |
|
|
|
left: window.outerWidth <= 768 ? "20%" : "10%", |
|
|
|
}, |
|
|
|
{ |
|
|
|
top: window.innerWidth <= 768 ? "75%" : "80%", |
|
|
|
top: window.innerWidth <= 768 ? "75%" : "80%", |
|
|
|
height: "2%", |
|
|
|
width: window.innerWidth <= 768 ? "70%" : "80%", |
|
|
|
left: window.outerWidth <= 768 ? "20%" : "10%", |
|
|
@ -358,7 +368,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
|
gridIndex: 1, |
|
|
|
xAxisIndex: 1, |
|
|
|
yAxisIndex: 1, |
|
|
|
data: processedHeatmap, |
|
|
|
data: normalHeatmap, |
|
|
|
coordinateSystem: "cartesian2d", |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
@ -406,6 +416,55 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '热力矩阵', |
|
|
|
type: 'heatmap', |
|
|
|
gridIndex: 1, |
|
|
|
xAxisIndex: 1, |
|
|
|
yAxisIndex: 1, |
|
|
|
data: rotateHeatmap, |
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
// 覆盖全局 tooltip 配置 |
|
|
|
formatter: function (params) { |
|
|
|
console.log('params', params) |
|
|
|
return `${params.value[2]}` // 直接取数据中的第3个元素(数值) |
|
|
|
} |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
rotate: -60, |
|
|
|
show: true, |
|
|
|
color: 'white', // 文本颜色 |
|
|
|
formatter: function (params) { |
|
|
|
const value = params.value[2] // 数值 |
|
|
|
const colorType = params.value[3] // 颜色类型 |
|
|
|
// 使用 rich 富文本格式 |
|
|
|
return `{${colorType}|${value}}` |
|
|
|
}, |
|
|
|
rich: { |
|
|
|
green: { color: '#27ae60', fontWeight: 'bold' }, |
|
|
|
purple: { color: '#8e44ad', fontWeight: 'bold' }, |
|
|
|
red: { color: '#FF0000', fontWeight: 'bold' }, |
|
|
|
yellow: { color: '#FEB736FF', fontWeight: 'bold' }, |
|
|
|
normal: { color: 'grey' } |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'transparent', |
|
|
|
borderWidth: 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
itemStyle: { |
|
|
|
shadowBlur: 10, |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "凸起", |
|
|
|
type: "line", |
|
|
|
xAxisIndex: 2, |
|
|
|