图表更新

package.json

@@ -52,4 +52,4 @@
         "prettier": "^1.19.1",
         "typescript": "^4.2.3"
     }
-}
+}

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://192.168.31.135:8080/cfg?key=test_135"
+    "apiUrl": "http://192.168.31.139:8080/cfg?key=test_139"
 }

src/common/components/echart/echart-kline/index.vue

@@ -29,6 +29,7 @@ export default defineComponent({
     },
     setup(props) {
         const loading = ref(true);
+        const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
         const { chartData, options, updateOptions, initOptions } = handleEchart();
 
         // 处理图表数据
@@ -36,48 +37,46 @@ export default defineComponent({
             const datas: number[][] = [],
                 times: string[] = [];
 
-            rawData.forEach((item) => {
+            rawData.forEach((item, index) => {
                 const { o, c, h, l, ts } = item;
                 times.push(moment(ts).format('YYYY-MM-DD HH:mm:ss'));
                 datas.push([o, c, h, l]);
+                // 排除补充数据
+                if (!item.f) {
+                    historyIndexs.push(index);
+                }
             });
 
             return {
                 datas,
                 times,
-                ma5: calcMA(rawData, 5),
-                ma10: calcMA(rawData, 10),
-                ma15: calcMA(rawData, 15),
+                ma5: calcMA(datas, 5),
+                ma10: calcMA(datas, 10),
+                ma15: calcMA(datas, 15),
                 ...calcMACD(datas),
             };
         };
 
         // 计算平均线
-        const calcMA = (rawData: QueryHistoryDatasRsp[], count: number) => {
+        const calcMA = (data: number[][], count: number) => {
             const result: string[] = [];
-            if (rawData.length >= count) {
-                // 所有非补充数据的索引id
-                const dataIndexs = rawData.reduce((prev: number[], cur, index) => {
-                    if (!cur.f) prev.push(index);
-                    return prev;
-                }, []);
+            if (data.length >= count) {
                 // 均线起始位置
-                const startIndex = dataIndexs[count - 1];
-
-                rawData.forEach((item, index) => {
+                const startIndex = historyIndexs[count - 1];
+                data.forEach((item, index) => {
                     if (index < startIndex) {
                         result.push('-');
                     } else {
-                        const j = dataIndexs.findIndex((val) => val === index);
+                        const j = historyIndexs.findIndex((val) => val === index);
                         // 判断是否补充数据
                         if (j === -1) {
                             // 取上个平均值
                             result.push(result[result.length - 1]);
                         } else {
                             // 向后取MA数
-                            const splitIndexs = dataIndexs.slice(j - (count - 1), j + 1);
-                            // 计算总价
-                            const total = splitIndexs.reduce((sum, val) => sum + rawData[val].c, 0);
+                            const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
+                            // 计算总价，data[val][1]=收盘价
+                            const total = maIndexs.reduce((sum, val) => sum + data[val][1], 0);
                             // 计算均线
                             result.push((total / count).toFixed(2));
                         }
@@ -87,19 +86,6 @@ export default defineComponent({
             return result;
         };
 
-        // 计算最后一根平均线
-        const calcLastMA = (rawData: number[][], count: number): string | undefined => {
-            if (rawData.length >= count) {
-                const index = rawData.length - 1;
-                // 向后取MA数
-                const datas = rawData.slice(index - (count - 1), index + 1);
-                // 计算总价，val[1]=收盘价
-                const total = datas.reduce((sum, val) => sum + val[1], 0);
-                // 计算均线
-                return (total / count).toFixed(2);
-            }
-        };
-
         // 计算EMA
         const calcEMA = (data: number[], n: number) => {
             const result: number[] = [],
@@ -136,9 +122,9 @@ export default defineComponent({
         };
 
         // 计算MACD
-        const calcMACD = (rawData: number[][]) => {
+        const calcMACD = (data: number[][]) => {
             const macd = [],
-                close = rawData.map((item) => item[1]), // 收盘价数据
+                close = data.map((item) => item[1]), // 收盘价数据
                 dif = calcDIF(close),
                 dea = calcDEA(dif);
 
@@ -172,9 +158,10 @@ export default defineComponent({
             (val) => {
                 if (!loading.value) {
                     console.log('lastTime', props.quoteData.lasttime);
-                    const { datas, times, ma5, ma10, ma15 } = chartData.value,
-                        lastTime = moment(times[times.length - 1]), // 行情最后时间
-                        newTime = moment(props.quoteData.lasttime); // 实时最新时间
+                    const { datas, times } = chartData.value,
+                        lastIndex = datas.length - 1, // 历史行情最后索引位置
+                        lastTime = moment(times[times.length - 1]), // 历史行情最后时间
+                        newTime = moment(props.quoteData.lasttime); // 实时行情最新时间
 
                     let cycleMilliseconds = 60 * 1000; // 周期毫秒数
 
@@ -203,11 +190,11 @@ export default defineComponent({
                     // 判断时间差是否大于周期时间
                     if (diffTime > cycleMilliseconds) {
                         lastTime.add(cycleMilliseconds, 'ms');
-                        times.push(lastTime.format());
-                        datas.push([val, val, val, val]);
+                        times.push(lastTime.format()); // 添加历史行情时间
+                        datas.push([val, val, val, val]); // 添加历史行情数据
+                        historyIndexs.push(lastIndex + 1); // 添加历史行情索引
                     } else {
-                        const lastIndex = datas.length - 1,
-                            lastData = datas[lastIndex];
+                        const lastData = datas[lastIndex];
                         if (lastData[2] > val) {
                             lastData[2] = val; //更新最低价
                         }
@@ -215,16 +202,12 @@ export default defineComponent({
                             lastData[3] = val; //更新最高价
                         }
                         lastData[1] = val; //更新收盘价
-                        datas[lastIndex] = lastData; // 更新数据
+                        datas[lastIndex] = lastData; // 更新历史行情数据
                     }
 
-                    const _ma5 = calcLastMA(datas, 5),
-                        _ma10 = calcLastMA(datas, 10),
-                        _ma15 = calcLastMA(datas, 15);
-
-                    if (_ma5) ma5[ma5.length - 1] = _ma5;
-                    if (_ma10) ma10[ma10.length - 1] = _ma10;
-                    if (_ma15) ma15[ma15.length - 1] = _ma15;
+                    chartData.value.ma5 = calcMA(datas, 5);
+                    chartData.value.ma10 = calcMA(datas, 10);
+                    chartData.value.ma15 = calcMA(datas, 15);
 
                     const { dif, dea, macd } = calcMACD(datas);
                     chartData.value.dif = dif;

src/common/components/echart/echart-kline/setup.ts

@@ -265,6 +265,7 @@ export function handleEchart() {
                     data: macd,
                     xAxisIndex: 1,
                     yAxisIndex: 1,
+                    barWidth: '20%',
                 },
                 {
                     name: 'DIF',