hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

情绪大模型图表的适配

ds_hxl
宋杰 2 weeks ago
parent
5e919701de
commit
f57f15e53c
5 changed files with 530 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 338
      src/views/AiEmotion.vue
  2. 51
      src/views/components/emoEnergyConverter.vue
  3. 89
      src/views/components/emotionDecod.vue
  4. 70
      src/views/components/emotionalBottomRadar.vue
  5. 114
      src/views/components/marketTemperature.vue

338
src/views/AiEmotion.vue
View File

@ -27,12 +27,7 @@
<div class="class02"> <div class="class02">
<div class="container"> <div class="container">
<img class="item" :src="item" alt="思维矩阵图片" /> <img class="item" :src="item" alt="思维矩阵图片" />
<div class="span01" style="
position: relative;
top: 0.5rem;
left: -14rem;
transform: translate(-50%, -50%);
">
<div class="span01">
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }} {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
</div> </div>
</div> </div>
@ -43,7 +38,7 @@
</div> </div>
<!-- 温度计图表 --> <!-- 温度计图表 -->
<div class="class03"> <div class="class03">
<div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
<div class="class003">
<div class="content1"> <div class="content1">
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标"> <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
<span class="title1">股票温度计</span> <span class="title1">股票温度计</span>
@ -132,13 +127,13 @@
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法 import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
import axios from 'axios'; import axios from 'axios';
import { useChatStore } from '@/store/chat.js';
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片 import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件 import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件 import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
import marketTemperature from '@/views/components/marketTemperature.vue'; import marketTemperature from '@/views/components/marketTemperature.vue';
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片 import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
import { ElMessage } from 'element-plus';
const stockName = ref(''); // 存储股票名称 const stockName = ref(''); // 存储股票名称
const marketTemperatureRef = ref(null); // 引用市场温度计组件 const marketTemperatureRef = ref(null); // 引用市场温度计组件
@ -147,7 +142,7 @@ const emotionDecodRef = ref(null)
const emotionalBottomRadarRef = ref(null) const emotionalBottomRadarRef = ref(null)
const messages = ref([]); const messages = ref([]);
const displayDate = ref(''); // 用于存储显示的日期 const displayDate = ref(''); // 用于存储显示的日期
const isPageLoaded = ref(true); // 控制页面是否显示
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转 const isRotating = ref(false);//控制旋转
const userInputDisplayRef = ref(null);//消息区域的引用 const userInputDisplayRef = ref(null);//消息区域的引用
const data1 = ref(null); // 个股温度 const data1 = ref(null); // 个股温度
@ -163,15 +158,6 @@ function startImageRotation() {
isRotating.value = false; isRotating.value = false;
}, 5000); // 5 秒后停止旋转 }, 5000); // 5 秒后停止旋转
} }
// 更新 span01 中股票名字的方法
function updateSpan01() {
nextTick(() => {
const span01 = document.querySelector('.span01');
if (span01) {
span01.textContent = `${stockName.value}量子四维矩阵图`;
}
});
}
// 发送消息方法 // 发送消息方法
@ -220,18 +206,18 @@ async function handleSendMessage(input) {
fetchData(parsedData.code, parsedData.market); fetchData(parsedData.code, parsedData.market);
// 更新 span01 的内容 // 更新 span01 的内容
updateSpan01();
// updateSpan01();
} else { } else {
console.error('工作流接口返回非股票信息:', parsedData.refuse);
ElMessage.error('工作流接口未返回非股票信息');
} }
} catch (error) { } catch (error) {
console.error('请求工作流接口失败:', error);
ElMessage.error('请求工作流接口失败，请检查网络连接');
} finally { } finally {
// 停止图片旋转 // 停止图片旋转
isRotating.value = false; isRotating.value = false;
} }
} else { } else {
ElMessage.error('消息发送失败，请检查网络连接');
} }
} }
@ -241,8 +227,8 @@ async function fetchData(code, market) {
const stockDataParams = { const stockDataParams = {
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A', // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs', token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
market: 'usa',
code: 'TSLA',
market: market,
code: code,
language: 'cn', language: 'cn',
version: version1.value version: version1.value
}; };
@ -259,13 +245,10 @@ async function fetchData(code, market) {
); );
const stockDataResponse = stockDataResult.data; // 获取返回所有的数据 const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
const chatStore = useChatStore();
chatStore.kLineData.push(stockDataResponse.data);
console.log('图表数据接口返回数据:', stockDataResponse.data); console.log('图表数据接口返回数据:', stockDataResponse.data);
if (stockDataResponse.code === 200 && stockDataResponse.data) { if (stockDataResponse.code === 200 && stockDataResponse.data) {
console.log(stockDataResponse.code)
// 数据清洗并四舍五入xx // 数据清洗并四舍五入xx
const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [ const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [
date, date,
@ -278,16 +261,16 @@ async function fetchData(code, market) {
data2.value = lastTwoNumbers[2] // 市场温度 data2.value = lastTwoNumbers[2] // 市场温度
console.log('1111111111111111111111') console.log('1111111111111111111111')
// 调用渲染图表的方法 // 调用渲染图表的方法
renderCharts(chatStore.kLineData[chatStore.kLineData.length - 1]);
console.log('2222222222222222222222')
// renderCharts(stockDataResponse.data);
// 数据和图表加载完成，显示页面 // 数据和图表加载完成，显示页面
// isPageLoaded.value = true;
} else {
isPageLoaded.value = true;
renderCharts(stockDataResponse.data);
} else {
ElMessage.error('获取接口数据失败');
} }
} catch (error) { } catch (error) {
ElMessage.error('获取接口数据失败。。。');
} }
} }
@ -335,6 +318,11 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.class003 {
padding-top: 7rem;
padding-left: 12rem;
}
.class003 .div02 { .class003 .div02 {
background-image: url('@/assets/img/AiEmotion/redBorder.png'); background-image: url('@/assets/img/AiEmotion/redBorder.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -438,11 +426,9 @@ onMounted(() => {
width: fit-content; width: fit-content;
} }
.class0503 {
/* .class0503 {
min-width: 100%; min-width: 100%;
/* margin: 0 auto; */
}
} */
.class0402 { .class0402 {
width: 80%; width: 80%;
@ -528,8 +514,6 @@ onMounted(() => {
margin-left: 2rem; margin-left: 2rem;
} }
.class0502 {}
.img02 { .img02 {
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
@ -595,7 +579,7 @@ onMounted(() => {
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 70rem;
min-height: 72rem;
/* 设置最小高度，确保图片显示 */ /* 设置最小高度，确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -627,7 +611,7 @@ onMounted(() => {
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 55rem;
min-height: 57rem;
/* 设置最小高度，确保图片显示 */ /* 设置最小高度，确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -639,7 +623,7 @@ onMounted(() => {
/* 确保背景图片完整显示 */ /* 确保背景图片完整显示 */
background-repeat: no-repeat; background-repeat: no-repeat;
/* 防止背景图片重复 */ /* 防止背景图片重复 */
width: 95%;
width: 100%;
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
@ -703,13 +687,12 @@ onMounted(() => {
font-size: 1.5rem; font-size: 1.5rem;
color: white; color: white;
float: right; float: right;
margin-top: -90px;
margin-top: -3.5rem;
} }
.span01 { .span01 {
/* background-image: url('@/assets/img/AiEmotion/bk01.png'); */
/* 使用导入的背景图片 */ /* 使用导入的背景图片 */
background-size: cover;
background-size: 100% 100%;
/* 背景图片覆盖整个容器 */ /* 背景图片覆盖整个容器 */
background-repeat: no-repeat; background-repeat: no-repeat;
/* 防止背景图片重复 */ /* 防止背景图片重复 */
@ -719,14 +702,11 @@ onMounted(() => {
/* 添加内边距以显示内容 */ /* 添加内边距以显示内容 */
color: #fff; color: #fff;
/* 设置文字颜色以确保可读性 */ /* 设置文字颜色以确保可读性 */
border-radius: 5px;
/* 添加圆角 */
min-height: 3rem;
min-width: 30rem;
font-size: 1.5rem; font-size: 1.5rem;
/* 增加字体大小以便更清晰显示股票名称 */ /* 增加字体大小以便更清晰显示股票名称 */
text-align: center; text-align: center;
/* 文字居中 */
transform: translate(-50%, -50%);
margin-left: -13rem;
} }
@ -828,4 +808,258 @@ onMounted(() => {
.send-button:hover { .send-button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
</style>
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
/* 图片样式 */
.golden-wheel img {
width: 100%;
}
.class02 img {
width: 70%;
}
.class0201 img {
width: 100%;
}
.class0301 img {
width: 100%;
}
.class0403 img {
width: 100%;
}
.class0501 img {
width: 100%;
}
.class0702 img {
width: 100%;
}
.class0700 img {
width: 100%;
}
.scaled-img img {
width: 30%;
height: auto;
}
.class09 img {
width: 100%;
}
.img01 {
height: auto;
margin-left: 0rem;
width: 35%;
margin-top: 10px;
}
.title1 {
font-size: 10px;
margin-left: 30px;
}
.class02 .span02 {
font-size: 14px;
color: white;
float: right;
margin-top: -45px;
}
.class03 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 132%;
margin-left: -45px;
}
.class03 .class003 {
padding-top: 3rem;
padding-left: 0rem;
}
.class01 {
min-height: 100px;
height: auto;
box-sizing: border-box;
background-color: #5e81a7;
margin: 0 auto;
margin-bottom: 10rem;
}
.class04 {
width: 126%;
/* min-height: 51rem; */
margin-left: -39px;
min-height: 38rem;
}
.class02 .container img {
width: 68%;
height: auto;
margin-top: -15px;
margin-left: -2rem;
}
.title2,
.title3,
.title4 {
font-size: 10px;
margin-left: -3rem;
}
.img02 {
width: 35%;
height: auto;
margin-left: 5rem;
}
.class0401 {
padding-top: 3rem;
}
.img03,
.img04 {
width: 35%;
height: auto;
margin-left: 5rem;
}
.text-container p {
font-size: 10px;
}
.lz-img {
margin-bottom: 3rem;
padding-top: 20px;
img {
width: 45%;
height: auto;
}
}
.class08 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 13rem;
margin: 0 auto;
margin-left: -41px;
}
.bk-image {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 126%;
height: 15rem;
margin: 0 auto;
margin-top: 0px;
margin-left: -40px;
}
.class05 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 45rem;
margin-left: -41px;
}
.class06 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 35rem;
margin: 0 auto;
margin-left: -41px;
}
.text-container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: left;
padding: 20px;
}
.div00 {
display: flex;
flex-direction: column;
margin-left: 3rem;
gap: 0;
margin-top: -8rem;
width: 100%;
height: auto;
}
.class003 .div01 {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
min-height: 25px;
float: left;
margin-left: 100px;
text-align: center;
margin-top: 10px;
font-size: 10px;
color: white;
}
.class003 .div02 {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
min-height: 25px;
float: left;
margin-left: 100px;
text-align: center;
margin-top: 10px;
font-size: 10px;
color: white;
}
/*
.container {
max-width: 80vw;
width: 100%;
height: auto;
} */
.span01 {
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 背景图片覆盖整个容器 */
background-repeat: no-repeat;
/* 防止背景图片重复 */
display: inline-block;
/* 确保容器是块级元素 */
padding: 10px;
/* 添加内边距以显示内容 */
color: #fff;
/* 设置文字颜色以确保可读性 */
font-size: 13px;
/* 增加字体大小以便更清晰显示股票名称 */
text-align: center;
transform: translate(-50%, -50%);
margin-left: -5rem;
}
}
</style>

51
src/views/components/emoEnergyConverter.vue
View File

@ -16,16 +16,16 @@ let regions = reactive([]);
// 设置区域名称 位置 // 设置区域名称 位置
function getNameTop(min, max, regionMiidle) { function getNameTop(min, max, regionMiidle) {
// 获取整个图表的高度 // 获取整个图表的高度
const chartHeight = qxnlzhqEchartsInstance.getHeight();
const chartHeight = qxnlzhqEchartsInstance.getHeight();
// 60: 为x轴占的高度 // 60: 为x轴占的高度
return (max - Number(regionMiidle)) / (max - min) * (chartHeight - 60)
return (max - Number(regionMiidle)) / (max - min) * (chartHeight - 60)
} }
// 设置区域最大值 位置 // 设置区域最大值 位置
function getNumberTop(min, max, regionMax) { function getNumberTop(min, max, regionMax) {
// 获取整个图表的高度 // 获取整个图表的高度
const chartHeight = qxnlzhqEchartsInstance.getHeight();
const chartHeight = qxnlzhqEchartsInstance.getHeight();
// 60: 为x轴占的高度 // 60: 为x轴占的高度
return (max - Number(regionMax)) / (max - min) * (chartHeight - 60)
return (max - Number(regionMax)) / (max - min) * (chartHeight - 60)
} }
// 生成图形标注（核心逻辑） // 生成图形标注（核心逻辑）
@ -171,22 +171,22 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
// 创建中间区域数据 // 创建中间区域数据
const middleRangeData = []; const middleRangeData = [];
const middleRangeData1 = []; const middleRangeData1 = [];
const markPointData = [];
const markPointData = [];
mixData.forEach((item, index) => { mixData.forEach((item, index) => {
const [open, close, low, high] = item.value; const [open, close, low, high] = item.value;
const rangeHeight = high - low; const rangeHeight = high - low;
// const middleThirdStart = low + rangeHeight * (1/3); // const middleThirdStart = low + rangeHeight * (1/3);
// const middleThirdEnd = low + rangeHeight * (2/3); // const middleThirdEnd = low + rangeHeight * (2/3);
let color = null; let color = null;
if (qxnlzhqData.topxh.includes(item.date)) { if (qxnlzhqData.topxh.includes(item.date)) {
color = '#000000'; // 黑色 color = '#000000'; // 黑色
} else if (qxnlzhqData.lowxh.includes(item.date)) { } else if (qxnlzhqData.lowxh.includes(item.date)) {
color = '#1E90FF'; // 蓝色 color = '#1E90FF'; // 蓝色
} }
// 添加中间区域数据 // 添加中间区域数据
if (color) { if (color) {
middleRangeData.push({ middleRangeData.push({
@ -221,7 +221,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
} }
}, },
label: { label: {
normal:{
normal: {
show: true, show: true,
position: 'inside', position: 'inside',
formatter: '起', formatter: '起',
@ -246,6 +246,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
data: mixData.map((item) => item.date), data: mixData.map((item) => item.date),
axisLabel: { axisLabel: {
rotate: 45, // 日期旋转45度防止重叠 rotate: 45, // 日期旋转45度防止重叠
color: "white"
}, },
}, },
yAxis: { yAxis: {
@ -270,15 +271,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
}, },
// 自定义区域名称和区域范围值 位置 // 自定义区域名称和区域范围值 位置
graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98 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)),
? Math.floor(qxnlzhqData.dd)
: Math.floor(stopLossPrice * 0.98), qxnlzhqData.yl > stopProfitPrice * 1.02
? Math.ceil(qxnlzhqData.yl)
: Math.ceil(stopProfitPrice * 1.02)),
series: [ series: [
{ {
type: "candlestick", type: "candlestick",
data: mixData.map((item) => item.value), data: mixData.map((item) => item.value),
z: 1,
z: 1,
markPoint: { markPoint: {
symbol: 'circle', symbol: 'circle',
symbolSize: 10, symbolSize: 10,
@ -318,7 +319,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
color: 'rgba(0,0,0,0)' // 默认透明 color: 'rgba(0,0,0,0)' // 默认透明
} }
}, },
z:2
z: 2
}, },
// 中间区域染色 // 中间区域染色
{ {
@ -333,7 +334,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
color: 'rgba(0,0,0,0)' // 默认透明 color: 'rgba(0,0,0,0)' // 默认透明
} }
}, },
z:2
z: 2
}, },
{ {
name: '止盈线', name: '止盈线',
@ -415,11 +416,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
}, },
], ],
grid: { grid: {
left: "0",
left: "7%",
right: "10", right: "10",
top: '10', top: '10',
bottom: "0",
bottom: "0",
containLabel: true, containLabel: true,
width: '85%'
}, },
}; };
// 应用配置 // 应用配置
@ -443,4 +445,15 @@ onBeforeUnmount(() => {
height: 700px; height: 700px;
margin-left: -1rem; margin-left: -1rem;
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
#qxnlzhqEcharts {
min-width: 100%;
height: 300px;
margin-left: -1rem;
margin-top: -5rem;
}
}
</style> </style>

89
src/views/components/emotionDecod.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> --> <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
<div class="qxjmqbox"> <div class="qxjmqbox">
<div ref="KlineCanvs" id="qxjmqEcharts" class="qxjmqbox"></div>
<div ref="KlineCanvs" id="qxjmqEcharts"></div>
</div> </div>
</template> </template>
<script setup>
<script setup>
import { ref, onMounted, onBeforeUnmount, toRef } from "vue"; import { ref, onMounted, onBeforeUnmount, toRef } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { color } from "echarts/lib/export"; import { color } from "echarts/lib/export";
@ -66,27 +66,27 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
const dealData = spliteDate(data); const dealData = spliteDate(data);
// 给配置项 // 给配置项
const KlineOption = { 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]
}
},
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: [ grid: [
@ -273,13 +273,13 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
yAxisIndex: 1, yAxisIndex: 1,
data: processedHeatmap, data: processedHeatmap,
coordinateSystem: "cartesian2d", coordinateSystem: "cartesian2d",
// tooltip: {
// // 覆盖全局 tooltip 配置
// formatter: function (params) {
// const date = params.axisValue;
// return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
// }
// },
// tooltip: {
// // 覆盖全局 tooltip 配置
// formatter: function (params) {
// const date = params.axisValue;
// return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
// }
// },
label: { label: {
normal: { normal: {
show: true, show: true,
@ -352,18 +352,37 @@ onBeforeUnmount(() => {
// 组件卸载时销毁图表 // 组件卸载时销毁图表
if (KlineCanvsChart) { if (KlineCanvsChart) {
KlineCanvsChart.dispose(); KlineCanvsChart.dispose();
} }
}); });
</script> </script>
<style scoped> <style scoped>
.qxjmqbox { .qxjmqbox {
height:100%;
height: auto;
width: 100%;
} }
#qxjmqEcharts { #qxjmqEcharts {
width: 100%; width: 100%;
height: 500px; height: 500px;
margin-left:1rem;
top:5rem;
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> </style>

70
src/views/components/emotionalBottomRadar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="bottomRadarRef" id="bottomRadarChart" style="heigh: 100%; width: 100%;"></div>
<div ref="bottomRadarRef" id="bottomRadarChart"></div>
</template> </template>
<script setup> <script setup>
@ -115,18 +115,18 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
}, },
formatter: function (params) { formatter: function (params) {
let result = `<div style="font-weight: bold;">${params[0].name}</div>` let result = `<div style="font-weight: bold;">${params[0].name}</div>`
params.forEach(param => { params.forEach(param => {
let value = param.value let value = param.value
let color = param.color let color = param.color
if (param.seriesType === 'candlestick') { 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>` 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 { } else {
result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>` result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>`
} }
}) })
return result return result
} }
}, },
@ -141,27 +141,32 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
}, },
grid: [ grid: [
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '20px', top: '20px',
bottom: '50%', bottom: '50%',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
}, },
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '320px', top: '320px',
bottom: '25%', bottom: '25%',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
}, },
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '620px', top: '620px',
bottom: '50px', bottom: '50px',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
} }
], ],
@ -301,7 +306,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
axisLabel: { axisLabel: {
width: 50, // 宽度限制 width: 50, // 宽度限制
color: '#000000', color: '#000000',
formatter: function(value, index) {
formatter: function (value, index) {
// 如果没有刻度数量，其他方法获取不到y轴刻度总长 // 如果没有刻度数量，其他方法获取不到y轴刻度总长
if (index === 0) { if (index === 0) {
return '0' return '0'
@ -335,7 +340,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
axisLabel: { axisLabel: {
width: 50, // 宽度限制 width: 50, // 宽度限制
color: '#000000', color: '#000000',
formatter: function(value, index) {
formatter: function (value, index) {
if (index === 5) { if (index === 5) {
return '' return ''
} }
@ -350,10 +355,10 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
} }
}, },
splitNumber: 5, splitNumber: 5,
min: function(value) {
min: function (value) {
return 0 // 最小值 return 0 // 最小值
}, },
max: function(value) {
max: function (value) {
return value.max + 10 // 比最大值高10, 避免最高点和上一个图表x轴重合 return value.max + 10 // 比最大值高10, 避免最高点和上一个图表x轴重合
} }
} }
@ -410,7 +415,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
color0: '#14b143', // 下跌颜色 (绿) color0: '#14b143', // 下跌颜色 (绿)
borderColor: '#ef232a', borderColor: '#ef232a',
borderColor0: '#14b143', borderColor0: '#14b143',
opacity: function(params) {
opacity: function (params) {
// 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明 // 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明
return params.data[2] > params.data[1] ? 0 : 1 return params.data[2] > params.data[1] ? 0 : 1
} }
@ -532,11 +537,31 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
// 使用配置项显示图表 // 使用配置项显示图表
bottomRadarChart.setOption(option) bottomRadarChart.setOption(option)
// 监听窗口大小变化，调整图表尺寸 // 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
adjustGridHeight()
bottomRadarChart.resize() bottomRadarChart.resize()
}) })
function adjustGridHeight() {
if (window.innerWidth <= 768) {
option.grid[0].height = '150px'
option.grid[1].height = '150px'
option.grid[2].height = '150px'
option.grid[0].left = '15%'
option.grid[1].left = '15%'
option.grid[2].left = '15%'
option.grid[1].top = '170px'
option.grid[2].top = '320px'
option.grid[0].width = '80%'
option.grid[1].width = '80%'
option.grid[2].width = '80%'
}
bottomRadarChart.setOption(option)
}
// 初始化时调整高度
adjustGridHeight()
} }
// 暴露给父级 // 暴露给父级
@ -553,11 +578,24 @@ onBeforeUnmount(() => {
</script> </script>
<style> <style>
#bottomRadarChart{
min-width: 100%;
#bottomRadarChart {
height: auto;
width: 100%;
min-width: 100%;
/* min-height: 100%; */ /* min-height: 100%; */
height:1040px;
height: 1040px;
/* padding-bottom: 3rem; */ /* padding-bottom: 3rem; */
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
#bottomRadarChart {
height: auto;
width: 100%;
min-width: 100%;
height: 560px;
}
}
</style> </style>

114
src/views/components/marketTemperature.vue
View File

@ -14,8 +14,8 @@
</div> </div>
<div class="border4"> <div class="border4">
<el-table :data="groupedWDRL" border :row-style="{ height: '8.6vw' }" header-cell-class-name="table_header"
:cell-style="tableCellStyle">
<el-table :data="groupedWDRL" border :row-style="tableRowStyle" header-cell-class-name="table_header"
:cell-style="tableCellStyle" :column-width="cellWidth">
<el-table-column v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']" :key="colIndex" :label="day"> <el-table-column v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']" :key="colIndex" :label="day">
<template #default="{ $index: rowIndex }"> <template #default="{ $index: rowIndex }">
<div v-if="getDayData(rowIndex, colIndex + 1)"> <div v-if="getDayData(rowIndex, colIndex + 1)">
@ -55,7 +55,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, defineExpose, defineProps } from 'vue'
import { ref, computed, onMounted, defineExpose, defineProps, onUnmounted } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const props = defineProps({ const props = defineProps({
@ -147,7 +147,15 @@ function tableCellStyle({ row, column, rowIndex, columnIndex }) {
else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' } else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' }
else return { backgroundColor: '#4b759f', color: 'white' } else return { backgroundColor: '#4b759f', color: 'white' }
} }
function tableRowStyle() {
// 动态调整行高
const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
const rowHeight = containerWidth * 0.1; // 根据容器宽度的比例调整行高
return { height: `${rowHeight}px` };
}
// 动态计算单元格宽度
const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
const cellWidth = containerWidth / 7;
// 初始化图表 // 初始化图表
function initChart(raw, klineDataRawValue, WDRLValue) { function initChart(raw, klineDataRawValue, WDRLValue) {
if (!raw || !klineDataRawValue || !WDRLValue) { if (!raw || !klineDataRawValue || !WDRLValue) {
@ -187,7 +195,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
axisLabel: { color: '#FFA500' }, axisLabel: { color: '#FFA500' },
axisLine: { lineStyle: { color: 'purple', width: 2 } } axisLine: { lineStyle: { color: 'purple', width: 2 } }
}], }],
color: ['#f00', '#9370DB'],
color: ['#f00', 'white'],
series: [ series: [
{ {
name: 'K线', name: 'K线',
@ -222,8 +230,39 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
} }
] ]
}) })
// 监听窗口大小变化
const resizeHandler = () => {
chart.resize()
}
window.addEventListener('resize', resizeHandler)
// 组件卸载时移除监听器
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
})
// 初始调整字体大小
adjustCellFontSize()
} }
// 调整单元格字体大小
function adjustCellFontSize() {
const table = document.querySelector('.border4 .el-table')
if (table) {
const tableWidth = table.offsetWidth
const cellWidth = tableWidth / 7 // 假设一周 7 天
const fontSize = Math.min(cellWidth * 0.15, 20) // 根据单元格宽度动态计算字体大小
const dateElements = document.querySelectorAll('.WDRL_date')
const dataElements = document.querySelectorAll('.WDRL_data')
dateElements.forEach(el => {
el.style.fontSize = `${fontSize}px`
})
dataElements.forEach(el => {
el.style.fontSize = `${fontSize * 0.8}px`
})
}
}
defineExpose({ initChart }) defineExpose({ initChart })
</script> </script>
@ -271,22 +310,77 @@ defineExpose({ initChart })
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
max-width: 80vw; max-width: 80vw;
padding-bottom:7rem;
padding-bottom: 7rem;
} }
.border3 { .border3 {
margin-top: 40px; margin-top: 40px;
border-radius: 8px; border-radius: 8px;
/* padding: 20px; */
margin-left: 12rem;
padding: 20px;
margin-left: -2rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.border4 { .border4 {
margin-top: 40px; margin-top: 40px;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
width:80%;
margin-left:8rem;
width: 80%;
margin-left: 7rem;
}
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
.KlineClass {
width: 100%;
height: 300px;
}
.border4 {
margin-top: 0px;
border-radius: 8px;
padding: 0px;
width: 108%;
margin-left: -8px;
height: auto;
}
.el-table .hidden-columns {
position: absolute;
visibility: hidden;
z-index: -1;
}
.border3 {
margin-top: 40px;
border-radius: 8px;
padding: 20px;
margin-left: -13px;
width: 100%;
height: 100%;
}
.WDRL_date {
font-size: 4.2vw;
}
.month-display {
font-size: 1.8vw;
}
.WDRL_data {
font-size: 3vw;
}
.el-table .cell {
box-sizing: border-box;
line-height: 23px;
overflow: hidden;
overflow-wrap: break-word;
padding: 0 12px;
text-overflow: ellipsis;
white-space: normal;
text-align: center;
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save