diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue index 572b09a..b99ae10 100644 --- a/src/views/components/emotionDecod.vue +++ b/src/views/components/emotionDecod.vue @@ -20,37 +20,36 @@ const heatmapData = ref([]); // 存储热力图数据 const rawData2 = ref([]); const lineData3 = ref([]); function initQXNLZHEcharts(kline, qxnlzhqData) { - // qxnlzhqData[9][9]=1 - // qxnlzhqData[2][9]=1 + 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 + 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; //[0, 1, 'orange'] + heatmapData.value = processedHeatmap; // 处理折线图数据 lineData3.value = rawData2.value.map((item) => item[9]); - // console.log('k图:', rawData2.value) console.log("热力图数据:", heatmapData.value); console.log("折线图数据:", lineData3.value); const data = kline; @@ -69,6 +68,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { const KlineOption = { tooltip: { trigger: "item", // 触发类型 坐标轴触发 + // axisPointer: { + // type: "cross", // 十字准星效果 + // crossStyle: { + // color: "#999" + // } + // } }, //控制坐标轴 @@ -91,14 +96,6 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { 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' } // 默认透明 - // ] }, ], // 横坐标内容 @@ -195,7 +192,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { type: "value", axisLine: { show: true, - lineStyle: { color: "#FED88D" }, + lineStyle: { color: "#8392A5" }, }, splitLine: { show: !1, @@ -263,26 +260,38 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { 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", +// tooltip: { +// // 覆盖全局 tooltip 配置 +// formatter: function (params) { +// const date = params.axisValue; +// return `${date}:${params.data[2]}`; // 直接取数据中的第3个元素(数值) +// } +// }, label: { normal: { show: true, color: "#fff", // 文本颜色 formatter: function (params) { - return params.value[2]; // 低版本使用 params.value 访问完整数据 + 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 - } + normal: { + color: "transparent", + borderWidth: 2, + }, }, emphasis: { itemStyle: { @@ -299,9 +308,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { data: lineData3.value, color: "black", lineStyle: { - color: "white", // 线的颜色 + normal: { + color: "red", + }, + }, + + symbol: "none", + emphasis: { + showSymbol: true, }, - symbol: "none", // 去掉点 }, ], };