Browse Source
Merge branch 'ds' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into ds
ds_hxl
Merge branch 'ds' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into ds
ds_hxl
dongqian
4 weeks ago
5 changed files with 1409 additions and 0 deletions
-
8src/router/index.js
-
445src/views/components/emoEnergyConverter.vue
-
354src/views/components/emotionDecod.vue
-
560src/views/components/emotionalBottomRadar.vue
-
42src/views/emotionsEcharts.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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue