|
|
@@ -0,0 +1,82 @@
|
|
|
+<template>
|
|
|
+ <div ref="chartRef" style="width:375px;height: 300px;background-color: #fff;"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shallowRef } from 'vue'
|
|
|
+import { Chart } from 'hqchart'
|
|
|
+import { queryHistoryDatas } from '@/services/api/quote'
|
|
|
+import { useFuturesStore } from '@/stores'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+const chartRef = shallowRef()
|
|
|
+const historyData = shallowRef<Model.HistoryDatasRsp[]>([])
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+const quote = futuresStore.getGoodsQuote('AGTD')
|
|
|
+
|
|
|
+// 获取历史行情
|
|
|
+queryHistoryDatas({
|
|
|
+ data: {
|
|
|
+ cycleType: 1,
|
|
|
+ goodsCode: 'AGTD',
|
|
|
+ count: 1440,
|
|
|
+ }
|
|
|
+}).then((res) => {
|
|
|
+ historyData.value = res.data.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf())
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ 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)
|
|
|
+ data.PreventDefault = true
|
|
|
+ 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'),
|
|
|
+ ]))
|
|
|
+ })
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ Windows: [
|
|
|
+ { Index: 'MA', Modify: false, Change: false },
|
|
|
+ { Index: 'VOL', Modify: false, Change: false }
|
|
|
+ ],
|
|
|
+ IsShowCorssCursorInfo: true,
|
|
|
+ Border: {
|
|
|
+ Left: 1,
|
|
|
+ Right: 1, //右边间距
|
|
|
+ Top: 25,
|
|
|
+ Bottom: 25,
|
|
|
+ },
|
|
|
+ KLine: {
|
|
|
+ Right: 1,
|
|
|
+ // [30001-32000) 秒周期
|
|
|
+ // 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,
|
|
|
+ IsShowTooltip: true
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ const resource = Chart.JSChart.GetResource()
|
|
|
+ resource.FrameLogo.Text = ''
|
|
|
+
|
|
|
+ const chart = Chart.JSChart.Init(chartRef.value)
|
|
|
+ chart.SetOption(option)
|
|
|
+})
|
|
|
+</script>
|