li.shaoyi 2 yıl önce
ebeveyn
işleme
a8c5a4efc5

+ 3 - 2
src/components/base/echarts/core.ts

@@ -3,7 +3,7 @@
  */
 import * as echarts from 'echarts/core'
 import { CandlestickChart, CandlestickSeriesOption, BarChart, BarSeriesOption, LineChart, LineSeriesOption } from 'echarts/charts'
-import { MarkLineComponent, DatasetComponent, DataZoomComponent, GridComponent, GridComponentOption, TooltipComponent, DataZoomComponentOption, DatasetComponentOption } from 'echarts/components'
+import { MarkLineComponent, DatasetComponent, DataZoomComponent, GridComponent, GridComponentOption, TooltipComponent, DataZoomComponentOption, DatasetComponentOption,GraphicComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
 
 echarts.use([
@@ -15,7 +15,8 @@ echarts.use([
     BarChart,
     CandlestickChart,
     CanvasRenderer,
-    TooltipComponent
+    TooltipComponent,
+    GraphicComponent
 ])
 
 type ECOption = echarts.ComposeOption<CandlestickSeriesOption | BarSeriesOption | LineSeriesOption | GridComponentOption | DataZoomComponentOption | DatasetComponentOption>

+ 19 - 3
src/hooks/echarts@next/line/options.ts

@@ -5,6 +5,10 @@ import { EchartsDataset } from './types'
 export function useOptions() {
     const getOption = (dataset: EchartsDataset) => {
         const { line, decimal, yAxisMax, yAxisMin } = dataset
+        const maxValue = Math.max(...line.source.price) // 取最高价
+        const minValue = Math.min(...line.source.price) // 取最低价
+        const interval = (maxValue - minValue) / 4
+
         const option: ECOption = {
             dataset: line,
             animation: false,
@@ -15,6 +19,18 @@ export function useOptions() {
                 bottom: '12px',
                 containLabel: true,
             },
+            graphic: {
+                type: 'text',
+                left: 'center',
+                top: 'middle',
+                silent: true,
+                invisible: line.source.price.length > 0,   // 有数据就隐藏
+                style: {
+                    fill: '#9d9d9d',
+                    text: '暂无数据',
+                    fontSize: '12px'
+                }
+            },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
@@ -44,7 +60,7 @@ export function useOptions() {
             xAxis: {
                 type: 'category',
                 axisLabel: {
-                    color: '#ccc',
+                    color: '#aaa',
                     formatter: (val: string) => {
                         return moment(val).format('MM-DD')
                     },
@@ -68,9 +84,9 @@ export function useOptions() {
                         color: '#f2f2f2',
                     },
                 },
-                splitNumber: 3,
+                interval,
                 axisLabel: {
-                    color: '#ccc',
+                    color: '#aaa',
                     formatter: (val: number) => val?.toFixed(decimal),
                 }
             },

+ 1 - 1
src/packages/mobile/views/notice/list/index.vue

@@ -12,7 +12,7 @@
         </template>
         <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
             :page-count="pageCount" @refresh="onRefresh">
-            <CellGroup class="article" style="margin-top: .2rem;" v-if="dataList.length">
+            <CellGroup class="article" style="background-color: transparent;padding-top: .2rem;" v-if="dataList.length">
                 <template v-for="(item, index) in dataList" :key="index">
                     <Cell :value="formatDate(item.createtime, 'YYYY-MM-DD')" @click="openDetail(item)">
                         <template #title>

+ 7 - 6
src/packages/tjmd/views/home/main/Index.vue

@@ -13,16 +13,17 @@
           <SwipeItem v-for="(list, i) in goodsGroup" :key="i">
             <ul>
               <template v-for="(item, n) in list" :key="n">
-                <li :class="item.refgoodscode === goodsCode ? 'is-active' : ''" @click="onTabChange(item.refgoodscode)">
+                <li :class="[item.lastColor, item.refgoodscode === goodsCode ? 'is-active' : '']"
+                  @click="onTabChange(item.refgoodscode)">
                   <div>
-                    <b>{{ item.goodsname }}</b>
+                    <b style="color: #444;">{{ item.goodsname }}</b>
                   </div>
-                  <div :class="item.lastColor">
+                  <div>
                     <b>{{ item.last }}</b>
                   </div>
                   <div>
-                    <span :class="item.lastColor">{{ item.rise }}</span>
-                    <span :class="item.lastColor">{{ item.change }}</span>
+                    <span>{{ item.rise }}</span>
+                    <span>{{ item.change }}</span>
                   </div>
                 </li>
               </template>
@@ -45,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef,  defineAsyncComponent, computed, nextTick, watch, watchEffect } from 'vue'
+import { shallowRef, defineAsyncComponent, computed, nextTick, watch, watchEffect } from 'vue'
 import { Cell, CellGroup, PullRefresh, Swipe, SwipeItem } from 'vant'
 import { formatDate, parsePercent, handleNumberValue, formatDecimal } from '@/filters'
 import { queryQuoteGoodsList } from '@/services/api/swap'

+ 8 - 12
src/packages/tjmd/views/home/main/index.less

@@ -94,22 +94,18 @@
             line-height: .44rem;
 
             li {
-                position: relative;
                 flex: 1;
                 padding: .12rem 0;
 
-                &::before {
-                    content: '';
-                    position: absolute;
-                    bottom: 0;
-                    left: 50%;
-                    height: .04rem;
-                    width: 50%;
-                    transform: translateX(-50%);
-                }
-
                 &.is-active {
-                    background-color: #fbfbfb;
+ 
+                    &.g-price-up{
+                        background-color: #fff3f3;
+                    }
+
+                    &.g-price-down{
+                        background-color: #eefff2;
+                    }
 
                     &::before {
                         background-color: transparent