|
|
@@ -6,351 +6,351 @@
|
|
|
import { defineComponent, PropType, ref, watch, watchEffect } from 'vue';
|
|
|
import { QueryHistoryDatasRsp, QueryQuoteDayRsp, QueryHistoryDatas, CycleType } from '@/services/go/quote/interface';
|
|
|
import { QueryHistoryDatas as queryHistoryDatas } from '@/services/go/quote';
|
|
|
-import { debounce } from '@/utils/time';
|
|
|
+import { _debounce } from '@/utils/time';
|
|
|
import EchartBase from '../echart-base/index.vue';
|
|
|
import { handleEchart, Source } from './setup';
|
|
|
import moment from 'moment';
|
|
|
|
|
|
export default defineComponent({
|
|
|
- name: 'EchartKline',
|
|
|
- components: {
|
|
|
- EchartBase,
|
|
|
+ name: 'EchartKline',
|
|
|
+ components: {
|
|
|
+ EchartBase,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // 实时行情数据
|
|
|
+ quoteData: {
|
|
|
+ type: Object as PropType<QueryQuoteDayRsp>,
|
|
|
+ required: true,
|
|
|
},
|
|
|
- props: {
|
|
|
- // 实时行情数据
|
|
|
- quoteData: {
|
|
|
- type: Object as PropType<QueryQuoteDayRsp>,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- // 周期类型
|
|
|
- cycleType: {
|
|
|
- type: Number as PropType<CycleType>,
|
|
|
- required: true,
|
|
|
- },
|
|
|
- // 指标类型
|
|
|
- seriesType: {
|
|
|
- type: String,
|
|
|
- default: 'MACD',
|
|
|
- },
|
|
|
+ // 周期类型
|
|
|
+ cycleType: {
|
|
|
+ type: Number as PropType<CycleType>,
|
|
|
+ required: true,
|
|
|
},
|
|
|
- setup(props) {
|
|
|
- const loading = ref(true);
|
|
|
- const isEmpty = ref(false);
|
|
|
- const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
|
|
|
- const { chartData, options, updateOptions, initOptions } = handleEchart();
|
|
|
+ // 指标类型
|
|
|
+ seriesType: {
|
|
|
+ type: String,
|
|
|
+ default: 'MACD',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const loading = ref(true);
|
|
|
+ const isEmpty = ref(false);
|
|
|
+ const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
|
|
|
+ const { chartData, options, updateOptions, initOptions } = handleEchart();
|
|
|
|
|
|
- // 处理图表数据
|
|
|
- const handleData = (rawData: QueryHistoryDatasRsp[]): void => {
|
|
|
- const { source } = chartData.value;
|
|
|
- source.length = 0;
|
|
|
- historyIndexs.length = 0;
|
|
|
+ // 处理图表数据
|
|
|
+ const handleData = (rawData: QueryHistoryDatasRsp[]): void => {
|
|
|
+ const { source } = chartData.value;
|
|
|
+ source.length = 0;
|
|
|
+ historyIndexs.length = 0;
|
|
|
|
|
|
- rawData.forEach((item, index) => {
|
|
|
- const { o, c, h, l, ts, tv } = item;
|
|
|
- source.push({
|
|
|
- date: moment(ts).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- open: o,
|
|
|
- close: c,
|
|
|
- lowest: l,
|
|
|
- highest: h,
|
|
|
- ma5: '-',
|
|
|
- ma10: '-',
|
|
|
- ma15: '-',
|
|
|
- vol: tv,
|
|
|
- macd: '-',
|
|
|
- dif: '-',
|
|
|
- dea: '-',
|
|
|
- k: '-',
|
|
|
- d: '-',
|
|
|
- j: '-',
|
|
|
- cci: '-',
|
|
|
- });
|
|
|
- if (!item.f) historyIndexs.push(index); // 排除补充数据
|
|
|
- });
|
|
|
+ rawData.forEach((item, index) => {
|
|
|
+ const { o, c, h, l, ts, tv } = item;
|
|
|
+ source.push({
|
|
|
+ date: moment(ts).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ open: o,
|
|
|
+ close: c,
|
|
|
+ lowest: l,
|
|
|
+ highest: h,
|
|
|
+ ma5: '-',
|
|
|
+ ma10: '-',
|
|
|
+ ma15: '-',
|
|
|
+ vol: tv,
|
|
|
+ macd: '-',
|
|
|
+ dif: '-',
|
|
|
+ dea: '-',
|
|
|
+ k: '-',
|
|
|
+ d: '-',
|
|
|
+ j: '-',
|
|
|
+ cci: '-',
|
|
|
+ });
|
|
|
+ if (!item.f) historyIndexs.push(index); // 排除补充数据
|
|
|
+ });
|
|
|
|
|
|
- calcMA('ma5', 5);
|
|
|
- calcMA('ma10', 10);
|
|
|
- calcMA('ma15', 15);
|
|
|
- calcMACD();
|
|
|
- calcKDJ();
|
|
|
- clacCCI();
|
|
|
- };
|
|
|
+ calcMA('ma5', 5);
|
|
|
+ calcMA('ma10', 10);
|
|
|
+ calcMA('ma15', 15);
|
|
|
+ calcMACD();
|
|
|
+ calcKDJ();
|
|
|
+ clacCCI();
|
|
|
+ };
|
|
|
|
|
|
- // 计算平均线
|
|
|
- const calcMA = (key: keyof Source, count: number) => {
|
|
|
- const { source } = chartData.value;
|
|
|
- let result: Source[keyof Source] = '-';
|
|
|
+ // 计算平均线
|
|
|
+ const calcMA = (key: keyof Source, count: number) => {
|
|
|
+ const { source } = chartData.value;
|
|
|
+ let result: Source[keyof Source] = '-';
|
|
|
|
|
|
- if (source.length >= count) {
|
|
|
- // 均线起始位置
|
|
|
- const startIndex = historyIndexs[count - 1];
|
|
|
- for (let i = 0; i < source.length; i++) {
|
|
|
- if (startIndex !== undefined && i > startIndex) {
|
|
|
- const j = historyIndexs.findIndex((val) => val === i);
|
|
|
- // 判断是否补充数据
|
|
|
- if (j === -1) {
|
|
|
- result = source[i - 1][key]; // 取上个平均值
|
|
|
- } else {
|
|
|
- // 向后取MA数
|
|
|
- const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
|
|
|
- // 计算总价
|
|
|
- const total = maIndexs.reduce((sum, val) => sum + source[val].close, 0);
|
|
|
- // 计算均线
|
|
|
- result = (total / count).toFixed(2);
|
|
|
- }
|
|
|
- }
|
|
|
- (<typeof result>source[i][key]) = result;
|
|
|
- }
|
|
|
+ if (source.length >= count) {
|
|
|
+ // 均线起始位置
|
|
|
+ const startIndex = historyIndexs[count - 1];
|
|
|
+ for (let i = 0; i < source.length; i++) {
|
|
|
+ if (startIndex !== undefined && i > startIndex) {
|
|
|
+ const j = historyIndexs.findIndex((val) => val === i);
|
|
|
+ // 判断是否补充数据
|
|
|
+ if (j === -1) {
|
|
|
+ result = source[i - 1][key]; // 取上个平均值
|
|
|
+ } else {
|
|
|
+ // 向后取MA数
|
|
|
+ const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
|
|
|
+ // 计算总价
|
|
|
+ const total = maIndexs.reduce((sum, val) => sum + source[val].close, 0);
|
|
|
+ // 计算均线
|
|
|
+ result = (total / count).toFixed(2);
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+ (<typeof result>source[i][key]) = result;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 计算EMA
|
|
|
- const calcEMA = (close: number[], n: number) => {
|
|
|
- const ema: number[] = [],
|
|
|
- a = 2 / (n + 1); // 平滑系数
|
|
|
- for (let i = 0; i < close.length; i++) {
|
|
|
- if (i === 0) {
|
|
|
- //第一个EMA(n)是前n个收盘价代数平均
|
|
|
- const result = close.slice(0, n).reduce((sum, val) => sum + val, 0) / n;
|
|
|
- ema.push(result);
|
|
|
- } else {
|
|
|
- // EMA(n) = α × Close + (1 - α) × EMA(n - 1)
|
|
|
- const result = a * close[i] + (1 - a) * ema[i - 1];
|
|
|
- ema.push(result);
|
|
|
- }
|
|
|
- }
|
|
|
- return ema;
|
|
|
- };
|
|
|
+ // 计算EMA
|
|
|
+ const calcEMA = (close: number[], n: number) => {
|
|
|
+ const ema: number[] = [],
|
|
|
+ a = 2 / (n + 1); // 平滑系数
|
|
|
+ for (let i = 0; i < close.length; i++) {
|
|
|
+ if (i === 0) {
|
|
|
+ //第一个EMA(n)是前n个收盘价代数平均
|
|
|
+ const result = close.slice(0, n).reduce((sum, val) => sum + val, 0) / n;
|
|
|
+ ema.push(result);
|
|
|
+ } else {
|
|
|
+ // EMA(n) = α × Close + (1 - α) × EMA(n - 1)
|
|
|
+ const result = a * close[i] + (1 - a) * ema[i - 1];
|
|
|
+ ema.push(result);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return ema;
|
|
|
+ };
|
|
|
|
|
|
- // 计算DEA
|
|
|
- const calcDEA = (dif: number[]) => {
|
|
|
- return calcEMA(dif, 9);
|
|
|
- };
|
|
|
+ // 计算DEA
|
|
|
+ const calcDEA = (dif: number[]) => {
|
|
|
+ return calcEMA(dif, 9);
|
|
|
+ };
|
|
|
|
|
|
- // 计算DIF
|
|
|
- const calcDIF = (close: number[]) => {
|
|
|
- const dif: number[] = [],
|
|
|
- emaShort = calcEMA(close, 12),
|
|
|
- emaLong = calcEMA(close, 26);
|
|
|
+ // 计算DIF
|
|
|
+ const calcDIF = (close: number[]) => {
|
|
|
+ const dif: number[] = [],
|
|
|
+ emaShort = calcEMA(close, 12),
|
|
|
+ emaLong = calcEMA(close, 26);
|
|
|
|
|
|
- for (let i = 0; i < close.length; i++) {
|
|
|
- const result = emaShort[i] - emaLong[i];
|
|
|
- dif.push(result);
|
|
|
- }
|
|
|
- return dif;
|
|
|
- };
|
|
|
+ for (let i = 0; i < close.length; i++) {
|
|
|
+ const result = emaShort[i] - emaLong[i];
|
|
|
+ dif.push(result);
|
|
|
+ }
|
|
|
+ return dif;
|
|
|
+ };
|
|
|
|
|
|
- // 计算MACD
|
|
|
- const calcMACD = () => {
|
|
|
- const { source } = chartData.value,
|
|
|
- close = source.map((item) => item.close),
|
|
|
- dif = calcDIF(close),
|
|
|
- dea = calcDEA(dif);
|
|
|
+ // 计算MACD
|
|
|
+ const calcMACD = () => {
|
|
|
+ const { source } = chartData.value,
|
|
|
+ close = source.map((item) => item.close),
|
|
|
+ dif = calcDIF(close),
|
|
|
+ dea = calcDEA(dif);
|
|
|
|
|
|
- for (let i = 0; i < source.length; i++) {
|
|
|
- source[i].dif = dif[i].toFixed(2);
|
|
|
- source[i].dea = dea[i].toFixed(2);
|
|
|
- source[i].macd = ((dif[i] - dea[i]) * 2).toFixed(2);
|
|
|
- }
|
|
|
- };
|
|
|
+ for (let i = 0; i < source.length; i++) {
|
|
|
+ source[i].dif = dif[i].toFixed(2);
|
|
|
+ source[i].dea = dea[i].toFixed(2);
|
|
|
+ source[i].macd = ((dif[i] - dea[i]) * 2).toFixed(2);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 计算KDJ
|
|
|
- const calcKDJ = () => {
|
|
|
- const { source } = chartData.value;
|
|
|
- for (let i = 0; i < source.length; i++) {
|
|
|
- const item = source[i];
|
|
|
- if (i < 8) {
|
|
|
- item.k = '-';
|
|
|
- item.d = '-';
|
|
|
- item.j = '-';
|
|
|
- } else {
|
|
|
- let rsv = 50; // 如果最低价等于最高价，RSV默认值为50
|
|
|
- if (item.lowest !== item.highest) {
|
|
|
- const n9 = source.slice(i - 8, i + 1).map((item) => item.close), // 取前9个收盘价
|
|
|
- max = Math.max(...n9),
|
|
|
- min = Math.min(...n9);
|
|
|
- // 计算RSV
|
|
|
- rsv = ((item.close - min) / (max - min)) * 100;
|
|
|
- }
|
|
|
+ // 计算KDJ
|
|
|
+ const calcKDJ = () => {
|
|
|
+ const { source } = chartData.value;
|
|
|
+ for (let i = 0; i < source.length; i++) {
|
|
|
+ const item = source[i];
|
|
|
+ if (i < 8) {
|
|
|
+ item.k = '-';
|
|
|
+ item.d = '-';
|
|
|
+ item.j = '-';
|
|
|
+ } else {
|
|
|
+ let rsv = 50; // 如果最低价等于最高价，RSV默认值为50
|
|
|
+ if (item.lowest !== item.highest) {
|
|
|
+ const n9 = source.slice(i - 8, i + 1).map((item) => item.close), // 取前9个收盘价
|
|
|
+ max = Math.max(...n9),
|
|
|
+ min = Math.min(...n9);
|
|
|
+ // 计算RSV
|
|
|
+ rsv = ((item.close - min) / (max - min)) * 100;
|
|
|
+ }
|
|
|
|
|
|
- const yestK = Number(source[i - 1].k); // 取前一日K值
|
|
|
- const yestD = Number(source[i - 1].d); // 取前一日D值
|
|
|
+ const yestK = Number(source[i - 1].k); // 取前一日K值
|
|
|
+ const yestD = Number(source[i - 1].d); // 取前一日D值
|
|
|
|
|
|
- if (isNaN(yestK) || isNaN(yestD)) {
|
|
|
- // 如果前一日的K值或D值不存在则默认值为50
|
|
|
- item.k = '50';
|
|
|
- item.d = '50';
|
|
|
- item.j = '50';
|
|
|
- } else {
|
|
|
- const k = (2 / 3) * yestK + (1 / 3) * rsv,
|
|
|
- d = (2 / 3) * yestD + (1 / 3) * yestK,
|
|
|
- j = 3 * k - 2 * d;
|
|
|
+ if (isNaN(yestK) || isNaN(yestD)) {
|
|
|
+ // 如果前一日的K值或D值不存在则默认值为50
|
|
|
+ item.k = '50';
|
|
|
+ item.d = '50';
|
|
|
+ item.j = '50';
|
|
|
+ } else {
|
|
|
+ const k = (2 / 3) * yestK + (1 / 3) * rsv,
|
|
|
+ d = (2 / 3) * yestD + (1 / 3) * yestK,
|
|
|
+ j = 3 * k - 2 * d;
|
|
|
|
|
|
- item.k = k.toFixed(2);
|
|
|
- item.d = d.toFixed(2);
|
|
|
- item.j = j.toFixed(2);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+ item.k = k.toFixed(2);
|
|
|
+ item.d = d.toFixed(2);
|
|
|
+ item.j = j.toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 计算CCI
|
|
|
- const clacCCI = () => {
|
|
|
- const { source } = chartData.value;
|
|
|
- for (let i = 0; i < source.length; i++) {
|
|
|
- const item = source[i];
|
|
|
- if (i < 13) {
|
|
|
- item.cci = '-';
|
|
|
- } else {
|
|
|
- const tp = (item.close + item.lowest + item.highest) / 3, // (收盘价 + 最低价 + 最高价) / 3
|
|
|
- n14 = source.slice(i - 13, i + 1), // 取前14条数据
|
|
|
- ma = n14.reduce((sum, e) => sum + (e.close + e.lowest + e.highest) / 3, 0) / 14, // 计算前14条数据的(TP)价总和÷N
|
|
|
- md = n14.reduce((sum, e) => sum + Math.abs(ma - (e.close + e.lowest + e.highest) / 3), 0) / 14, // 计算前14条数据的(MA-TP)价总和÷N
|
|
|
- result = (tp - ma) / md / 0.015;
|
|
|
+ // 计算CCI
|
|
|
+ const clacCCI = () => {
|
|
|
+ const { source } = chartData.value;
|
|
|
+ for (let i = 0; i < source.length; i++) {
|
|
|
+ const item = source[i];
|
|
|
+ if (i < 13) {
|
|
|
+ item.cci = '-';
|
|
|
+ } else {
|
|
|
+ const tp = (item.close + item.lowest + item.highest) / 3, // (收盘价 + 最低价 + 最高价) / 3
|
|
|
+ n14 = source.slice(i - 13, i + 1), // 取前14条数据
|
|
|
+ ma = n14.reduce((sum, e) => sum + (e.close + e.lowest + e.highest) / 3, 0) / 14, // 计算前14条数据的(TP)价总和÷N
|
|
|
+ md = n14.reduce((sum, e) => sum + Math.abs(ma - (e.close + e.lowest + e.highest) / 3), 0) / 14, // 计算前14条数据的(MA-TP)价总和÷N
|
|
|
+ result = (tp - ma) / md / 0.015;
|
|
|
|
|
|
- item.cci = result.toFixed(2);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+ item.cci = result.toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 更新图表K线数据
|
|
|
- const updateChartData = () => {
|
|
|
- const { source } = chartData.value,
|
|
|
- lastIndex = source.length - 1, // 历史行情最后索引位置
|
|
|
- lastTime = moment(source[lastIndex].date), // 历史行情最后时间
|
|
|
- newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
|
|
|
- newPrice = props.quoteData.last; // 实时行情最新价
|
|
|
+ // 更新图表K线数据
|
|
|
+ const updateChartData = () => {
|
|
|
+ const { source } = chartData.value,
|
|
|
+ lastIndex = source.length - 1, // 历史行情最后索引位置
|
|
|
+ lastTime = moment(source[lastIndex].date), // 历史行情最后时间
|
|
|
+ newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
|
|
|
+ newPrice = props.quoteData.last; // 实时行情最新价
|
|
|
|
|
|
- let cycleMilliseconds = 60 * 1000; // 周期毫秒数
|
|
|
+ let cycleMilliseconds = 60 * 1000; // 周期毫秒数
|
|
|
|
|
|
- switch (props.cycleType) {
|
|
|
- case CycleType.minutes5:
|
|
|
- cycleMilliseconds *= 5;
|
|
|
- break;
|
|
|
- case CycleType.minutes30:
|
|
|
- cycleMilliseconds *= 30;
|
|
|
- break;
|
|
|
- case CycleType.minutes60:
|
|
|
- cycleMilliseconds *= 60;
|
|
|
- break;
|
|
|
- case CycleType.hours2:
|
|
|
- cycleMilliseconds *= 2 * 60;
|
|
|
- break;
|
|
|
- case CycleType.Hours4:
|
|
|
- cycleMilliseconds *= 4 * 60;
|
|
|
- break;
|
|
|
- case CycleType.days:
|
|
|
- cycleMilliseconds *= 24 * 60;
|
|
|
- break;
|
|
|
- }
|
|
|
+ switch (props.cycleType) {
|
|
|
+ case CycleType.minutes5:
|
|
|
+ cycleMilliseconds *= 5;
|
|
|
+ break;
|
|
|
+ case CycleType.minutes30:
|
|
|
+ cycleMilliseconds *= 30;
|
|
|
+ break;
|
|
|
+ case CycleType.minutes60:
|
|
|
+ cycleMilliseconds *= 60;
|
|
|
+ break;
|
|
|
+ case CycleType.hours2:
|
|
|
+ cycleMilliseconds *= 2 * 60;
|
|
|
+ break;
|
|
|
+ case CycleType.Hours4:
|
|
|
+ cycleMilliseconds *= 4 * 60;
|
|
|
+ break;
|
|
|
+ case CycleType.days:
|
|
|
+ cycleMilliseconds *= 24 * 60;
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
- const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
|
|
|
+ const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
|
|
|
|
|
|
- if (diffTime > cycleMilliseconds * 2) {
|
|
|
- // 时间间隔超过两个周期，重新请求历史数据
|
|
|
- } else {
|
|
|
- // 判断时间差是否大于周期时间
|
|
|
- if (diffTime > cycleMilliseconds) {
|
|
|
- lastTime.add(cycleMilliseconds, 'ms');
|
|
|
- // 添加历史行情
|
|
|
- source.push({
|
|
|
- date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- open: newPrice,
|
|
|
- close: newPrice,
|
|
|
- lowest: newPrice,
|
|
|
- highest: newPrice,
|
|
|
- ma5: '-',
|
|
|
- ma10: '-',
|
|
|
- ma15: '-',
|
|
|
- vol: 0,
|
|
|
- macd: '-',
|
|
|
- dif: '-',
|
|
|
- dea: '-',
|
|
|
- k: '-',
|
|
|
- d: '-',
|
|
|
- j: '-',
|
|
|
- cci: '-',
|
|
|
- });
|
|
|
- historyIndexs.push(lastIndex + 1); // 添加历史行情索引
|
|
|
- } else {
|
|
|
- const lastData = source[lastIndex];
|
|
|
- if (lastData.lowest > newPrice) {
|
|
|
- lastData.lowest = newPrice; //更新最低价
|
|
|
- }
|
|
|
- if (lastData.highest < newPrice) {
|
|
|
- lastData.highest = newPrice; //更新最高价
|
|
|
- }
|
|
|
- lastData.close = newPrice; //更新收盘价
|
|
|
- }
|
|
|
+ if (diffTime > cycleMilliseconds * 2) {
|
|
|
+ // 时间间隔超过两个周期，重新请求历史数据
|
|
|
+ } else {
|
|
|
+ // 判断时间差是否大于周期时间
|
|
|
+ if (diffTime > cycleMilliseconds) {
|
|
|
+ lastTime.add(cycleMilliseconds, 'ms');
|
|
|
+ // 添加历史行情
|
|
|
+ source.push({
|
|
|
+ date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ open: newPrice,
|
|
|
+ close: newPrice,
|
|
|
+ lowest: newPrice,
|
|
|
+ highest: newPrice,
|
|
|
+ ma5: '-',
|
|
|
+ ma10: '-',
|
|
|
+ ma15: '-',
|
|
|
+ vol: 0,
|
|
|
+ macd: '-',
|
|
|
+ dif: '-',
|
|
|
+ dea: '-',
|
|
|
+ k: '-',
|
|
|
+ d: '-',
|
|
|
+ j: '-',
|
|
|
+ cci: '-',
|
|
|
+ });
|
|
|
+ historyIndexs.push(lastIndex + 1); // 添加历史行情索引
|
|
|
+ } else {
|
|
|
+ const lastData = source[lastIndex];
|
|
|
+ if (lastData.lowest > newPrice) {
|
|
|
+ lastData.lowest = newPrice; //更新最低价
|
|
|
+ }
|
|
|
+ if (lastData.highest < newPrice) {
|
|
|
+ lastData.highest = newPrice; //更新最高价
|
|
|
+ }
|
|
|
+ lastData.close = newPrice; //更新收盘价
|
|
|
+ }
|
|
|
|
|
|
- calcMA('ma5', 5);
|
|
|
- calcMA('ma10', 10);
|
|
|
- calcMA('ma15', 15);
|
|
|
- calcMACD();
|
|
|
- calcKDJ();
|
|
|
- clacCCI();
|
|
|
+ calcMA('ma5', 5);
|
|
|
+ calcMA('ma10', 10);
|
|
|
+ calcMA('ma15', 15);
|
|
|
+ calcMACD();
|
|
|
+ calcKDJ();
|
|
|
+ clacCCI();
|
|
|
|
|
|
- // 延迟图表更新，减少卡顿
|
|
|
- debounce(() => {
|
|
|
- updateOptions(props.seriesType);
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- };
|
|
|
+ // 延迟图表更新，减少卡顿
|
|
|
+ _debounce(() => {
|
|
|
+ updateOptions(props.seriesType);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 监听行情最新价推送
|
|
|
- watch(
|
|
|
- () => props.quoteData.last,
|
|
|
- () => {
|
|
|
- if (!loading.value) {
|
|
|
- updateChartData();
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
+ // 监听行情最新价推送
|
|
|
+ watch(
|
|
|
+ () => props.quoteData.last,
|
|
|
+ () => {
|
|
|
+ if (!loading.value) {
|
|
|
+ updateChartData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
- // 监听指标类型
|
|
|
- watch(
|
|
|
- () => props.seriesType,
|
|
|
- (val) => {
|
|
|
- if (!loading.value) {
|
|
|
- updateOptions(val);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
+ // 监听指标类型
|
|
|
+ watch(
|
|
|
+ () => props.seriesType,
|
|
|
+ (val) => {
|
|
|
+ if (!loading.value) {
|
|
|
+ updateOptions(val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
|
|
|
- // 监听周期选择变化
|
|
|
- watchEffect(() => {
|
|
|
- loading.value = true;
|
|
|
- const params: QueryHistoryDatas = {
|
|
|
- cycleType: props.cycleType,
|
|
|
- goodsCode: props.quoteData.goodscode.toUpperCase(),
|
|
|
- count: 1440,
|
|
|
- };
|
|
|
- // 查询K线数据
|
|
|
- queryHistoryDatas(params)
|
|
|
- .then((res) => {
|
|
|
- if (res.length) {
|
|
|
- isEmpty.value = false;
|
|
|
- // 日期升序排序
|
|
|
- const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
|
|
|
- handleData(kdata);
|
|
|
- } else {
|
|
|
- isEmpty.value = true;
|
|
|
- }
|
|
|
- initOptions(props.seriesType);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- isEmpty.value = true;
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
+ // 监听周期选择变化
|
|
|
+ watchEffect(() => {
|
|
|
+ loading.value = true;
|
|
|
+ const params: QueryHistoryDatas = {
|
|
|
+ cycleType: props.cycleType,
|
|
|
+ goodsCode: props.quoteData.goodscode.toUpperCase(),
|
|
|
+ count: 1440,
|
|
|
+ };
|
|
|
+ // 查询K线数据
|
|
|
+ queryHistoryDatas(params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.length) {
|
|
|
+ isEmpty.value = false;
|
|
|
+ // 日期升序排序
|
|
|
+ const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
|
|
|
+ handleData(kdata);
|
|
|
+ } else {
|
|
|
+ isEmpty.value = true;
|
|
|
+ }
|
|
|
+ initOptions(props.seriesType);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ isEmpty.value = true;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
- return {
|
|
|
- loading,
|
|
|
- isEmpty,
|
|
|
- options,
|
|
|
- };
|
|
|
- },
|
|
|
+ return {
|
|
|
+ loading,
|
|
|
+ isEmpty,
|
|
|
+ options,
|
|
|
+ };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
huangbin