update

src/common/components/echart/echart-base/index.less

@@ -4,6 +4,14 @@
     position      : relative;
     overflow      : hidden;
 
+    &__empty {
+        flex           : 1;
+        display        : flex;
+        justify-content: center;
+        align-items    : center;
+        color          : #7A8A94;
+    }
+
     &__container {
         flex: 1;
 

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

@@ -1,7 +1,10 @@
 <template>
     <div ref="chartElement" class="echart" :style="{ width: width, height: height }">
-        <template v-for="i in options.length" :key="i">
-            <div class="echart__container"></div>
+        <template v-if="empty">
+            <div class="echart__empty">暂无数据</div>
+        </template>
+        <template v-else>
+            <div class="echart__container" v-for="i in options.length" :key="i"></div>
         </template>
     </div>
 </template>
@@ -33,6 +36,10 @@ export default defineComponent({
             type: Boolean,
             default: true,
         },
+        empty: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props) {
         // 图表容器元素
@@ -48,7 +55,7 @@ export default defineComponent({
             watch(
                 () => props.options,
                 (val) => {
-                    if (!props.loading) {
+                    if (!props.loading && !props.empty) {
                         // 设置图表配置项
                         setOptions(val);
                     }

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

@@ -1,5 +1,5 @@
 <template>
-    <echart-base :options="[options]" v-model:loading="loading"></echart-base>
+    <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
 </template>
 
 <script lang="ts">
@@ -35,6 +35,7 @@ export default defineComponent({
     },
     setup(props) {
         const loading = ref(true);
+        const isEmpty = ref(false);
         const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
         const { chartData, options, updateOptions, initOptions } = handleEchart();
 
@@ -307,6 +308,8 @@ export default defineComponent({
                     // 日期升序排序
                     const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
                     handleData(kdata);
+                } else {
+                    isEmpty.value = true;
                 }
                 initOptions(props.seriesType);
             });
@@ -314,6 +317,7 @@ export default defineComponent({
 
         return {
             loading,
+            isEmpty,
             options,
         };
     },

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

@@ -1,5 +1,5 @@
 <template>
-    <echart-base :options="[options]" v-model:loading="loading"></echart-base>
+    <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
 </template>
 
 <script lang="ts">
@@ -26,6 +26,7 @@ export default defineComponent({
     },
     setup(props) {
         const loading = ref(false);
+        const isEmpty = ref(false);
         const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
         const { chartData, options, updateOptions, initOptions } = handleEchart();
 
@@ -165,6 +166,8 @@ export default defineComponent({
                 loading.value = false;
                 if (res.historyDatas.length) {
                     handleData(res);
+                } else {
+                    isEmpty.value = true;
                 }
                 initOptions();
             });
@@ -181,6 +184,7 @@ export default defineComponent({
 
         return {
             loading,
+            isEmpty,
             options,
         };
     },

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

@@ -171,7 +171,7 @@ export function handleEchart() {
                 },
                 {
                     type: 'line',
-                    yAxisId: 'rightRatio', // 关联Y轴右侧涨幅标签
+                    yAxisId: 'rightRatio', // 关联Y轴右侧涨跌幅标签
                     data: datas,
                     symbol: 'none',
                     lineStyle: {