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

情绪解码器图表绘制

aiEmotion
ducaixia 4 weeks ago
parent
d7d11132a3
commit
a28d825b72
2 changed files with 344 additions and 0 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. 339
      src/views/components/emotionDecod.vue
  2. 5
      src/views/emotionsEcharts.vue

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

@ -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>

5
src/views/emotionsEcharts.vue
View File

@ -1,12 +1,15 @@
<template> <template>
AI情绪大模型 AI情绪大模型
<emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter> <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
<emotionDecod ref="emotionDecodRef"></emotionDecod>
</template> </template>
<script setup> <script setup>
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue' import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'
import emotionDecod from '@/views/components/emotionDecod.vue'
import { ref, onMounted, onBeforeUnmount, toRef } from 'vue'; import { ref, onMounted, onBeforeUnmount, toRef } from 'vue';
import axios from "axios"; import axios from "axios";
const emoEnergyConverterRef = ref(null) const emoEnergyConverterRef = ref(null)
const emotionDecodRef = ref(null)
onMounted(()=>{ onMounted(()=>{
axios({ axios({
@ -24,6 +27,8 @@ onMounted(()=>{
}).then((res) => { }).then((res) => {
nextTick(()=>{ nextTick(()=>{
emoEnergyConverterRef.value.initQXNLZHEcharts(res.data.data.KLine20, res.data.data.QXNLZHQ) emoEnergyConverterRef.value.initQXNLZHEcharts(res.data.data.KLine20, res.data.data.QXNLZHQ)
emotionDecodRef.value.initQXNLZHEcharts(res.data.data.KLine20, res.data.data.QXJMQ)
}) })
}) })
}) })

Write Preview
Loading…
Cancel
Save