|
|
|
@ -1,109 +1,46 @@ |
|
|
|
<template> |
|
|
|
<!-- <div ref="KlineCanvs" class="KlineClass"></div> --> |
|
|
|
<div ref="chartContainer" class="KlineClass"></div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import * as echarts from 'echarts' |
|
|
|
import { useDataStore } from '@/store/dataList' |
|
|
|
// import { useLanguage } from '@/utils/languageService' |
|
|
|
// const { translate, t } = useLanguage() |
|
|
|
const KlineCanvs = ref() // Echarts实例 |
|
|
|
const dataStore = useDataStore() |
|
|
|
const klineData = computed(() => dataStore.klineData) |
|
|
|
const chartContainer = ref() // 容器引用 |
|
|
|
const chartInstances = ref([]) // 存储所有实例的数组 |
|
|
|
// 监听数据变化 |
|
|
|
// watch( |
|
|
|
// klineData, |
|
|
|
// (newValue) => { |
|
|
|
// console.log('收到K线数据：', newValue) // 添加调试信息 |
|
|
|
// const currentData = newValue // 深拷贝防止切换回来数据更改 |
|
|
|
// if (currentData) { |
|
|
|
// nextTick(() => { |
|
|
|
// // 创建新容器 |
|
|
|
// const newChartDiv = document.createElement('div') |
|
|
|
// newChartDiv.className = 'dynamic-chart' |
|
|
|
// chartContainer.value.appendChild(newChartDiv) |
|
|
|
|
|
|
|
// // 添加延迟处理 |
|
|
|
// requestAnimationFrame(() => { |
|
|
|
// // 添加尺寸检查 |
|
|
|
// if (newChartDiv.offsetHeight === 0) { |
|
|
|
// console.warn('强制设置备用高度') |
|
|
|
// newChartDiv.style.height = '500px' |
|
|
|
// } |
|
|
|
import { onMounted, watch, ref, computed, nextTick, onUnmounted } from 'vue' |
|
|
|
|
|
|
|
// const newInstance = echarts.init(newChartDiv) |
|
|
|
// chartInstances.value.push(newInstance) |
|
|
|
// KlineCanvsEcharts(currentData, newInstance) |
|
|
|
// }) |
|
|
|
// // KlineCanvsEcharts(currentData) |
|
|
|
// 接收从父组件传入的图表数据 |
|
|
|
const props = defineProps({ |
|
|
|
chartData: { |
|
|
|
type: Object, |
|
|
|
default: null |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
// console.log('容器尺寸:', newChartDiv.offsetWidth, 'x', newChartDiv.offsetHeight) |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { immediate: true, deep: true } |
|
|
|
// ) |
|
|
|
const chartContainer = ref() // 容器引用 |
|
|
|
const chartInstance = ref(null) // 当前图表实例 |
|
|
|
|
|
|
|
// 监听传入的数据变化 |
|
|
|
watch( |
|
|
|
klineData, |
|
|
|
() => props.chartData, |
|
|
|
(newValue) => { |
|
|
|
console.log('收到K线数据：', newValue) |
|
|
|
const currentData = newValue |
|
|
|
if (currentData) { |
|
|
|
console.log('KLine组件收到数据：', newValue) |
|
|
|
if (newValue) { |
|
|
|
nextTick(() => { |
|
|
|
// 创建新容器（不清理旧容器） |
|
|
|
const chartId = `chart-${Date.now()}` |
|
|
|
const newChartDiv = document.createElement('div') |
|
|
|
newChartDiv.className = 'dynamic-chart' |
|
|
|
newChartDiv.id = chartId |
|
|
|
chartContainer.value.appendChild(newChartDiv) |
|
|
|
|
|
|
|
requestAnimationFrame(() => { |
|
|
|
if (newChartDiv.offsetHeight === 0) { |
|
|
|
newChartDiv.style.height = '500px' |
|
|
|
// 仅当容器存在且没有初始化过图表时创建 |
|
|
|
if (chartContainer.value && !chartInstance.value) { |
|
|
|
chartInstance.value = echarts.init(chartContainer.value) |
|
|
|
// 使用深拷贝防止数据被修改 |
|
|
|
const instanceData = JSON.parse(JSON.stringify(newValue)) |
|
|
|
KlineCanvsEcharts(instanceData, chartInstance.value) |
|
|
|
} |
|
|
|
|
|
|
|
// 创建完全独立的实例 |
|
|
|
const newInstance = echarts.init(newChartDiv) |
|
|
|
const instanceData = JSON.parse(JSON.stringify(currentData)) |
|
|
|
|
|
|
|
// 保留所有历史实例 |
|
|
|
chartInstances.value.push({ |
|
|
|
id: chartId, |
|
|
|
instance: newInstance, |
|
|
|
data: instanceData, |
|
|
|
container: newChartDiv // 存储容器引用 |
|
|
|
}) |
|
|
|
|
|
|
|
// 使用深拷贝后的数据渲染 |
|
|
|
KlineCanvsEcharts(instanceData, newInstance) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ immediate: true, deep: true } |
|
|
|
{ immediate: true } |
|
|
|
) |
|
|
|
// 监听数据变化或语言变化 |
|
|
|
// watch( |
|
|
|
// () => t.value, |
|
|
|
// (newLang) => { |
|
|
|
// // 更新 textEcharts 内容并重新渲染图表 |
|
|
|
// if (klineData.value) { |
|
|
|
// const currentData = klineData |
|
|
|
// nextTick(() => { |
|
|
|
// KlineCanvsEcharts(currentData) |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { immediate: true, deep: true } |
|
|
|
// ) |
|
|
|
|
|
|
|
function KlineCanvsEcharts(datatok, instance) { |
|
|
|
// const textEcahrts = t.value // 创建多语言实例 |
|
|
|
const data = datatok.Kline |
|
|
|
// 切割数据方法 |
|
|
|
const data = datatok.Kline |
|
|
|
const spliteDate = (a) => { |
|
|
|
const categoryData = [] |
|
|
|
let value = [] |
|
|
|
@ -124,8 +61,6 @@ function KlineCanvsEcharts(datatok, instance) { |
|
|
|
// 给配置项 |
|
|
|
const KlineOption = { |
|
|
|
title: { |
|
|
|
// text: k_name, |
|
|
|
// Canvs的间隔大小 |
|
|
|
text: datatok.name, |
|
|
|
top: 20, |
|
|
|
left: 20 |
|
|
|
@ -265,54 +200,36 @@ function KlineCanvsEcharts(datatok, instance) { |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
// 创造echarts图 |
|
|
|
// const KlineCanvsChart = echarts.init(KlineCanvs.value) |
|
|
|
// KlineCanvsChart.setOption(KlineOption) |
|
|
|
|
|
|
|
// 应用配置到新实例 |
|
|
|
// 应用配置到图表实例 |
|
|
|
instance.setOption(KlineOption) |
|
|
|
|
|
|
|
// 窗口大小变化时重置图表大小 |
|
|
|
// window.addEventListener('resize', () => { |
|
|
|
// KlineCanvsChart.resize() |
|
|
|
// }) |
|
|
|
|
|
|
|
// 绑定窗口resize事件 |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
instance.resize() |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// fnGetData() |
|
|
|
// 组件卸载时清理资源 |
|
|
|
onUnmounted(() => { |
|
|
|
if (chartInstance.value) { |
|
|
|
chartInstance.value.dispose() |
|
|
|
chartInstance.value = null |
|
|
|
} |
|
|
|
// 移除resize监听 |
|
|
|
window.removeEventListener('resize', () => {}) |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
console.log('KLine组件挂载完成') |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.KlineClass { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
min-height: 600px; |
|
|
|
/* 改为最小高度 */ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 20px; |
|
|
|
/* 添加间距 */ |
|
|
|
} |
|
|
|
|
|
|
|
.chart-container { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
min-height: 400px; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.dynamic-chart { |
|
|
|
width: 100%; |
|
|
|
height: 500px !important; |
|
|
|
/* 强制高度 */ |
|
|
|
flex-shrink: 0; |
|
|
|
/* 禁止高度压缩 */ |
|
|
|
} |
|
|
|
</style> |
hongxilin
2 months ago