diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue index 2c35a2e..35ea087 100644 --- a/src/views/components/emotionDecod.vue +++ b/src/views/components/emotionDecod.vue @@ -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,36 +83,36 @@ 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 '' - + // 找到K线数据 const klineParam = params.find(param => param.seriesType === 'candlestick') if (!klineParam) return '' - + const date = klineParam.name // 开收低高分别取参数的第2到第5个数 const open = klineParam.data[1] @@ -122,14 +132,14 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { width: window.innerWidth <= 768 ? "70%" : "80%", 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, @@ -431,14 +490,14 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { console.error('DOM元素未准备好,无法初始化ECharts'); return; } - + // 创造echarts图 if (KlineCanvsChart) { KlineCanvsChart.dispose(); } KlineCanvsChart = echarts.init(KlineCanvs.value); KlineCanvsChart.setOption(KlineOption); - + // 添加图表交互事件监听器 if (KlineCanvsChart) { // 监听数据缩放事件 @@ -447,28 +506,28 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { window.handleChartInteractionStart(); } }); - + // 监听鼠标滚轮事件(缩放) KlineCanvsChart.on('mousewheel', () => { if (window.handleChartInteractionStart) { window.handleChartInteractionStart(); } }); - + // 监听鼠标按下事件(拖拽开始) KlineCanvsChart.on('mousedown', () => { if (window.handleChartInteractionStart) { window.handleChartInteractionStart(); } }); - + // 监听鼠标释放事件(拖拽结束) KlineCanvsChart.on('mouseup', () => { if (window.handleChartInteractionEnd) { window.handleChartInteractionEnd(); } }); - + // 监听图表点击事件 KlineCanvsChart.on('click', () => { if (window.handleChartInteractionStart) {