Browse Source

情绪解码器大于3位数时倾斜字体;

master
宋杰 2 weeks ago
parent
commit
16ac6734cd
  1. 99
      src/views/components/emotionDecod.vue

99
src/views/components/emotionDecod.vue

@ -64,6 +64,16 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
} }
return { categoryData, value }; return { categoryData, value };
}; };
let normalHeatmap = []
let rotateHeatmap = []
processedHeatmap.forEach((item) => {
if (item[2] > 999) {
rotateHeatmap.push(item)
} else {
normalHeatmap.push(item)
}
})
const dealData = spliteDate(data); const dealData = spliteDate(data);
// //
const KlineOption = { const KlineOption = {
@ -73,29 +83,29 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
axisPointer: { axisPointer: {
type: 'cross', // type: 'cross', //
lineStyle: { lineStyle: {
color: 'grey',
width: 1,
type: 'dashed'
},
color: 'grey',
width: 1,
type: 'dashed'
},
crossStyle: { crossStyle: {
color: '#999' color: '#999'
}, },
label: { label: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: '#fff',
borderColor: '#fff',
borderWidth: 1
}
backgroundColor: 'rgba(0, 0, 0, 0.8)',
color: '#fff',
borderColor: '#fff',
borderWidth: 1
}
}, },
backgroundColor: 'rgba(232, 232, 242, 0.87)', backgroundColor: 'rgba(232, 232, 242, 0.87)',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 8,
padding: 10,
textStyle: {
color: 'black',
fontSize: 12
},
borderColor: '#fff',
borderWidth: 1,
borderRadius: 8,
padding: 10,
textStyle: {
color: 'black',
fontSize: 12
},
formatter: function (params) { formatter: function (params) {
if (!params || params.length === 0) return '' if (!params || params.length === 0) return ''
@ -123,13 +133,13 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
left: window.outerWidth <= 768 ? "20%" : "10%", left: window.outerWidth <= 768 ? "20%" : "10%",
}, },
{ {
top: window.innerWidth <= 768 ? "40%" :"45%",
top: window.innerWidth <= 768 ? "40%" : "45%",
height: "35%", height: "35%",
width: window.innerWidth <= 768 ? "70%" : "80%", width: window.innerWidth <= 768 ? "70%" : "80%",
left: window.outerWidth <= 768 ? "20%" : "10%", left: window.outerWidth <= 768 ? "20%" : "10%",
}, },
{ {
top: window.innerWidth <= 768 ? "75%" : "80%",
top: window.innerWidth <= 768 ? "75%" : "80%",
height: "2%", height: "2%",
width: window.innerWidth <= 768 ? "70%" : "80%", width: window.innerWidth <= 768 ? "70%" : "80%",
left: window.outerWidth <= 768 ? "20%" : "10%", left: window.outerWidth <= 768 ? "20%" : "10%",
@ -358,7 +368,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
gridIndex: 1, gridIndex: 1,
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1, yAxisIndex: 1,
data: processedHeatmap,
data: normalHeatmap,
coordinateSystem: "cartesian2d", coordinateSystem: "cartesian2d",
tooltip: { tooltip: {
trigger: "item", trigger: "item",
@ -406,6 +416,55 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
}, },
}, },
{ {
name: '热力矩阵',
type: 'heatmap',
gridIndex: 1,
xAxisIndex: 1,
yAxisIndex: 1,
data: rotateHeatmap,
coordinateSystem: 'cartesian2d',
tooltip: {
trigger: 'item',
// tooltip
formatter: function (params) {
console.log('params', params)
return `${params.value[2]}` // 3
}
},
label: {
normal: {
rotate: -60,
show: true,
color: 'white', //
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: '#FEB736FF', fontWeight: 'bold' },
normal: { color: 'grey' }
}
}
},
itemStyle: {
normal: {
color: 'transparent',
borderWidth: 2
}
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name: "凸起", name: "凸起",
type: "line", type: "line",
xAxisIndex: 2, xAxisIndex: 2,

Loading…
Cancel
Save