|
|
@@ -6,14 +6,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, watch, computed } from 'vue'
|
|
|
+import { shallowRef, shallowReactive, watch, computed } from 'vue'
|
|
|
import { Chart } from 'hqchart'
|
|
|
import { changeUnit, handleNumberValue } from '@/filters'
|
|
|
import { ChartCycleType } from '@/constants/chart'
|
|
|
import { useFuturesStore } from '@/stores'
|
|
|
import { useDataset } from '@/hooks/hqchart/candlestick/dataset'
|
|
|
-import { NetworkFilterData, NetworkFilterCallback } from '@/hooks/hqchart/candlestick/types'
|
|
|
-import { KLineChartContainer } from './types'
|
|
|
+import { KLineChartContainer, NetworkFilterData, NetworkFilterCallback } from '@/hooks/hqchart/candlestick/types'
|
|
|
import HQChart from '@/components/base/hqchart/index.vue'
|
|
|
import Tabs from '@/components/base/tabs/index.vue'
|
|
|
|
|
|
@@ -37,13 +36,12 @@ const { quoteWatch, getGoodsQuote } = useFuturesStore()
|
|
|
const goods = getGoodsQuote(props.goodsCode)
|
|
|
const chartInstance = shallowRef() // 图表实例
|
|
|
|
|
|
-const tabs = [
|
|
|
+const tabs = shallowReactive([
|
|
|
{ label: 'MACD', value: 'MACD' },
|
|
|
- { label: 'VOL', value: 'VOL' },
|
|
|
{ label: 'KDJ', value: 'KDJ' },
|
|
|
{ label: 'RSI', value: 'RSI' },
|
|
|
- { label: 'CCI', value: 'CCI' }
|
|
|
-]
|
|
|
+ { label: 'WR', value: 'WR' }
|
|
|
+])
|
|
|
|
|
|
// 自定义品种小数位
|
|
|
// https://blog.csdn.net/jones2000/article/details/106592730/
|
|
|
@@ -82,8 +80,7 @@ const chartOption = {
|
|
|
NetworkFilter: (data: NetworkFilterData, callback: NetworkFilterCallback) => networkFilter(data, callback),
|
|
|
// https://blog.csdn.net/jones2000/article/details/102928907
|
|
|
Windows: [
|
|
|
- { Index: 'MA', Change: false, Modify: false },
|
|
|
- { Index: 'MACD', Change: false, Modify: false, Close: false }
|
|
|
+ { Index: 'MA', Change: false, Modify: false, Close: false }
|
|
|
],
|
|
|
IsCorssOnlyDrawKLine: true, // 十字光标只能在K线上
|
|
|
CorssCursorTouchEnd: true, // 手指离开屏幕 隐藏十字光标
|
|
|
@@ -140,14 +137,18 @@ const chartOption = {
|
|
|
// 自定义标题栏,参考源码 DynamicKLineTitlePainting.GetFormatTitle
|
|
|
paint.GetFormatTitle = (data) => {
|
|
|
const { Open, High, Low, Close, Vol, YClose } = data.Data
|
|
|
+ const AryText = [
|
|
|
+ { Text: '开:' + handleNumberValue(Open), Color: paint.GetColor(Open, YClose) },
|
|
|
+ { Text: '高:' + handleNumberValue(High), Color: paint.GetColor(High, YClose) },
|
|
|
+ { Text: '低:' + handleNumberValue(Low), Color: paint.GetColor(Low, YClose) },
|
|
|
+ { Text: '收:' + handleNumberValue(Close), Color: paint.GetColor(Close, YClose) },
|
|
|
+ { Text: '量:' + changeUnit(Vol), Color: paint.VolColor }
|
|
|
+ ]
|
|
|
+ if (goods.value?.trademode === 99) {
|
|
|
+ AryText.pop()
|
|
|
+ }
|
|
|
return {
|
|
|
- AryText: [
|
|
|
- { Text: '开:' + handleNumberValue(Open), Color: paint.GetColor(Open, YClose) },
|
|
|
- { Text: '高:' + handleNumberValue(High), Color: paint.GetColor(High, YClose) },
|
|
|
- { Text: '低:' + handleNumberValue(Low), Color: paint.GetColor(Low, YClose) },
|
|
|
- { Text: '收:' + handleNumberValue(Close), Color: paint.GetColor(Close, YClose) },
|
|
|
- { Text: '量:' + changeUnit(Vol), Color: paint.VolColor }
|
|
|
- ]
|
|
|
+ AryText
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -161,6 +162,12 @@ const changeIndex = (index: number) => {
|
|
|
}
|
|
|
|
|
|
const onReady = (chart: unknown) => {
|
|
|
+ if (goods.value?.trademode === 99) {
|
|
|
+ chartOption.Windows.push({ Index: 'MACD', Change: true, Modify: false, Close: false })
|
|
|
+ } else {
|
|
|
+ tabs.unshift({ label: 'VOL', value: 'VOL' })
|
|
|
+ chartOption.Windows.push({ Index: 'VOL', Change: true, Modify: false, Close: false })
|
|
|
+ }
|
|
|
chartInstance.value = chart
|
|
|
chartInstance.value.SetOption(chartOption)
|
|
|
}
|