|
|
|
@ -4,10 +4,10 @@ |
|
|
|
<div class="border3"> |
|
|
|
<section class="chart-section"> |
|
|
|
<div> |
|
|
|
<div class="trapezoid"> |
|
|
|
<!-- <div class="trapezoid"> |
|
|
|
<span>{{ companyName }}</span> |
|
|
|
<span>{{ stockCode }}</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div ref="KlineCanvs" class="KlineClass"></div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
@ -28,31 +28,18 @@ |
|
|
|
</div> |
|
|
|
<div class="calendar"> |
|
|
|
<div v-for="row in 5" :key="row" class="calendarCol"> |
|
|
|
<div |
|
|
|
v-for="item in currentData.slice((row - 1) * 7, row * 7)" |
|
|
|
:key="item" |
|
|
|
class="calendarRow" |
|
|
|
> |
|
|
|
<div |
|
|
|
class="calendarItem" |
|
|
|
:style="{ backgroundColor: item.color }" |
|
|
|
> |
|
|
|
<div v-for="item in currentData.slice((row - 1) * 7, row * 7)" :key="item" class="calendarRow"> |
|
|
|
<div class="calendarItem" :style="{ backgroundColor: item.color }"> |
|
|
|
<div v-if="item.month" class="month"> |
|
|
|
<div class="monthContent"> |
|
|
|
{{ months[item.month - 1] }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="calendarItemTitle">{{ item.day }}</div> |
|
|
|
<div |
|
|
|
class="calendarItemContent" |
|
|
|
v-if="item.stock_temperature == ''" |
|
|
|
> |
|
|
|
<div class="calendarItemContent" v-if="item.stock_temperature == ''"> |
|
|
|
<img :src="suoding" alt="锁定" class="ciImg" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="calendarItemContent" |
|
|
|
v-else-if="item.stock_temperature == '休市'" |
|
|
|
> |
|
|
|
<div class="calendarItemContent" v-else-if="item.stock_temperature == '休市'"> |
|
|
|
休市 |
|
|
|
</div> |
|
|
|
<div class="calendarItemContent" v-else> |
|
|
|
@ -84,9 +71,9 @@ |
|
|
|
{{ getDayData(rowIndex, colIndex + 1).market_temperature }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<template v-if="isBothRest(rowIndex, colIndex + 1)">休市</template> |
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<span v-if="getDayData(rowIndex, colIndex + 1).stock_temperature"> |
|
|
|
{{ getDayData(rowIndex, colIndex + 1).stock_temperature }} |
|
|
|
</span> |
|
|
|
@ -95,15 +82,15 @@ |
|
|
|
{{ getDayData(rowIndex, colIndex + 1).market_temperature }} |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div v-else-if="shouldShowRest(rowIndex, colIndex + 1)"> |
|
|
|
<p class="WDRL_date">休市</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> --> |
|
|
|
</template> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div v-else-if="shouldShowRest(rowIndex, colIndex + 1)"> |
|
|
|
<p class="WDRL_date">休市</p> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -182,7 +169,7 @@ const indexCodes = [ |
|
|
|
"I63", |
|
|
|
"VNINDE", |
|
|
|
]; |
|
|
|
const isIndexCode = computed(() => indexCodes.includes(props.code)); |
|
|
|
const isIndexCode = computed(() => indexCodes.includes(props.stockCode)); |
|
|
|
|
|
|
|
const currentData = ref([]); |
|
|
|
const fetchCalendarData = () => { |
|
|
|
@ -341,6 +328,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
console.log(props) |
|
|
|
|
|
|
|
// 如果已存在图表实例，先销毁 |
|
|
|
if (chartInstance) { |
|
|
|
@ -394,10 +382,10 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
const chartHeight = size.viewSize[1]; |
|
|
|
const tooltipWidth = size.contentSize[0]; |
|
|
|
const tooltipHeight = size.contentSize[1]; |
|
|
|
|
|
|
|
|
|
|
|
// 检测是否为移动设备 |
|
|
|
const isMobile = window.innerWidth <= 768; |
|
|
|
|
|
|
|
|
|
|
|
if (isMobile) { |
|
|
|
// 移动端：固定在顶部中央 |
|
|
|
return { |
|
|
|
@ -408,17 +396,17 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
// 桌面端：智能定位 |
|
|
|
let x = point[0]; |
|
|
|
let y = point[1]; |
|
|
|
|
|
|
|
|
|
|
|
// 防止tooltip超出右边界 |
|
|
|
if (x + tooltipWidth > chartWidth) { |
|
|
|
x = chartWidth - tooltipWidth - 10; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 防止tooltip超出下边界 |
|
|
|
if (y + tooltipHeight > chartHeight) { |
|
|
|
y = chartHeight - tooltipHeight - 10; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return [Math.max(10, x), Math.max(10, y)]; |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -443,8 +431,8 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
color: '#fff', |
|
|
|
fontSize: window.innerWidth <= 768 ? 10 : 12 // 移动端使用更小字体 |
|
|
|
}, |
|
|
|
extraCssText: window.innerWidth <= 768 ? |
|
|
|
'max-width: 280px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);' : |
|
|
|
extraCssText: window.innerWidth <= 768 ? |
|
|
|
'max-width: 280px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);' : |
|
|
|
'max-width: 350px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);', |
|
|
|
formatter: function (params) { |
|
|
|
if (params && params.length > 0) { |
|
|
|
@ -452,16 +440,16 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
const fontSize = isMobile ? '10px' : '12px'; |
|
|
|
const lineHeight = isMobile ? '1.3' : '1.5'; |
|
|
|
const marginBottom = isMobile ? '4px' : '6px'; |
|
|
|
|
|
|
|
|
|
|
|
let result = `<div style="font-weight: bold; color: #fff; margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">日期: ${params[0].name}</div>`; |
|
|
|
|
|
|
|
|
|
|
|
params.forEach((param) => { |
|
|
|
if (param.seriesType === "candlestick") { |
|
|
|
const open = param.data[1]; |
|
|
|
const close = param.data[2]; |
|
|
|
const low = param.data[3]; |
|
|
|
const high = param.data[4]; |
|
|
|
|
|
|
|
|
|
|
|
if (isMobile) { |
|
|
|
// 移动端简化显示 |
|
|
|
result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`; |
|
|
|
@ -535,7 +523,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) { |
|
|
|
color: "#FFFFFF", |
|
|
|
fontSize: window.innerWidth <= 768 ? 10 : 12, // 移动端使用更小字体 |
|
|
|
fontWeight: "bold", |
|
|
|
formatter: function(value) { |
|
|
|
formatter: function (value) { |
|
|
|
// 确保四位数完整显示 |
|
|
|
return value.toString(); |
|
|
|
}, |
|
|
|
@ -792,10 +780,10 @@ defineExpose({ initChart }); |
|
|
|
/* padding: 20px; */ |
|
|
|
max-width: 80vw; |
|
|
|
padding-bottom: 10%; |
|
|
|
display:flex; |
|
|
|
flex-direction:column; |
|
|
|
justify-content:center; |
|
|
|
align-items:center; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.border3 { |
|
|
|
@ -837,8 +825,8 @@ defineExpose({ initChart }); |
|
|
|
/* 手机端适配样式 */ |
|
|
|
@media only screen and (max-width: 768px) { |
|
|
|
|
|
|
|
.container{ |
|
|
|
padding-bottom:16% |
|
|
|
.container { |
|
|
|
padding-bottom: 16% |
|
|
|
} |
|
|
|
|
|
|
|
.KlineClass { |
|
|
|
@ -969,7 +957,8 @@ defineExpose({ initChart }); |
|
|
|
left: -2.5px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
border-top: 3px solid #00ffff; /* 左上角颜色 */ |
|
|
|
border-top: 3px solid #00ffff; |
|
|
|
/* 左上角颜色 */ |
|
|
|
border-left: 3px solid #00ffff; |
|
|
|
border-top-left-radius: 8px; |
|
|
|
} |
|
|
|
@ -981,7 +970,8 @@ defineExpose({ initChart }); |
|
|
|
right: -2px; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
border-bottom: 3px solid #00ffff; /* 右下角颜色 */ |
|
|
|
border-bottom: 3px solid #00ffff; |
|
|
|
/* 右下角颜色 */ |
|
|
|
border-right: 3px solid #00ffff; |
|
|
|
border-bottom-right-radius: 8px; |
|
|
|
} |
|
|
|
@ -993,6 +983,7 @@ defineExpose({ initChart }); |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 0px; |
|
|
|
@ -1056,6 +1047,7 @@ defineExpose({ initChart }); |
|
|
|
width: 13.5%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.calendarItem { |
|
|
|
border: 1px solid #0060af; |
|
|
|
width: 100%; |
|
|
|
|
宋杰
1 day ago