|
|
@@ -5,7 +5,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, onBeforeUnmount, ref, watch, nextTick, toRaw } from 'vue'
|
|
|
+import { onMounted, onBeforeUnmount, ref, watch, nextTick, toRaw, defineExpose } from 'vue'
|
|
|
import * as klinecharts from 'klinecharts'
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -58,6 +58,8 @@ const initChart = () => {
|
|
|
yAxis: { inside: true, axisLine: { show: false }, tickLine: { show: false }, tickText: { color: text, size: 10, paddingLeft: 8 } },
|
|
|
})
|
|
|
|
|
|
+ // 默认加载 MA 和 VOL
|
|
|
+ chartInstance.createTechnicalIndicator('MA', false, { id: 'candle_pane' })
|
|
|
chartInstance.createTechnicalIndicator('VOL', false, { id: 'pane_1', heightRatio: 0.2 })
|
|
|
|
|
|
// 初始加载
|
|
|
@@ -66,27 +68,55 @@ const initChart = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// --- 🔥 核心修复:智能判断是“更新”还是“重置” ---
|
|
|
+// --- 🎯 新增:暴露给父组件的方法 ---
|
|
|
+
|
|
|
+// 1. 设置主图指标
|
|
|
+const setMainIndicator = (name) => {
|
|
|
+ if (!chartInstance) return
|
|
|
+ // 移除常见主图指标
|
|
|
+ chartInstance.removeTechnicalIndicator('candle_pane', 'MA')
|
|
|
+ chartInstance.removeTechnicalIndicator('candle_pane', 'BOLL')
|
|
|
+
|
|
|
+ if (name && name !== 'Hide') {
|
|
|
+ chartInstance.createTechnicalIndicator(name, false, { id: 'candle_pane' })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 2. 设置副图指标
|
|
|
+const setSubIndicator = (name) => {
|
|
|
+ if (!chartInstance) return
|
|
|
+ // 移除常见副图指标
|
|
|
+ const subs = ['VOL', 'MACD', 'KDJ', 'RSI', 'WR']
|
|
|
+ subs.forEach(s => chartInstance.removeTechnicalIndicator('pane_1', s))
|
|
|
+
|
|
|
+ if (name && name !== 'Hide') {
|
|
|
+ chartInstance.createTechnicalIndicator(name, false, { id: 'pane_1', heightRatio: 0.2 })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ setMainIndicator,
|
|
|
+ setSubIndicator
|
|
|
+})
|
|
|
+
|
|
|
+// --- 原有逻辑保持不变 ---
|
|
|
+
|
|
|
watch(() => props.data, (newData) => {
|
|
|
if (!chartInstance) return
|
|
|
|
|
|
const rawData = toRaw(newData)
|
|
|
const currentList = chartInstance.getDataList()
|
|
|
|
|
|
- // 1. 如果新数据为空,清空图表
|
|
|
if (rawData.length === 0) {
|
|
|
chartInstance.clearData()
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- // 2. 如果当前图表为空,直接加载
|
|
|
if (currentList.length === 0) {
|
|
|
chartInstance.applyNewData(rawData)
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- // 3. 🔥 关键判断:
|
|
|
- // 如果第一根 K 线的时间戳变了,说明切换了周期或币种 -> 全量重置
|
|
|
const firstOld = currentList[0]
|
|
|
const firstNew = rawData[0]
|
|
|
if (firstOld.timestamp !== firstNew.timestamp) {
|
|
|
@@ -94,14 +124,12 @@ watch(() => props.data, (newData) => {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- // 4. 如果第一根时间没变,说明是实时跳动或追加 -> 增量更新
|
|
|
if (rawData.length > 0) {
|
|
|
const lastData = rawData[rawData.length - 1]
|
|
|
chartInstance.updateData(lastData)
|
|
|
}
|
|
|
}, { deep: true })
|
|
|
|
|
|
-// 监听精度
|
|
|
watch(() => props.precision, (val) => {
|
|
|
if (chartInstance) {
|
|
|
if (chartInstance.setPriceVolumePrecision) chartInstance.setPriceVolumePrecision(val.price, val.volume)
|