情绪解码器图表绘制

4 weeks ago · a28d825b72
2 changed files with 344 additions and 0 deletions
--- a/src/views/components/emotionDecod.vue
+++ b/src/views/components/emotionDecod.vue
@ -0,0 +1,339 @@
+<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>
--- a/src/views/emotionsEcharts.vue
+++ b/src/views/emotionsEcharts.vue
@ -1,12 +1,15 @@
 <template>
  AI情绪大模型
  <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
+  <emotionDecod ref="emotionDecodRef"></emotionDecod>
 </template>
 <script setup>
 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'
+import emotionDecod from '@/views/components/emotionDecod.vue'
 import { ref, onMounted, onBeforeUnmount, toRef } from 'vue';
 import axios from "axios";
 const emoEnergyConverterRef = ref(null)
+const emotionDecodRef = ref(null)

 onMounted(()=>{
  axios({
@ -24,6 +27,8 @@ onMounted(()=>{
    }).then((res) => {
      nextTick(()=>{
        emoEnergyConverterRef.value.initQXNLZHEcharts(res.data.data.KLine20, res.data.data.QXNLZHQ)
+        emotionDecodRef.value.initQXNLZHEcharts(res.data.data.KLine20, res.data.data.QXJMQ)
+        
      })
    })
 })