diff --git a/src/router/index.js b/src/router/index.js
index 38fc51a..472ef2a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,6 +42,7 @@ const routes = [
         component: () => import('@/views/AiEmotion.vue')//AI情绪大模型页面
     },
     {
+
         path: '/DBQBmodel',
         name: 'DBQBmodel',
         component: () => import('@/views/DBQBmodel.vue'),
@@ -50,6 +51,13 @@ const routes = [
         path: '/Emotionsmodel',
         name: 'Emotionsmodel',
         component: () => import('@/views/Emotionsmodel.vue'),
+    },
+    {
+
+        path: '/emotionsEcharts',
+        name: 'emotionsEcharts',
+        component: () => import('@/views/emotionsEcharts.vue')
+
     }
 
 ]
diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue
new file mode 100644
index 0000000..ffa8700
--- /dev/null
+++ b/src/views/components/emoEnergyConverter.vue
@@ -0,0 +1,445 @@
+<template>
+  <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, toRef, reactive } from "vue";
+import * as echarts from "echarts";
+
+defineExpose({ initQXNLZHEcharts });
+
+let qxnlzhqEchartsRef = ref(null);
+let qxnlzhqEchartsInstance = null;
+
+let regions = reactive([]);
+
+// 设置区域名称 位置
+function getNameTop(min, max, regionMiidle) {
+  // 获取整个图表的高度
+  const chartHeight = qxnlzhqEchartsInstance.getHeight(); 
+  // 60: 为x轴占的高度
+  return (max - Number(regionMiidle))  / (max - min) * (chartHeight - 60)
+}
+// 设置区域最大值 位置
+function getNumberTop(min, max, regionMax) {
+  // 获取整个图表的高度
+  const chartHeight = qxnlzhqEchartsInstance.getHeight(); 
+  // 60: 为x轴占的高度
+  return (max - Number(regionMax))  / (max - min) * (chartHeight - 60)
+}
+
+// 生成图形标注（核心逻辑）
+const generateGraphics = (min, max) => {
+  return regions.flatMap((region) => {
+    const middleY = (Number(region.min) + Number(region.max)) / 2;
+    return [
+      // 区域名称（中间位置）
+      {
+        type: "text",
+        left: '17', // 靠近y轴内侧
+        top: getNameTop(min, max, middleY),
+        style: {
+          text: region.name,
+          fill: region.fontColor,
+          fontSize: 14,
+          fontWeight: "bold",
+        },
+        z: 3,
+      },
+      // y轴数值（顶部位置）
+      {
+        type: "text",
+        left: '25',
+        top: getNumberTop(min, max, region.max),
+        // top: 100,
+        style: {
+          text: region.max.toString(),
+          fill: region.NumberColor,
+          fontSize: 12,
+        },
+        z: 3,
+      },
+    ];
+  });
+};
+
+function initQXNLZHEcharts(kline, qxnlzhqData) {
+  // 测试数据 ！！！ 删掉
+  // qxnlzhqData.topxh = ["2025/04/04", "2025/04/15"]
+  // qxnlzhqData.lowxh = ["2025/04/08", "2025/04/18"]
+  // qxnlzhqData.qixh = ["2025/04/10", "2025/04/21"]
+  if (qxnlzhqEchartsInstance) {
+    qxnlzhqEchartsInstance.dispose();
+  }
+  // 数据
+  let mixData = [];
+  kline.forEach((element) => {
+    let date = element[0];
+    let value = [element[1], element[2], element[3], element[4]];
+    mixData.push({
+      date,
+      value,
+    });
+  });
+
+  // 动态区域配置
+  // dd到zc 低吸区------情绪冰点区 ； zc到ht 关注区------认知潜伏区； ht到qs 回调区------多空消化区 ； qs到tp 拉升区------共识加速区；
+  // tp到js 突破区------情绪临界区 ； js到yl 警示区-------杠杆失衡区 ； yl到gg 风险区-------情绪熔断区；
+  regions = [
+    {
+      min: qxnlzhqData.dd,
+      max: qxnlzhqData.zc,
+      name: "【情绪冰点区】",
+      color: "#e7a5d6",
+      fontColor: '#000',
+      NumberColor: 'blue',
+    },
+    {
+      min: qxnlzhqData.zc,
+      max: qxnlzhqData.ht,
+      name: "【认知潜伏区】",
+      color: "#f36587",
+      fontColor: '#000',
+      NumberColor: 'blue',
+    },
+    {
+      min: qxnlzhqData.ht,
+      max: qxnlzhqData.qs,
+      name: "【多空消化区】",
+      color: "#e99883",
+      fontColor: '#000',
+      NumberColor: 'blue',
+    },
+    {
+      min: qxnlzhqData.qs,
+      max: qxnlzhqData.tp,
+      name: "【共识加速区】",
+      color: "#f0db84",
+      fontColor: '#000',
+      NumberColor: 'red',
+    },
+    {
+      min: qxnlzhqData.tp,
+      max: qxnlzhqData.js,
+      name: "【情绪临界区】",
+      color: "#dbeee3",
+      fontColor: 'red',
+      NumberColor: 'red',
+    },
+  ];
+  // gg yl为-1  不绘制部分图表
+  if (Number(qxnlzhqData.yl) != -1) {
+    regions.push(
+      {
+        min: qxnlzhqData.js,
+        max: qxnlzhqData.yl,
+        name: "【杠杆失衡区】",
+        color: "#9ac2d8",
+        fontColor: 'red',
+        NumberColor: 'red',
+      },
+    )
+  }
+  if (Number(qxnlzhqData.gg) != -1) {
+    regions.push(
+      {
+        min: qxnlzhqData.yl,
+        max: qxnlzhqData.gg,
+        name: "【情绪熔断区】",
+        color: "#bce283",
+        fontColor: 'red',
+        NumberColor: 'red',
+      },
+    )
+  }
+
+  // 计算止盈止损价格
+  const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价
+  const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价
+  // 确定起始和结束位置
+  const startIndex = Math.max(0, mixData.length - 17);
+  // 创建完整数据数组
+  const takeProfitData = new Array(mixData.length).fill(null);
+  const stopLossData = new Array(mixData.length).fill(null);
+  // 填充显示区域的数据
+  for (var i = startIndex; i < mixData.length; i++) {
+    takeProfitData[i] = stopProfitPrice;
+    stopLossData[i] = stopLossPrice;
+  }
+
+  // topxh、lowxh、qixh 对应k线染色
+  // 创建中间区域数据
+  const middleRangeData = [];
+  const middleRangeData1 = [];
+  const markPointData  = [];
+  mixData.forEach((item, index) => {
+    const [open, close, low, high] = item.value;
+    const rangeHeight = high - low;
+    // const middleThirdStart = low + rangeHeight * (1/3);
+    // const middleThirdEnd = low + rangeHeight * (2/3);
+    
+    let color = null;
+    
+    if (qxnlzhqData.topxh.includes(item.date)) {
+      color = '#000000'; // 黑色
+    } else if (qxnlzhqData.lowxh.includes(item.date)) {
+      color = '#1E90FF'; // 蓝色
+    }
+    
+    
+    // 添加中间区域数据
+    if (color) {
+      middleRangeData.push({
+        value: [index, close > open ? (close - open) : (open - close)], // 修正数据格式
+        itemStyle: {
+          normal: {
+            color: color
+          }
+        },
+      });
+      middleRangeData1.push({
+        value: [index, close > open ? open : close], // 修正数据格式
+        itemStyle: {
+          normal: {
+            color: 'transparent'
+          }
+        },
+      });
+    } else {
+      middleRangeData.push(null);
+      middleRangeData1.push(null);
+    }
+
+    // 添加文字标记数据
+    if (qxnlzhqData.qixh.includes(item.date)) {
+      markPointData.push({
+        name: '起',
+        coord: [index, (open + close) / 2],
+        itemStyle: {
+          normal: {
+            color: 'rgba(0,0,0,0)' // 标记点透明
+          }
+        },
+        label: {
+          normal:{
+            show: true,
+            position: 'inside',
+            formatter: '起',
+            textStyle: {
+              color: '#FF0000',
+              fontSize: 10,
+              // fontWeight: 'bold'
+            }
+          }
+        }
+      });
+    }
+  });
+
+  // 初始化图表
+  qxnlzhqEchartsInstance = echarts.init(qxnlzhqEchartsRef.value);
+  let option;
+  // 设置图表配置
+  option = {
+    xAxis: {
+      type: "category",
+      data: mixData.map((item) => item.date),
+      axisLabel: {
+        rotate: 45, // 日期旋转45度防止重叠
+      },
+    },
+    yAxis: {
+      scale: true,
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {  // 刻度标签
+        show: false  // 不显示刻度标签
+      },
+      axisTick: {    // 刻度线
+        show: false // 不显示刻度线
+      },
+      min:
+        qxnlzhqData.dd < stopLossPrice * 0.98
+          ? Math.floor(qxnlzhqData.dd)
+          : Math.floor(stopLossPrice * 0.98),
+      max:
+        qxnlzhqData.yl > stopProfitPrice * 1.02
+          ? Math.ceil(qxnlzhqData.yl)
+          : Math.ceil(stopProfitPrice * 1.02),
+    },
+    // 自定义区域名称和区域范围值 位置
+    graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98
+          ? Math.floor(qxnlzhqData.dd)
+          : Math.floor(stopLossPrice * 0.98),qxnlzhqData.yl > stopProfitPrice * 1.02
+          ? Math.ceil(qxnlzhqData.yl)
+          : Math.ceil(stopProfitPrice * 1.02)),
+    series: [
+      {
+        type: "candlestick",
+        data: mixData.map((item) => item.value),
+        z: 1, 
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 10,
+          data: markPointData,
+          z: 5 // 确保标记显示在最上层
+        },
+        itemStyle: {
+          normal: {
+            // 阳线样式（收盘 > 开盘）
+            color: 'transparent',     // 阳线色
+            color0: '#008080',    // 阴线色
+            borderColor: '#ff0783',   // 阳线边框色（红）
+            borderColor0: '#008080',  // 阴线边框色（绿）
+          }
+        },
+        // 实现 分区域背景色
+        markArea: {
+          silent: true,
+          data: regions.map((region) => [
+            {
+              yAxis: region.min,
+              itemStyle: { normal: { color: region.color } },
+            },
+            { yAxis: region.max },
+          ]),
+        },
+      },
+      {
+        name: '中间区域',
+        type: 'bar',
+        stack: 'total',
+        data: middleRangeData1,
+        barWidth: '20%',
+        barCategoryGap: '40%',
+        itemStyle: {
+          normal: {
+            color: 'rgba(0,0,0,0)' // 默认透明
+          }
+        },
+        z:2
+      },
+      // 中间区域染色
+      {
+        name: '中间区域',
+        type: 'bar',
+        stack: 'total',
+        data: middleRangeData,
+        barWidth: '20%',
+        barCategoryGap: '40%',
+        itemStyle: {
+          normal: {
+            color: 'rgba(0,0,0,0)' // 默认透明
+          }
+        },
+        z:2
+      },
+      {
+        name: '止盈线',
+        type: 'line',
+        data: takeProfitData,
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: '#ff80ff', // 蓝色
+            width: 2,
+            type: 'solid'
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.map((item) => item.value).length - 1, stopProfitPrice],
+              itemStyle: {
+                color: '#ff80ff'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'bottom',
+                  formatter: `{text|止盈: ${stopProfitPrice}}`,
+                  rich: {
+                    text: {
+                      color: '#820a06',
+                      fontSize: 14,
+                      fontWeight: 'bold'
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        name: '止损线',
+        type: 'line',
+        data: stopLossData,
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: '#080bfd', // 红色
+            width: 2,
+            type: 'solid'
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.map((item) => item.value).length - 1, stopLossPrice],
+              itemStyle: {
+                color: '#080bfd'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'bottom',
+                  formatter: `{text|止损: ${stopLossPrice}}`,
+                  rich: {
+                    text: {
+                      color: '#080bfd',
+                      fontSize: 14,
+                      fontWeight: 'bold'
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        }
+      },
+    ],
+    grid: {
+      left: "0",
+      right: "10",
+      top: '10',
+      bottom: "0", 
+      containLabel: true,
+    },
+  };
+  // 应用配置
+  qxnlzhqEchartsInstance.setOption(option);
+  // 监听窗口大小变化，调整图表尺寸
+  window.addEventListener('resize', () => {
+    qxnlzhqEchartsInstance.resize()
+  })
+}
+
+onBeforeUnmount(() => {
+  // 组件卸载时销毁图表
+  if (qxnlzhqEchartsInstance) {
+    qxnlzhqEchartsInstance.dispose();
+  }
+});
+</script>
+<style scoped>
+#qxnlzhqEcharts {
+  width: 100%;
+  height: 700px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue
new file mode 100644
index 0000000..b99ae10
--- /dev/null
+++ b/src/views/components/emotionDecod.vue
@@ -0,0 +1,354 @@
+<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 = [];
+  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"
+      //     }
+      //   }
+    },
+
+    //控制坐标轴
+    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: 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: "#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: "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,
+        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 {
+  background-color: #131a2a;
+}
+#qxjmqEcharts {
+  width: 100%;
+  height: 600px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue
new file mode 100644
index 0000000..1354c51
--- /dev/null
+++ b/src/views/components/emotionalBottomRadar.vue
@@ -0,0 +1,560 @@
+<template>
+  <div ref="bottomRadarRef" id="bottomRadarChart"></div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import * as echarts from 'echarts'
+const bottomRadarRef = ref(null)
+let bottomRadarChart = null
+function initEmotionalBottomRadar(KlineData, barAndLineData) {
+  let bottomRadarChartDom = document.getElementById('bottomRadarChart')
+  bottomRadarChart = echarts.init(bottomRadarChartDom)
+
+  // 日期-作为x轴
+  let dateArray = KlineData.map(subArray => subArray[0])
+  // k线，取前四个即可
+  let kLineDataArray = KlineData.map(subArray => subArray.slice(1, 5))
+  // 红线，取第二个值
+  let redLineDataArray = barAndLineData.map(subArray => subArray[1])
+  // 色块数据格式化
+  let barTotalDataArray = barAndLineData.map(subArray => subArray.slice(2, 6))
+  // 删掉
+  // barTotalDataArray[0] = [0, 0, 0, 0]
+  // barTotalDataArray[8] = [1, 1, 1, 1]
+  // barTotalDataArray[9] = [0, 0, 1, 1]
+  // barTotalDataArray[13] = [1, 0, 1, 0]
+  // barTotalDataArray[16] = [0, 0, 1, 0]
+  // 黄色块、黄色加仓资金、紫色柱子、蓝色柱子
+  let yellowBlockDataArray = []
+  let yellowLineDataArray = []
+  let purpleLineDataArray = []
+  let blueLineDataArray = []
+  let transparentFillingDataArray = []
+  // 黄色块：为1  0-4显示柱体
+  // 黄色加仓资金文字：为1 在4的位置展示文字
+  // 紫色柱子：为1  1-80显示柱体
+  // 蓝色柱子：为1  0-40显示柱体
+  // 因数据要互相叠加展示，所以需要数据处理。base适用于 ECharts 4.x 及以上版本
+  barTotalDataArray.forEach((item) => {
+    if (item[0]) {
+      yellowBlockDataArray.push(4)
+      if (item[3]) {
+        // 40-4
+        blueLineDataArray.push(36)
+        if (item[2]) {
+          // 80-40
+          purpleLineDataArray.push(40)
+          transparentFillingDataArray.push(0)
+        } else {
+          purpleLineDataArray.push(0)
+          transparentFillingDataArray.push(0)
+        }
+      } else {
+        blueLineDataArray.push(0)
+        if (item[2]) {
+          // 80-4
+          purpleLineDataArray.push(76)
+          transparentFillingDataArray.push(0)
+        } else {
+          purpleLineDataArray.push(0)
+          transparentFillingDataArray.push(0)
+        }
+      }
+    } else if (!item[0]) {
+      yellowBlockDataArray.push(0)
+      if (item[3]) {
+        blueLineDataArray.push(40)
+        if (item[2]) {
+          // 80-40
+          purpleLineDataArray.push(40)
+          transparentFillingDataArray.push(0)
+        } else {
+          purpleLineDataArray.push(0)
+          transparentFillingDataArray.push(0)
+        }
+      } else {
+        blueLineDataArray.push(0)
+        if (item[2]) {
+          // 80-1，base为1
+          purpleLineDataArray.push(79)
+          transparentFillingDataArray.push(1)
+        } else {
+          purpleLineDataArray.push(0)
+          transparentFillingDataArray.push(0)
+        }
+      }
+    }
+    // 加仓资金
+    if (item[1]) {
+      yellowLineDataArray.push(1)
+    } else if (!item[1]) {
+      yellowLineDataArray.push(0)
+    }
+  })
+
+  // 配置图表选项，很多操作和展示已限制，如果需要需放开
+  let option = {
+    // backgroundColor: '#000046',  // 设置整个图表的背景色
+    tooltip: {
+      show: false, // 不展示tip
+      // 当前echart版本十字准星独立渲染了; 4.x+才有showAxisPointer
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      },
+      backgroundColor: 'rgba(255, 255, 255, 0.8)',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      padding: 10,
+      textStyle: {
+        color: '#333'
+      },
+      formatter: function (params) {
+        let result = `<div style="font-weight: bold;">${params[0].name}</div>`
+        
+        params.forEach(param => {
+          let value = param.value
+          let color = param.color
+          
+          if (param.seriesType === 'candlestick') {
+            result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: 开 ${value[0]}, 收 ${value[1]}, 低 ${value[2]}, 高 ${value[3]}</div>`
+          } else {
+            result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>`
+          }
+        })
+        
+        return result
+      }
+    },
+    legend: {
+      // data: ['K线', '红线', '色块'], 不要展示图例
+      type: 'scroll',
+      pageButtonItemGap: 2,
+      pageButtonPosition: 'end',
+      textStyle: {
+        color: '#666'
+      }
+    },
+    grid: [
+      {
+        left: '3%',
+        right: '3%',
+        top: '20px',
+        bottom: '50%',
+        height: '300px',
+        // containLabel: true
+      },
+      {
+        left: '3%',
+        right: '3%',
+        top: '320px',
+        bottom: '25%',
+        height: '300px',
+        // containLabel: true
+      },
+      {
+        left: '3%',
+        right: '3%',
+        top: '620px',
+        bottom: '50px',
+        height: '300px',
+        // containLabel: true
+      }
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        data: dateArray,
+        gridIndex: 0,
+        boundaryGap: true, // 保持间距，不要离y轴太近，不然重叠了
+        axisLine: {
+          // show: false,
+          lineStyle: {
+            color: '#837b7b', // x轴线颜色
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        },
+        splitLine: {
+          show: false // 不要x轴的分割线
+        },
+        axisPointer: {
+          link: {
+            xAxisIndex: 'all'
+          }
+        }
+      },
+      {
+        type: 'category',
+        data: dateArray,
+        gridIndex: 1,
+        boundaryGap: true,
+        axisLine: {
+          // show: false,
+          lineStyle: {
+            // color: '#008000'
+            color: '#837b7b'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisPointer: {
+          link: {
+            xAxisIndex: 'all'
+          }
+        }
+      },
+      {
+        type: 'category',
+        data: dateArray,
+        gridIndex: 2,
+        axisLine: {
+          lineStyle: {
+            color: '#837b7b'
+          }
+        },
+        axisTick: {
+          show: true,  // 显示刻度线
+          alignWithLabel: true,
+          lineStyle: {
+            color: '#999',  // 颜色
+            width: 1,      // 宽度
+            type: 'solid'  // 线样式（solid/dashed/dotted）
+          }
+        },
+        axisLabel: {
+          color: '#000000',
+          interval: 'auto',
+          rotate: 45
+        },
+        splitLine: {
+          show: false
+        },
+        axisPointer: {
+          link: {
+            xAxisIndex: 'all'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        splitNumber: 4,
+        axisLine: {
+          lineStyle: {
+            color: '#837b7b' // y轴坐标轴颜色
+          }
+        },
+        axisTick: {
+          show: true
+        },
+        axisLabel: {
+          width: 50, // 宽度限制
+          color: '#000000',
+          formatter: function (value, index) {
+            if (index === 0) {
+              return '0'
+            }
+            return value.toFixed(2)
+          }
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#837b7b',
+            type: 'dotted'    // 设置网格线类型 dotted：虚线   solid:实线
+          }
+        },
+        // min: 4,
+        scale: true, // 不强制包含0，不然k线图底部空余太多
+      },
+      {
+        type: 'value',
+        gridIndex: 1,
+        splitNumber: 3,
+        axisLine: {
+          lineStyle: {
+            color: '#837b7b'
+          }
+        },
+        axisTick: {
+          show: true
+        },
+        splitNumber: 5, // 刻度数量
+        axisLabel: {
+          width: 50, // 宽度限制
+          color: '#000000',
+          formatter: function(value, index) {
+            // 如果没有刻度数量，其他方法获取不到y轴刻度总长
+            if (index === 0) {
+              return '0'
+            } else if (index === 5) {
+              return ''
+            }
+            return value
+          }
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#837b7b',
+            type: 'dotted'
+          }
+        },
+      },
+      {
+        type: 'value',
+        gridIndex: 2,
+        splitNumber: 2,
+        axisLine: {
+          lineStyle: {
+            color: '#837b7b'
+          }
+        },
+        axisTick: {
+          show: true
+        },
+        splitNumber: 5, // 刻度数量
+        axisLabel: {
+          width: 50, // 宽度限制
+          color: '#000000',
+          formatter: function(value, index) {
+            if (index === 5) {
+              return ''
+            }
+            return value
+          }
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#837b7b',
+            type: 'dotted'    // 设置网格线类型 dotted：虚线   solid:实线
+          }
+        },
+        splitNumber: 5,
+        min: function(value) {
+          return 0 // 最小值
+        },
+        max: function(value) {
+          return value.max + 10 // 比最大值高10, 避免最高点和上一个图表x轴重合
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        xAxisIndex: [0, 2],
+        // start: 80,
+        // end: 100,
+        show: false
+      },
+      {
+        type: 'slider',
+        xAxisIndex: [0, 2],
+        // start: 80,
+        // end: 100,
+        show: false
+      },
+      {
+        type: 'slider',
+        xAxisIndex: [0, 2],
+        // 一次性全部 or 后20%
+        // start: 80,
+        // end: 100,
+        show: false, // 先不显示
+        borderColor: '#CFD6E3',
+        dataBackground: {
+          // 线
+          lineStyle: {
+            color: '#CFD6E3'
+          },
+          // 阴影
+          areaStyle: {
+            color: 'rgba(241,243,247,0.5)'
+          }
+        }
+      },
+    ],
+    series: [
+      {
+        name: 'K线',
+        type: 'candlestick',
+        data: kLineDataArray,
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        itemStyle: {
+          color: '#ef232a', // 上涨颜色 (红)
+          color0: '#14b143', // 下跌颜色 (绿)
+          borderColor: '#ef232a',
+          borderColor0: '#14b143',
+          normal: {
+            color: '#ef232a', // 上涨颜色 (红)
+            color0: '#14b143', // 下跌颜色 (绿)
+            borderColor: '#ef232a',
+            borderColor0: '#14b143',
+            opacity: function(params) {
+              // 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明
+              return params.data[2] > params.data[1] ? 0 : 1
+            }
+          }
+        }
+      },
+      {
+        name: '红线',
+        type: 'line',
+        data: redLineDataArray,
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        symbol: 'none',
+        sampling: 'average',
+        itemStyle: {
+          normal: {
+            color: '#ef232a'
+          }
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(33, 150, 243, 0.4)' },
+              { offset: 1, color: 'rgba(33, 150, 243, 0)' }
+            ]
+          }
+        }
+      },
+      {
+        name: '基础base',
+        type: 'bar',
+        stack: 'total',
+        // barGap: '-100%', // 重叠
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barCategoryGap: '0%',
+        itemStyle: {
+          normal: {
+            color: '#ffffff',
+            borderWidth: 0,
+          }
+        },
+        data: transparentFillingDataArray,
+      },
+      {
+        name: '黄色块',
+        type: 'bar',
+        stack: 'total',
+        // barGap: '-100%', // 重叠
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barCategoryGap: '0%',  // 类目间柱条间距为0
+        itemStyle: {
+          normal: {
+            color: 'rgba(255, 255, 0, 1)',
+            borderWidth: 0,
+            // 加仓资金的文字显示
+            label: {
+              show: (params) => {
+                return yellowLineDataArray[params.dataIndex] > 0
+              },
+              position: 'top',
+              textStyle: {
+                color: 'rgba(255, 255, 0, 1)'
+              },
+              formatter: (params) => {
+                return yellowLineDataArray[params.dataIndex] > 0 ? '加仓资金' : ''
+              }
+            }
+          }
+        },
+        data: yellowBlockDataArray,
+      },
+      {
+        name: '蓝色',
+        type: 'bar',
+        stack: 'total',
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barCategoryGap: '0%',  // 类目间柱条间距为0
+        label: {
+          show: true,
+          position: 'inside'
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(34, 196, 190, 1)',
+            borderWidth: 0
+          }
+        },
+        data: blueLineDataArray
+      },
+      {
+        name: '紫色',
+        type: 'bar',
+        stack: 'total',
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        barCategoryGap: '0%',  // 类目间柱条间距为0
+        label: {
+          show: true,
+          position: 'inside'
+        },
+        itemStyle: {
+          normal: {
+            color: 'rgba(191, 87, 222, 1)',
+            borderWidth: 0
+          }
+        },
+        data: purpleLineDataArray
+      },
+    ]
+  }
+
+  // 使用配置项显示图表
+  bottomRadarChart.setOption(option)
+  
+  // 监听窗口大小变化，调整图表尺寸
+  window.addEventListener('resize', () => {
+    bottomRadarChart.resize()
+  })
+}
+
+// 暴露给父级
+defineExpose({
+  initEmotionalBottomRadar
+})
+
+onBeforeUnmount(() => {
+  // 组件卸载时销毁图表
+  if (bottomRadarChart) {
+    bottomRadarChart.dispose()
+  }
+})
+</script>
+
+<style>
+#bottomRadarChart{
+  width: 100%; 
+  height: 1040px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/emotionsEcharts.vue b/src/views/emotionsEcharts.vue
new file mode 100644
index 0000000..fece88b
--- /dev/null
+++ b/src/views/emotionsEcharts.vue
@@ -0,0 +1,42 @@
+<template>
+  AI情绪大模型
+  <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
+  <emotionDecod ref="emotionDecodRef"></emotionDecod>
+  <EmotionalBottomRadar ref="emotionalBottomRadarRef"></EmotionalBottomRadar>
+</template>
+<script setup>
+import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'
+import emotionDecod from '@/views/components/emotionDecod.vue'
+import EmotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'
+import { ref, onMounted, onBeforeUnmount, toRef } from 'vue';
+import axios from "axios";
+const emoEnergyConverterRef = ref(null)
+const emotionDecodRef = ref(null)
+const emotionalBottomRadarRef = ref(null)
+
+
+onMounted(()=>{
+  axios({
+      method: "post",//请求方式
+      url: 'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',//请求接口
+      data: {
+        "token": "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
+        "market": "my",
+        "code": "1295",
+        "language": "cn"
+      },//数据
+      headers: {
+        'content-type': 'application/json'
+      },//请求头参数
+    }).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)
+        
+        // 情绪探底雷达
+        emotionalBottomRadarRef.value.initEmotionalBottomRadar(res.data.data.KLine20, res.data.data.QXTDLD)
+      })
+    })
+})
+
+</script>