请求数据、情绪量能转化器组件

src/router/index.js

@@ -30,6 +30,11 @@ const routes = [
         path: '/Feedback',
         name: 'Feedback',
         component: () => import('@/views/Feedback.vue'),
+    },
+    {
+        path: '/emotionsEcharts',
+        name: 'emotionsEcharts',
+        component: () => import('@/views/emotionsEcharts.vue'),
     }
 ]
 // 创建路由实例

src/views/components/emoEnergyConverter.vue

@@ -0,0 +1,120 @@
+<template>
+  <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, toRef } from 'vue';
+import * as echarts from 'echarts';
+
+defineExpose({initQXNLZHEcharts})
+
+const qxnlzhqEchartsRef = ref(null);
+let qxnlzhqEchartsInstance = null;
+
+const data = ref({
+  echartsData:{}
+})
+let {
+  echartsData
+} = toRef(data.value)
+
+function initQXNLZHEcharts(kline, qxnlzhqData) {
+  console.log('kline', kline)
+  console.log('qxnlzhqData', qxnlzhqData)
+  let mixData = []
+  kline.forEach(element => {
+    let date = element[0]
+    let value = [element[1],element[2],element[3],element[4]]
+    mixData.push({
+      date,
+      value
+    })
+  });
+  console.log('mixData---',mixData)
+  // 初始化图表
+  qxnlzhqEchartsInstance = echarts.init(qxnlzhqEchartsRef.value);
+  // 设置图表配置
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: mixData.map(item => item.date),
+      axisLabel: {
+        rotate: 45, // 日期旋转45度防止重叠
+      }
+    },
+    yAxis: {
+      scale: true,
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        // formatter: '{value}'
+      }
+    },
+    series: [{
+      type: 'candlestick',
+      data: mixData.map(item => item.value),
+      itemStyle: {
+        // // 阳线样式（收盘 > 开盘）
+        // color: '#ff0783',    // 阳线边框色（红）
+        // borderColor: '#ff0783',
+        // color0: 'transparent', // 阳线填充色（透明实现空心效果）
+        // borderColor0: '#ff0783',
+        
+        // // 阴线样式（收盘 < 开盘）
+        // color: '#008080',     // 阴线填充色（绿）
+        // borderColor: '#008080',
+        // color0: '#008080',    // 阴线边框色（同填充色实现实心）
+        // borderColor0: '#008080',
+        
+        // 鼠标悬停样式
+        // emphasis: {
+        //   color: '#ff6666',   // 阳线悬停边框色
+        //   borderColor: '#ff6666',
+        //   color0: 'rgba(255,102,102,0.3)', // 阳线悬停轻微填充
+        //   borderColor0: '#ff6666',
+          
+        //   color: '#66cc99',   // 阴线悬停色
+        //   borderColor: '#66cc99',
+        //   color0: '#66cc99',
+        //   borderColor0: '#66cc99'
+        // }
+        normal: {
+          // 阳线样式（收盘 > 开盘）
+          color: '#ef232a',     // 阴线色（实际用不到）
+          color0: '#14b143',    // 阳线色（实际用不到）
+          borderColor: '#ef232a',   // 阳线边框色（红）
+          borderColor0: '#14b143',  // 阴线边框色（绿）
+          // 关键：通过 opacity 控制空心效果
+          opacity: function(params) {
+            // 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明
+            return params.data[2] > params.data[1] ? 0 : 1;
+          }
+        }
+      }
+    }],
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '4%', // 为dataZoom留出空间
+      containLabel: true
+    }
+  };
+  // 应用配置
+  qxnlzhqEchartsInstance.setOption(option);
+}
+
+onBeforeUnmount(() => {
+  // 组件卸载时销毁图表
+  if (qxnlzhqEchartsInstance) {
+    qxnlzhqEchartsInstance.dispose();
+  }
+});
+</script>
+<style scoped>
+#qxnlzhqEcharts{
+  width: 100%; 
+  height: 600px;
+  border: 1px solid red;
+}
+</style>

src/views/emotionsEcharts.vue

@@ -0,0 +1,31 @@
+<template>
+  AI情绪大模型
+  <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
+</template>
+<script setup>
+import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'
+import { ref, onMounted, onBeforeUnmount, toRef } from 'vue';
+import axios from "axios";
+const emoEnergyConverterRef = 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)
+      })
+    })
+})
+
+</script>