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.
339 lines
9.3 KiB
339 lines
9.3 KiB
<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>
|