AIxiaocaishen/src/views/components/emotionDecod.vue

<template>
  <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
  <div class="qxjmqbox">
    <div ref="KlineCanvs" id="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].splice(0, 1)[0]);
      value.push(a[i]);
    }
    return { categoryData, value };
  };
  const dealData = spliteDate(data);
  // 给配置项
  const KlineOption = {
    tooltip: {
      trigger: 'item', // 触发类型 坐标轴触发
      axisPointer: {
        type: 'cross', // 十字准星效果
        crossStyle: {
          color: '#999'
        }
      },
      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}`
        }
        return params.value[2]
      }
    },

    //控制坐标轴
    grid: [
      { top: "5%", height: "40%" },
      { top: "45%", height: "35%" },
      { top: "80%", height: "2%" },
    ],

    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: "shadow",
        },
        axisTick: { show: false }, // 隐藏刻度线
        axisLabel: { show: false, rotate: 45 }, // 隐藏刻度标签
        axisLine: {
          show: true,
          lineStyle: {
            color: "grey",
          },
        },
      },
      {
        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: "#8392A5" } },
      },
    ],
    yAxis: [
      {
        scale: true,
        axisLabel: {
          formatter: function (value) {
            return value;
          },
        },
        axisLine: {
          show: true,
          lineStyle: { color: "#8392A5" },
        },
        splitLine: {
          show: false,
        },
        axisPointer: {
          show: true,
          label: {
            show: true,
          },
          type: "line",
        },
      },
      {
        gridIndex: 1,
        type: "category",
        data: [0, 1, 2, 3], // 倒序显示
        axisLine: { lineStyle: { color: "#8392A5" } },
        axisLabel: {
          show: false, // 显示刻度标签
          color: "#fff", // 白色文字
          backgroundColor: "transparent",
          fontSize: 12,
          margin: 8,
        },
        axisTick: { show: false }, // 隐藏刻度线
        splitLine: {
          show: true,
          lineStyle: {
            color: "#8392A5",
            width: 1,
            type: "solid",
          },

          interval: 0, // 强制显示间隔
        },
      },
      {
        gridIndex: 2,
        type: "value",
        axisLine: {
          show: true,
          lineStyle: { color: "#8392A5" },
        },
        splitLine: {
          show: !1,
        },
        axisTick: { show: false }, // 隐藏刻度线
        axisLabel: { show: false }, // 隐藏刻度标签
      },
    ],
    // 下拉条
    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,
        },
        bottom: "5%", // 下移数据缩放滑块
      },
      {
        show: !1,
        type: "slider",
      },
      {
        type: "inside",
      },
    ],
    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: processedHeatmap,
        coordinateSystem: "cartesian2d",
        //         tooltip: {
        //     // 覆盖全局 tooltip 配置
        //     formatter: function (params) {
        //         const date = params.axisValue;
        //       return `${date}：${params.data[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: "line",
        xAxisIndex: 2,
        yAxisIndex: 2,
        data: lineData3.value,
        color: "black",
        lineStyle: {
          normal: {
            color: "red",
          },
        },

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

  // 创造echarts图
  KlineCanvsChart = echarts.init(KlineCanvs.value);
  KlineCanvsChart.setOption(KlineOption);
  // 窗口大小变化时重置图表大小
  window.addEventListener("resize", () => {
    KlineCanvsChart.resize();
  });
}
const windowHeight = ref(window.innerHeight);
const updateHeight = () => {
  windowHeight.value = window.innerHeight; // 更新响应式变量
};
onMounted(() => {
  window.addEventListener("resize", updateHeight); // 监听窗口变化
});
onBeforeUnmount(() => {
  // 组件卸载时销毁图表
  if (KlineCanvsChart) {
    KlineCanvsChart.dispose();

  }
});
</script>
<style scoped>
.qxjmqbox {
  height: auto;
  width: 100%;
}

#qxjmqEcharts {
  width: 100%;
  height: 500px;
  margin-left: 1rem;
  top: 5rem;
}

/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
  #qxjmqEcharts {
    width: 100%;
    height: 400px;
    margin-left: 1rem;
    top: 5rem;
  }
  .qxjmqbox {
  height: auto;
  width: 110%;
  margin-top: -5rem;
  margin-left: -1rem;
}

}
</style>