|
@ -5,7 +5,6 @@ |
|
|
<script setup> |
|
|
<script setup> |
|
|
import { ref, onMounted, onBeforeUnmount, toRef, reactive } from 'vue' |
|
|
import { ref, onMounted, onBeforeUnmount, toRef, reactive } from 'vue' |
|
|
import { useLanguage } from '@/utils/languageService' |
|
|
import { useLanguage } from '@/utils/languageService' |
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
import * as echarts from 'echarts' |
|
|
import * as echarts from 'echarts' |
|
|
// import { text } from 'stream/consumers' |
|
|
// import { text } from 'stream/consumers' |
|
|
// import { start } from 'repl' |
|
|
// import { start } from 'repl' |
|
@ -20,8 +19,8 @@ let markLineRegions = reactive([]) |
|
|
const dataMax = ref(null) |
|
|
const dataMax = ref(null) |
|
|
// 设置区域名称 位置 |
|
|
// 设置区域名称 位置 |
|
|
function getNameTop(min, max, regionMin, regionMax, regionMiidle) { |
|
|
function getNameTop(min, max, regionMin, regionMax, regionMiidle) { |
|
|
max = Math.min(max, regionMax) |
|
|
|
|
|
min = Math.max(min, regionMin) |
|
|
|
|
|
|
|
|
// max = Math.min(max, regionMax) |
|
|
|
|
|
// min = Math.max(min, regionMin) |
|
|
|
|
|
|
|
|
// console.log( |
|
|
// console.log( |
|
|
// 'min', |
|
|
// 'min', |
|
@ -40,10 +39,10 @@ function getNameTop(min, max, regionMin, regionMax, regionMiidle) { |
|
|
const chartHeight = qxnlzhqEchartsInstance.getHeight() |
|
|
const chartHeight = qxnlzhqEchartsInstance.getHeight() |
|
|
const topHeight = 40 |
|
|
const topHeight = 40 |
|
|
const bottomHeight = 60 |
|
|
const bottomHeight = 60 |
|
|
const dataZoomHeight = 20 |
|
|
|
|
|
const noHeight = topHeight + bottomHeight + dataZoomHeight |
|
|
|
|
|
// console.log('%', ((max - Number(regionMiidle)) / (max - min)) * (chartHeight - noHeight)) |
|
|
|
|
|
// console.log(chartHeight) |
|
|
|
|
|
|
|
|
const xDateFontSize = window.innerHeight > 769 ? 12 + 5 : 9 + 5 |
|
|
|
|
|
const noHeight = topHeight + bottomHeight + xDateFontSize |
|
|
|
|
|
console.log('%', ((max - Number(regionMiidle)) / (max - min)) * (chartHeight - noHeight)) |
|
|
|
|
|
console.log('chartHeight', chartHeight) |
|
|
// 60: 为x轴占的高度,20: 向上偏移量让文字向上移动 |
|
|
// 60: 为x轴占的高度,20: 向上偏移量让文字向上移动 |
|
|
return ((max - Number(regionMiidle)) / (max - min)) * (chartHeight - noHeight) |
|
|
return ((max - Number(regionMiidle)) / (max - min)) * (chartHeight - noHeight) |
|
|
// return 2.84 |
|
|
// return 2.84 |
|
@ -105,14 +104,16 @@ const generateGraphics = (min, max) => { |
|
|
right: region.right, |
|
|
right: region.right, |
|
|
top: |
|
|
top: |
|
|
window.innerWidth > 769 |
|
|
window.innerWidth > 769 |
|
|
? 40 - 6 + getNameTop(min, max, regionMin, regionMax, safeY) |
|
|
|
|
|
: 40 - 3 + getNameTop(min, max, regionMin, regionMax, safeY), |
|
|
|
|
|
|
|
|
? 40 + getNameTop(min, max, regionMin, regionMax, safeY) - 6 |
|
|
|
|
|
: 40 + getNameTop(min, max, regionMin, regionMax, safeY) - 4.5, |
|
|
// top: 40, |
|
|
// top: 40, |
|
|
style: { |
|
|
style: { |
|
|
text: region.name, |
|
|
text: region.name, |
|
|
fill: region.fontColor, |
|
|
fill: region.fontColor, |
|
|
fontSize: window.innerWidth > 769 ? 12 : 9, |
|
|
fontSize: window.innerWidth > 769 ? 12 : 9, |
|
|
fontWeight: 'bold' |
|
|
|
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
// 关键:使用垂直居中对齐 |
|
|
|
|
|
textVerticalAlign: 'middle' |
|
|
}, |
|
|
}, |
|
|
z: 2 |
|
|
z: 2 |
|
|
}) |
|
|
}) |
|
@ -349,13 +350,21 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let markLineMax = Math.max( |
|
|
let markLineMax = Math.max( |
|
|
Math.ceil(dataMax * 1.02), |
|
|
|
|
|
qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02), |
|
|
|
|
|
stopProfitPrice * 1.02 |
|
|
|
|
|
|
|
|
dataMax * 1.02, |
|
|
|
|
|
stopProfitPrice * 1.02, |
|
|
|
|
|
qxnlzhqData.cc, |
|
|
|
|
|
qxnlzhqData.dd, |
|
|
|
|
|
qxnlzhqData.gg, |
|
|
|
|
|
qxnlzhqData.ht, |
|
|
|
|
|
qxnlzhqData.js, |
|
|
|
|
|
qxnlzhqData.qs, |
|
|
|
|
|
qxnlzhqData.tp, |
|
|
|
|
|
qxnlzhqData.yl, |
|
|
|
|
|
qxnlzhqData.zc |
|
|
) |
|
|
) |
|
|
|
|
|
|
|
|
markLineRegions = regions.filter((region) => { |
|
|
markLineRegions = regions.filter((region) => { |
|
|
return region.max < markLineMax |
|
|
|
|
|
|
|
|
return region.max <= markLineMax |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
console.log('markLineMax', markLineMax, 'markLineRegions', markLineRegions) |
|
|
console.log('markLineMax', markLineMax, 'markLineRegions', markLineRegions) |
|
@ -866,7 +875,8 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
borderColor: 'white' |
|
|
borderColor: 'white' |
|
|
}, |
|
|
}, |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
color: 'white' |
|
|
|
|
|
|
|
|
color: 'white', |
|
|
|
|
|
fontSize: window.innerWidth > 769 ? 12 : 9 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
@ -916,34 +926,67 @@ function initQXNLZHEcharts(kline, qxnlzhqData) { |
|
|
// 刻度标签 |
|
|
// 刻度标签 |
|
|
show: true, |
|
|
show: true, |
|
|
color: 'white', |
|
|
color: 'white', |
|
|
fontSize: window.innerWidth > 769 ? 12 : 9 |
|
|
|
|
|
|
|
|
fontSize: window.innerWidth > 769 ? 12 : 9, |
|
|
|
|
|
formatter: function (value) { |
|
|
|
|
|
return parseFloat(value.toFixed(2)).toString() |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
axisTick: { |
|
|
axisTick: { |
|
|
// 刻度线 |
|
|
// 刻度线 |
|
|
show: true, |
|
|
show: true, |
|
|
color: 'white' |
|
|
color: 'white' |
|
|
}, |
|
|
}, |
|
|
min: |
|
|
|
|
|
qxnlzhqData.dd < stopLossPrice * 0.98 |
|
|
|
|
|
? Math.floor(qxnlzhqData.dd) |
|
|
|
|
|
: Math.floor(stopLossPrice * 0.98), |
|
|
|
|
|
max: Math.round( |
|
|
|
|
|
Math.max( |
|
|
|
|
|
Math.ceil(dataMax * 1.02), |
|
|
|
|
|
qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02), |
|
|
|
|
|
stopProfitPrice * 1.02 |
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
// min: |
|
|
|
|
|
// qxnlzhqData.dd < stopLossPrice * 0.98 |
|
|
|
|
|
// ? Math.floor(qxnlzhqData.dd) |
|
|
|
|
|
// : Math.floor(stopLossPrice * 0.98), |
|
|
|
|
|
// max: Math.round( |
|
|
|
|
|
// Math.max( |
|
|
|
|
|
// Math.ceil(dataMax * 1.02), |
|
|
|
|
|
// qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02), |
|
|
|
|
|
// stopProfitPrice * 1.02 |
|
|
|
|
|
// ) |
|
|
|
|
|
// ) |
|
|
|
|
|
min: Math.min(qxnlzhqData.dd, stopLossPrice * 0.98), |
|
|
|
|
|
max: Math.max( |
|
|
|
|
|
dataMax * 1.02, |
|
|
|
|
|
stopProfitPrice * 1.02, |
|
|
|
|
|
qxnlzhqData.cc, |
|
|
|
|
|
qxnlzhqData.dd, |
|
|
|
|
|
qxnlzhqData.gg, |
|
|
|
|
|
qxnlzhqData.ht, |
|
|
|
|
|
qxnlzhqData.js, |
|
|
|
|
|
qxnlzhqData.qs, |
|
|
|
|
|
qxnlzhqData.tp, |
|
|
|
|
|
qxnlzhqData.yl, |
|
|
|
|
|
qxnlzhqData.zc |
|
|
) |
|
|
) |
|
|
}, |
|
|
}, |
|
|
// 自定义区域名称和区域范围值 位置 |
|
|
// 自定义区域名称和区域范围值 位置 |
|
|
|
|
|
// graphic: generateGraphics( |
|
|
|
|
|
// qxnlzhqData.dd < stopLossPrice * 0.98 |
|
|
|
|
|
// ? Math.floor(qxnlzhqData.dd) |
|
|
|
|
|
// : Math.floor(stopLossPrice * 0.98), |
|
|
|
|
|
// Math.max( |
|
|
|
|
|
// Math.ceil(dataMax * 1.02), |
|
|
|
|
|
// qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02), |
|
|
|
|
|
// stopProfitPrice * 1.02 |
|
|
|
|
|
// ) |
|
|
|
|
|
// ), |
|
|
graphic: generateGraphics( |
|
|
graphic: generateGraphics( |
|
|
qxnlzhqData.dd < stopLossPrice * 0.98 |
|
|
|
|
|
? Math.floor(qxnlzhqData.dd) |
|
|
|
|
|
: Math.floor(stopLossPrice * 0.98), |
|
|
|
|
|
|
|
|
Math.min(qxnlzhqData.dd, stopLossPrice * 0.98), |
|
|
Math.max( |
|
|
Math.max( |
|
|
Math.ceil(dataMax * 1.02), |
|
|
|
|
|
qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02), |
|
|
|
|
|
stopProfitPrice * 1.02 |
|
|
|
|
|
|
|
|
dataMax * 1.02, |
|
|
|
|
|
stopProfitPrice * 1.02, |
|
|
|
|
|
qxnlzhqData.cc, |
|
|
|
|
|
qxnlzhqData.dd, |
|
|
|
|
|
qxnlzhqData.gg, |
|
|
|
|
|
qxnlzhqData.ht, |
|
|
|
|
|
qxnlzhqData.js, |
|
|
|
|
|
qxnlzhqData.qs, |
|
|
|
|
|
qxnlzhqData.tp, |
|
|
|
|
|
qxnlzhqData.yl, |
|
|
|
|
|
qxnlzhqData.zc |
|
|
) |
|
|
) |
|
|
), |
|
|
), |
|
|
series: [ |
|
|
series: [ |
|
|