|
|
@@ -1,63 +1,166 @@
|
|
|
<template>
|
|
|
<div ref="chartRef" style="width:375px;height: 300px;background-color: #fff;"></div>
|
|
|
<ul>
|
|
|
- <li @click="onChange(0)">日线</li>
|
|
|
- <li @click="onChange(4)">1分钟线</li>
|
|
|
+ <li @click="changePeriod(4)">1分钟</li>
|
|
|
+ <li @click="changePeriod(5)">5分钟</li>
|
|
|
</ul>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef } from 'vue'
|
|
|
+import { shallowRef, onMounted } from 'vue'
|
|
|
import { Chart } from 'hqchart'
|
|
|
+import { ChartCycleType } from '@/constants/chart'
|
|
|
import { queryHistoryDatas } from '@/services/api/quote'
|
|
|
import { useFuturesStore } from '@/stores'
|
|
|
import moment from 'moment'
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ goodsCode: {
|
|
|
+ type: String,
|
|
|
+ default: 'XAUUSD'
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const { getGoodsQuote, quoteWatch } = useFuturesStore()
|
|
|
+const quote = getGoodsQuote(props.goodsCode)
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
|
|
|
const chartRef = shallowRef()
|
|
|
+const chartCycleType = shallowRef(ChartCycleType.Minutes) // 周期类型
|
|
|
+const chartInstance = shallowRef() // 图表实例
|
|
|
+
|
|
|
+subscribe.start(props.goodsCode)
|
|
|
+
|
|
|
+let updateChart: (opt: { symbol: string; data: (string | number)[][]; }) => void = () => ({})
|
|
|
+
|
|
|
+// 切换周期
|
|
|
+const changePeriod = (period: number) => {
|
|
|
+ switch (period) {
|
|
|
+ case 1:
|
|
|
+ chartCycleType.value = ChartCycleType.Week
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ chartCycleType.value = ChartCycleType.Minutes
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ chartCycleType.value = ChartCycleType.Minutes5
|
|
|
+ break
|
|
|
+ }
|
|
|
+ //chartInstance.value.ChangeSymbol('600000.sh') // 切换股票
|
|
|
+ chartInstance.value.ChangePeriod(period) // 切换周期
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
const historyData = shallowRef<Model.HistoryDatasRsp[]>([])
|
|
|
-const futuresStore = useFuturesStore()
|
|
|
-const quote = futuresStore.getGoodsQuote('AGTD')
|
|
|
|
|
|
-const chartInstance = shallowRef() // 图表实例
|
|
|
|
|
|
-const onChange = (period: number) => {
|
|
|
- chartInstance.value.ChangePeriod(period)
|
|
|
+const reqeustHistoryData = () => {
|
|
|
+ // 获取历史行情
|
|
|
+ queryHistoryDatas({
|
|
|
+ data: {
|
|
|
+ cycleType: chartCycleType.value,
|
|
|
+ goodsCode: props.goodsCode,
|
|
|
+ count: 1440,
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ const data = res.data.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf())
|
|
|
+ historyData.value = data
|
|
|
+
|
|
|
+ updateChart({
|
|
|
+ symbol: '600000.sh', // 股票代码(必填)
|
|
|
+ data: data.map((e) => ([
|
|
|
+ moment(e.ts).format('YYYYMMDD'),
|
|
|
+ quote.value?.preclose ?? 0,
|
|
|
+ e.o,
|
|
|
+ e.h,
|
|
|
+ e.l,
|
|
|
+ e.c,
|
|
|
+ e.tv,
|
|
|
+ e.tt,
|
|
|
+ moment(e.ts).format('HHmm'),
|
|
|
+ ]))
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-// 获取历史行情
|
|
|
-queryHistoryDatas({
|
|
|
- data: {
|
|
|
- cycleType: 1,
|
|
|
- goodsCode: 'AGTD',
|
|
|
- count: 1440,
|
|
|
+quoteWatch(props.goodsCode, (q) => {
|
|
|
+ const { last, lasttime } = q
|
|
|
+ if (last && lasttime) {
|
|
|
+
|
|
|
+ const lastIndex = historyData.value.length - 1 // 历史数据最后索引位置
|
|
|
+
|
|
|
+ const oldTime = lastIndex === -1 ? moment(lasttime) : moment(historyData.value[lastIndex].ts) // 历史行情最后时间
|
|
|
+ const diffTime = moment(lasttime).valueOf() - oldTime.valueOf() // 计算时间差
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 判断时间差是否大于周期时间
|
|
|
+ if (lastIndex === -1 || diffTime > 60 * 1000) {
|
|
|
+ historyData.value.push({
|
|
|
+ o: last,
|
|
|
+ h: last,
|
|
|
+ l: last,
|
|
|
+ c: last,
|
|
|
+ tv: 0,
|
|
|
+ tt: 0,
|
|
|
+ hv: 0,
|
|
|
+ s: 0,
|
|
|
+ ts: lasttime,
|
|
|
+ f: false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 更新列表中最后一条记录的数据
|
|
|
+ const record = historyData.value[lastIndex]
|
|
|
+ if (record.l > last) {
|
|
|
+ record.l = last // 更新最低价
|
|
|
+ }
|
|
|
+ if (record.h < last) {
|
|
|
+ record.h = last // 更新最高价
|
|
|
+ }
|
|
|
+ record.c = last // 更新收盘价
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // updateChart({
|
|
|
+ // symbol: '600000.sh',
|
|
|
+ // data: historyData.value.map((e) => ([
|
|
|
+ // moment(e.ts).format('YYYYMMDD'),
|
|
|
+ // quote.value?.preclose ?? 0,
|
|
|
+ // e.o,
|
|
|
+ // e.h,
|
|
|
+ // e.l,
|
|
|
+ // e.c,
|
|
|
+ // e.tv,
|
|
|
+ // e.tt,
|
|
|
+ // moment(e.ts).format('HHmm'),
|
|
|
+ // ]))
|
|
|
+ // })
|
|
|
}
|
|
|
-}).then((res) => {
|
|
|
- historyData.value = res.data.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf())
|
|
|
+})
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ // https://blog.csdn.net/jones2000/article/details/90272733
|
|
|
const option = {
|
|
|
- Symbol: '600000.sh', // 必填
|
|
|
+ Symbol: '600000.sh', // 股票代码(必填)
|
|
|
Type: '历史K线图',
|
|
|
IsAutoUpdate: false,
|
|
|
- NetworkFilter: (data: { Name: string; PreventDefault: boolean; }, callback: (opt: { symbol: string; data: (string | number)[][]; }) => void) => {
|
|
|
- console.log('历史K线图', data)
|
|
|
+ IsApiPeriod: true, // 每次切换周期请求接口数据
|
|
|
+ NetworkFilter: (data: { Name: string; Explain: string; PreventDefault: boolean; }, callback: (opt: { symbol: string; data: (string | number)[][]; }) => void) => {
|
|
|
data.PreventDefault = true
|
|
|
+ // https://blog.csdn.net/jones2000/article/details/100557649
|
|
|
switch (data.Name) {
|
|
|
- // https://blog.csdn.net/jones2000/article/details/100557649
|
|
|
case 'KLineChartContainer::ReqeustHistoryMinuteData':
|
|
|
- callback({
|
|
|
- symbol: '600000.sh', // 必填
|
|
|
- data: historyData.value.map((e) => ([
|
|
|
- moment(e.ts).format('YYYYMMDD'),
|
|
|
- quote.value?.preclose ?? 0,
|
|
|
- e.o,
|
|
|
- e.h,
|
|
|
- e.l,
|
|
|
- e.c,
|
|
|
- e.tv,
|
|
|
- e.tt,
|
|
|
- moment(e.ts).format('HHmm'),
|
|
|
- ]))
|
|
|
- })
|
|
|
+ updateChart = callback
|
|
|
+ reqeustHistoryData()
|
|
|
+ break
|
|
|
+ case 'KLineChartContainer::RequestHistoryData':
|
|
|
+ updateChart = callback
|
|
|
+ reqeustHistoryData()
|
|
|
break
|
|
|
}
|
|
|
},
|
|
|
@@ -78,9 +181,17 @@ queryHistoryDatas({
|
|
|
// 0=日线 1=周线 2=月线 3=年线 9=季线 [40001-50000) 自定义日线
|
|
|
// 4=1分钟 5=5分钟 6=15分钟 7=30分钟 8=60分钟 11=120分钟 12=240分钟 [20001-30000) 自定义分钟
|
|
|
Period: 4,
|
|
|
- PageSize: 70,
|
|
|
+ PageSize: 50,
|
|
|
IsShowTooltip: true
|
|
|
},
|
|
|
+ Frame: [
|
|
|
+ {
|
|
|
+ IsShowRightText: false // 是否显示Y轴右侧刻度
|
|
|
+ },
|
|
|
+ {
|
|
|
+ IsShowRightText: false // 是否显示Y轴右侧刻度
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
|
|
|
const resource = Chart.JSChart.GetResource()
|