You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
9.7 KiB
388 lines
9.7 KiB
<template>
|
|
<!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
|
|
<div class="qxjmqbox">
|
|
<div ref="KlineCanvs" id="qxjmqEcharts"></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'
|
|
}
|
|
},
|
|
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: [
|
|
{ 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: false, // 显示刻度标签
|
|
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: "5%", // 下移数据缩放滑块
|
|
},
|
|
{
|
|
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 {
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#qxjmqEcharts {
|
|
width: 100%;
|
|
height: 500px;
|
|
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>
|