AIxiaocaishen/src/views/components/emotionDecod.vue

<template>
  <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
  <div class="qxjmqbox">
    <div ref="KlineCanvs" class="qxjmqEcharts"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, toRef } from "vue";
import * as echarts from "echarts";
import { color } from "echarts/lib/export";

defineExpose({ initQXNLZHEcharts });

const KlineCanvs = ref(null);
let KlineCanvsChart = null;
const heatmapData = ref([]); // 存储热力图数据

// 假数据
const rawData2 = ref([]);
const lineData3 = ref([]);
function initQXNLZHEcharts(kline, qxnlzhqData) {
  // qxnlzhqData[9][9] = 1;
  // qxnlzhqData[2][9] = 1;
  rawData2.value = qxnlzhqData;
  // 处理热力图数据
  const processedHeatmap = [];
  rawData2.value.forEach((item, dateIndex) => {
    const [date, d1, d2, d3, d4, d5, d6, d7, d8, d9] = item;
    processedHeatmap.push([
      dateIndex,
      0,
      d4,
      d8 == 1 ? "green" : "transparent",
    ]); // 数据1
    processedHeatmap.push([
      dateIndex,
      1,
      d3,
      d7 == 1 ? "purple" : "transparent",
    ]); // 数据2
    processedHeatmap.push([dateIndex, 2, d2, d6 == 1 ? "red" : "transparent"]); // 数据3
    processedHeatmap.push([
      dateIndex,
      3,
      d1,
      d5 == 1 ? "yellow" : "transparent",
    ]); // 数据4
  });
  heatmapData.value = processedHeatmap;
  // 处理折线图数据
  lineData3.value = rawData2.value.map((item) => item[9]);
  console.log("热力图数据:", heatmapData.value);
  console.log("折线图数据:", lineData3.value);
  const data = kline;
  // 切割数据方法
  const spliteDate = (a) => {
    const categoryData = [];
    let value = [];
    for (let i = 0; i < a.length; i++) {
      // 使用非破坏性的方法，避免修改原数组
      categoryData.push(a[i][0]);
      value.push(a[i].slice(1)); // 使用 slice 而不是 splice
    }
    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 = {
    tooltip: {
      trigger: 'axis', // 触发类型 坐标轴触发
      confine: true, // 限制tooltip不超出容器
      axisPointer: {
        type: 'cross', // 十字准星效果
        lineStyle: {
          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(232, 232, 242, 0.87)',
      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]
        const close = klineParam.data[2]
        const low = klineParam.data[3]
        const high = klineParam.data[4]
        return `<span style="color:black;font-weight:bold;">日期: ${date}</span><br/><span style="color:black;">开盘价: ${open}</span><br/><span style="color:black;">收盘价: ${close}</span><br/><span style="color:black;">最低价: ${low}</span><br/><span style="color:black;">最高价: ${high}</span>`

      }
    },

    //控制坐标轴
    grid: [
      {
        top: "5%",
        height: window.innerWidth <= 768 ? "35%" : "40%",
        width: window.innerWidth <= 768 ? "70%" : "80%",
        left: window.outerWidth <= 768 ? "20%" : "10%",
      },
      {
        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%",
        height: "2%",
        width: window.innerWidth <= 768 ? "70%" : "80%",
        left: window.outerWidth <= 768 ? "20%" : "10%",
      },
    ],

    visualMap: [
      {
        show: false, // 不显示控制条
        seriesIndex: 1, // 作用于热力图的系列
        min: 0,
        max: 2000, // 根据您的数据范围调整
        calculable: true,
        orient: "horizontal",
        left: "center",
        bottom: "15%",
        inRange: {
          color: ["transparent"],
        },
      },
    ],
    // 横坐标内容
    xAxis: [
      {
        type: "category",
        gridIndex: 0,
        data: dealData.categoryData,
        axisPointer: {
          show: true,
          type: "line",
          label: {
            show: true,
            backgroundColor: 'rgba(0,191,255)',
            color: 'black'
          },
        },
        axisTick: { show: false }, // 隐藏刻度线
        axisLabel: { show: false, rotate: 45 }, // 隐藏刻度标签
        axisLine: {
          show: true,
          lineStyle: {
            color: "white",
          },
        },
      },
      {
        type: "category",
        gridIndex: 1,
        data: dealData.categoryData,
        axisTick: { show: false }, // 隐藏刻度线
        axisLabel: { show: false, rotate: 45 }, // 隐藏刻度标签
        splitLine: {
          show: true,
          lineStyle: {
            color: "white",
            // 间隔线类型实线
            type: "solid",
          },
          interval: 0,
        },
      },
      {
        type: "category",
        gridIndex: 2,
        data: dealData.categoryData,
        axisLine: { lineStyle: { color: "white" } },
        axisPointer: {
          show: false,
          label: {
            show: false,
          },
          type: "line",
        },
        axisTick: {
          show: true,
          alignWithLabel: true, // 刻度线与标签对齐
          lineStyle: {
            color: "white", // 与十字线颜色保持一致
            width: 1,
            type: "dashed" // 与十字线样式保持一致
          }
        },
      },
    ],
    yAxis: [
      {
        scale: true,
        axisLabel: {
          formatter: function (value) {
            return value;
          },
        },
        axisLine: {
          show: true,
          lineStyle: { color: "white" },
        },
        splitLine: {
          show: false,
        },
        axisPointer: {
          show: true,
          label: {
            show: true,
            backgroundColor: 'rgba(0,255,127)',
            color: 'black'
          },
          type: "line",
        },
      },
      {
        gridIndex: 1,
        type: "category",
        data: [0, 1, 2, 3], // 倒序显示
        axisLine: { lineStyle: { color: "white" } },
        axisLabel: {
          show: false, // 显示刻度标签
          color: "#fff", // 白色文字
          backgroundColor: "transparent",
          fontSize: 12,
          margin: 8,
        },
        axisPointer: {
          show: true,
          label: {
            show: false,
          },
          type: "line",
        },
        axisTick: { show: false }, // 隐藏刻度线
        splitLine: {
          show: true,
          lineStyle: {
            color: "#8392A5",
            width: 1,
            type: "solid",
          },

          interval: 0, // 强制显示间隔
        },
      },
      {
        gridIndex: 2,
        type: "value",
        axisLine: {
          show: true,
          lineStyle: { color: "white" },
        },
        splitLine: {
          show: !1,
        },
        axisTick: { show: false }, // 隐藏刻度线
        axisLabel: { show: false }, // 隐藏刻度标签
        axisPointer: {
          show: false,
          label: {
            show: false,
          },
          type: "line",
        },
      },
    ],
    // 下拉条
    dataZoom: [
      {
        textStyle: {
          color: "white", // 字体颜色
        },
        // handleIcon:
        //   "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
        // handleSize: "80%",
        dataBackground: {
          areaStyle: {
            color: "#8392A5",
          },
          lineStyle: {
            opacity: 0.8,
            color: "#8392A5",
          },
        },
        xAxisIndex: [0, 1, 2],
        // handleStyle: {
        //   color: "#fff",
        //   shadowBlur: 3,
        //   shadowColor: "rgba(0, 0, 0, 0.6)",
        //   shadowOffsetX: 2,
        //   shadowOffsetY: 2,
        // },
        start: 50, // 默认展示后半部分数据
        end: 100,
        bottom: window.innerWidth <= 768 ? "5%" : "7%", // 下移数据缩放滑块
      },
      // {
      //   show: true,
      //   type: "slider",
      //   xAxisIndex: [0, 1, 2],
      //   bottom: "0%",
      //   textStyle: {
      //     color: "white",
      //   },
      // },
      {
        type: "inside",
        xAxisIndex: [0, 1, 2],
        filterMode: "filter",
      },
    ],
    series: [
      {
        type: "candlestick",
        name: "\u65e5K",
        // 数据
        data: dealData.value,
        itemStyle: {
          normal: {
            color0: "red", // 阴线颜色
            color: "#0CF49B", // 阳线颜色
            borderColor0: "#FD1050", // 阴线边框颜色
            borderColor: "#0CF49B", // 阳线边框颜色
          },
        },
      },
      // 副图热力矩阵
      {
        name: "热力矩阵",
        type: "heatmap",
        gridIndex: 1,
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: normalHeatmap,
        coordinateSystem: "cartesian2d",
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: 'cross', // 十字准星效果
            crossStyle: {
              color: '#999'
            }
          },
          // 覆盖全局 tooltip 配置
          formatter: function (params) {
            return `${params.value[2]}`; // 直接取数据中的第3个元素（数值）
          }
        },
        label: {
          normal: {
            show: true,
            color: "#fff", // 文本颜色
            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: "#FFFF00", fontWeight: "bold" },
              normal: { color: "#fff" },
            },
          },
        },
        itemStyle: {
          normal: {
            color: "transparent",
            borderWidth: 2,
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      {
			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,
        yAxisIndex: 2,
        data: lineData3.value,
        color: "black",
        lineStyle: {
          normal: {
            color: "red",
          },
        },

        symbol: "none",
        emphasis: {
          showSymbol: true,
        },
      },
    ],
  };

  // 添加DOM元素检查
  if (!KlineCanvs.value) {
    console.error('DOM元素未准备好，无法初始化ECharts');
    return;
  }

  // 创造echarts图
  if (KlineCanvsChart) {
    KlineCanvsChart.dispose();
  }
  KlineCanvsChart = echarts.init(KlineCanvs.value);
  KlineCanvsChart.setOption(KlineOption);

  // 添加图表交互事件监听器
  if (KlineCanvsChart) {
    // 监听数据缩放事件
    KlineCanvsChart.on('dataZoom', () => {
      if (window.handleChartInteractionStart) {
        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) {
        window.handleChartInteractionStart();
      }
    });
  }

  // 防抖函数，避免频繁触发resize
  const debounce = (func, wait) => {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  };

  // 监听窗口大小变化，参考股市温度计的实现
  const resizeHandler = debounce(() => {
    if (KlineCanvsChart && !KlineCanvsChart.isDisposed()) {
      try {
        KlineCanvsChart.resize();
        console.log('情绪解码器图表已重新调整大小');
      } catch (error) {
        console.error('情绪解码器图表resize失败:', error);
      }
    }
  }, 100); // 100ms防抖延迟

  // 移除之前的监听器（如果存在）
  if (window.emotionDecodResizeHandler) {
    window.removeEventListener('resize', window.emotionDecodResizeHandler);
  }

  // 添加新的监听器
  window.addEventListener('resize', resizeHandler);

  // 存储resize处理器以便后续清理
  window.emotionDecodResizeHandler = resizeHandler;

  // 添加容器大小监听器
  if (KlineCanvs.value && window.ResizeObserver) {
    const containerObserver = new ResizeObserver(debounce(() => {
      if (KlineCanvsChart && !KlineCanvsChart.isDisposed()) {
        try {
          KlineCanvsChart.resize();
          console.log('情绪解码器容器大小变化，图表已调整');
        } catch (error) {
          console.error('情绪解码器容器resize失败:', error);
        }
      }
    }, 100));

    containerObserver.observe(KlineCanvs.value);
    window.emotionDecodContainerObserver = containerObserver;
  }
}
const windowHeight = ref(window.innerHeight);
const updateHeight = () => {
  windowHeight.value = window.innerHeight; // 更新响应式变量
};

// 组件挂载时添加窗口高度监听
onMounted(() => {
  // 避免重复添加监听器
  if (!window.emotionDecodHeightHandler) {
    window.addEventListener("resize", updateHeight);
    window.emotionDecodHeightHandler = updateHeight;
  }
});
onBeforeUnmount(() => {
  // 组件卸载时销毁图表
  if (KlineCanvsChart) {
    KlineCanvsChart.dispose();
    KlineCanvsChart = null;
  }

  // 移除窗口resize监听器
  if (window.emotionDecodResizeHandler) {
    window.removeEventListener('resize', window.emotionDecodResizeHandler);
    window.emotionDecodResizeHandler = null;
  }

  // 移除窗口高度监听器
  if (window.emotionDecodHeightHandler) {
    window.removeEventListener('resize', window.emotionDecodHeightHandler);
    window.emotionDecodHeightHandler = null;
  }

  // 清理容器观察器
  if (window.emotionDecodContainerObserver) {
    window.emotionDecodContainerObserver.disconnect();
    window.emotionDecodContainerObserver = null;
  }
});
</script>
<style scoped>
.qxjmqbox {
  height: auto;
  width: 100%;
  margin: 0 auto;
}

.qxjmqEcharts {
  width: 100%;
  height: 542px;
  margin: 0;
  /* top: 5rem; */
  box-sizing: border-box;
  overflow: hidden;
}

/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
  .qxjmqEcharts {
    width: 100%;
    height: 270px;
    margin: 0;
    /* top: 5rem; */
  }

  .qxjmqbox {
    height: auto;
    width: 90%;
  }

}
</style>