AIxiaocaishen/src/views/components/emotionDecod.vue

<template>
  <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
  <div class="qxjmqbox">
    <div ref="KlineCanvs" id="qxjmqEcharts" class="qxjmqbox"></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 = [];
//   const colorMap = {
//   'transparent': 0,
//   'blue': 1,
//   'pink': 2,
//   'red': 3,
//   'yellow': 4
// };
  rawData2.value.forEach((item, dateIndex) => {
    const [date, d1, d2, d3, d4, d5, d6, d7, d8, d9] = item;
    // processedHeatmap.push([dateIndex, 0, d4 , d8 == 1 ?'blue' :'transparent']); // 数据1
    // processedHeatmap.push([dateIndex, 1, d3 , d7 == 1 ?'pink' :'transparent']); // 数据2
    // processedHeatmap.push([dateIndex, 2, d2 , d6 == 1 ?'red' :'transparent']); // 数据3
    // processedHeatmap.push([dateIndex, 3, d1 , d5 == 1 ?'yellow' :'transparent']); // 数据4
//     processedHeatmap.push([dateIndex, 0, d4, colorMap[d8 == 1 ? 'blue' : 'transparent']]); // 数据1
//   processedHeatmap.push([dateIndex, 1, d3, colorMap[d7 == 1 ? 'pink' : 'transparent']]); // 数据2
//   processedHeatmap.push([dateIndex, 2, d2, colorMap[d6 == 1 ? 'red' : 'transparent']]); // 数据3
//   processedHeatmap.push([dateIndex, 3, d1, colorMap[d5 == 1 ? 'yellow' : 'transparent']]); // 数据4
// processedHeatmap.push([dateIndex, 0, d4, d8 === 1 ? -1 : 0]); // -1: blue
//   processedHeatmap.push([dateIndex, 1, d3, d7 === 1 ? -2 : 0]); // -2: pink
//   processedHeatmap.push([dateIndex, 2, d2, d6 === 1 ? -3 : 0]); // -3: red
//   processedHeatmap.push([dateIndex, 3, d1, d5 === 1 ? -4 : 0]); // -4: yellow
  });
  heatmapData.value = processedHeatmap; //[0, 1, 'orange']
  // 处理折线图数据
  lineData3.value = rawData2.value.map((item) => item[9]);
  // console.log('k图:', rawData2.value)
  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", // 触发类型 坐标轴触发
    },

    //控制坐标轴
    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"],
        },
        dimension: 3, // 指定使用第4个维度（索引从0开始）
    //     pieces: [
    //   { value: -1, borderColor: '#1E90FF' }, // blue
    //   { value: -2, borderColor: '#FF69B4' }, // pink
    //   { value: -3, borderColor: '#FF0000' }, // red
    //   { value: -4, borderColor: '#FFFF00' }, // yellow
    //   { value: 0, borderColor: '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: true, // 显示刻度标签
          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: "#FED88D" },
        },
        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: "0%", // 下移数据缩放滑块
      },
      {
        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,
//         data: [
//   [0, 0, 116, "#0CF49B"], // [x, y, value, borderColor]
//   [0, 1, 20, "#FF5733"],
//   [1, 1, 50, "#FFC300"],
// ],
        coordinateSystem: "cartesian2d",
        label: {
          normal: {
            show: true,
            color: "#fff", // 文本颜色
            formatter: function (params) {
              return params.value[2]; // 低版本使用 params.value 访问完整数据
            },
          },
        },
        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: {
          color: "white", // 线的颜色
        },
        symbol: "none", // 去掉点
      },
    ],
  };

  // 创造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 {
  background-color: #131a2a;
}
#qxjmqEcharts {
  width: 100%;
  height: 600px;
}
</style>