chats

src/components/charts.vue

@@ -57,6 +57,7 @@ echarts.use([
 export default Vue.extend({
   props: {
     scale: String,
+    grid: Object,
   },
   data() {
     return {
@@ -123,6 +124,9 @@ export default Vue.extend({
             this.xData = ret.result
             var myChart = echarts.init(this.$refs.charts as HTMLElement)
             myChart.setOption({
+              tooltip: {
+                trigger: 'axis',
+              },
               xAxis: {
                 type: 'category',
                 boundaryGap: false,
@@ -144,12 +148,7 @@ export default Vue.extend({
                   areaStyle: {},
                 },
               ],
-              grid: {
-                top: '10px',
-                bottom: '25px',
-                left: '40px',
-                right: '40px',
-              },
+              grid: this.grid,
             })
           }
         })

src/components/chartsInAddr.vue

+<template>
+  <div class="charts" ref="charts"></div>
+</template>
+
+<script lang="ts">
+import * as echarts from 'echarts/core'
+import {
+  BarChart,
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption,
+} from 'echarts/charts'
+import {
+  TitleComponent,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponent,
+  TooltipComponentOption,
+  GridComponent,
+  GridComponentOption,
+  // 数据集组件
+  DatasetComponent,
+  DatasetComponentOption,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+} from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+import { getAccountRecords, statSearch } from '@/service/api'
+import moment from 'moment'
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LineChart,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+])
+
+import chartsMixin from '@/mixin/componentsMixin/charts'
+import VueTypedMixins from 'vue-typed-mixins'
+
+export default VueTypedMixins(chartsMixin).extend({
+  props: {
+    scale: String,
+    grid: Object,
+  },
+  data() {
+    return {
+      xData: [],
+      seriesData: [],
+    }
+  },
+  methods: {
+    generate() {
+      switch (this.scale) {
+        case 'D1':
+          return this.generateD1()
+        case 'W1':
+          return this.generateW1()
+        case 'M1':
+          return this.generateM1()
+        case 'M6':
+          return this.generateM6()
+        case 'Y1':
+          return this.generateY1()
+      }
+    },
+    draw() {
+      const times = this.generate()
+      times &&
+        getAccountRecords(
+          this.$route.query.address as string,
+          times,
+          'ycc',
+        ).then((ret) => {
+          if (ret.error == null) {
+            this.xData = ret.result
+            const myChart = echarts.init(this.$refs.charts as HTMLElement)
+            myChart.setOption({
+              tooltip: {
+                trigger: 'axis',
+              },
+              xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: times
+                  ?.map((i) => {
+                    return moment.unix(i).format('YYYY-MM-DD')
+                  })
+                  .reverse(),
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  data: this.xData
+                    .map((i: any) => (i && i[0] && i[0].balance) || 0)
+                    .map((i) => i / 1e8)
+                    .reverse(),
+                  type: 'line',
+                  areaStyle: {},
+                },
+              ],
+              grid: this.grid,
+            })
+          }
+        })
+    },
+  },
+  mounted() {
+    this.draw()
+  },
+  watch: {
+    scale(v) {
+      this.draw()
+    },
+  },
+})
+</script>
+<style lang="scss" scoped>
+.charts {
+  width: 100%;
+}
+</style>

src/components/mobile/map/m-numOfOnChainTx.vue

@@ -20,7 +20,16 @@
         </span>
       </div>
     </div>
-    <charts :scale="currentFilter" style="height: 100px;"></charts>
+    <charts
+      :scale="currentFilter"
+      style="height: 100px;"
+      :grid="{
+        top: '15px',
+        bottom: '25px',
+        left: '50px',
+        right: '40px',
+      }"
+    ></charts>
   </div>
 </template>
 

src/components/pc/BlockChainBrowser/AddressOverview/Balance.vue

@@ -29,7 +29,7 @@ import Select from '../../CurrencySelect.vue'
 export default VueTypedMixins().extend({
   components: { Select },
   props: {
-    balance: Number,
+    balance: [Number, Object],
     selectedValue: String,
     frozen: Number,
     optionsList: Array,

src/components/pc/BlockChainBrowser/AddressOverview/index.vue

@@ -32,11 +32,38 @@
         :handleSelectChange="handleSelectChange"
       ></Balance>
       <div class="w-full flex flex-col">
-        <div class="flex-grow flex items-center relative">
-          <img :src="chartNoDataImg" alt="" />
+        <div class="flex-grow relative">
+          <div class="text-right" style="padding-right: 30px;">
+            <span
+              class="text-text-color ml-7 cursor-pointer"
+              v-for="(s, i) in scaleList"
+              :key="i"
+              :class="{
+                ' text-footer-color': s === selectedScale,
+              }"
+              @click="selectedScale = s"
+            >
+              {{ s }}
+            </span>
+          </div>
+          <div
+            style="padding-left: 30px; padding-right: 30px; margin-top: 10px;"
+          >
+            <charts-in-addr
+              style="height: 190px;"
+              :scale="selectedScale"
+              :grid="{
+                top: '10px',
+                bottom: '25px',
+                left: '90px',
+                right: '40px',
+              }"
+            ></charts-in-addr>
+          </div>
+          <!-- <img :src="chartNoDataImg" alt="" />
           <div class="absolute text-text-color text-sm text-center w-full">
             暂无数据
-          </div>
+          </div> -->
         </div>
         <card-show-trade-in-total
           class="flex-shrink-0"
@@ -55,10 +82,11 @@ import AddressOverview from '@/mixin/componentsMixin/AddressOverview'
 import chartNoDataImg from '@/assets/images/blockChainBrowser/address/chart-no-data.png'
 import Balance from './Balance.vue'
 import CardShowTradeInTotal from './CardShowTradeInTotal.vue'
+import ChartsInAddr from '@/components/chartsInAddr.vue'
 export default VueTypedMixins(AddressOverview).extend({
-  components: { CopyBtn, Popover, Balance, CardShowTradeInTotal },
+  components: { CopyBtn, Popover, Balance, CardShowTradeInTotal, ChartsInAddr },
   props: {
-    balance: Number,
+    balance: [Number, Object],
     selectedValue: String,
     frozen: Number,
     optionsList: Array,
@@ -67,6 +95,8 @@ export default VueTypedMixins(AddressOverview).extend({
   data() {
     return {
       chartNoDataImg,
+      scaleList: ['W1', 'M1', 'M6', 'Y1'],
+      selectedScale: 'W1',
     }
   },
 })

src/components/pc/BlockChainBrowser/ChainOverview/ChainTxNumberChart.vue

@@ -16,7 +16,16 @@
         </div>
       </div>
     </div>
-    <charts :scale="currentFilter" style="height: calc(220px - 28px);"></charts>
+    <charts
+      :scale="currentFilter"
+      style="height: calc(220px - 28px);"
+      :grid="{
+        top: '20px',
+        bottom: '25px',
+        left: '60px',
+        right: '40px',
+      }"
+    ></charts>
   </div>
 </template>
 

src/mixin/address.ts

@@ -34,14 +34,6 @@ export default Vue.extend({
   },
   mounted() {
     this.getAllExecBalance();
-    // getAccountRecords(
-    //   // this.$route.query.address as string,
-    //   '15m3SZWnMFB9yhUfn1h5miiZbPp6bEvyQt',
-    //   [Math.floor(new Date().getTime() / 1000)],
-    //   "ycc"
-    // ).then((ret) => {
-    //   console.log(ret, "show ret");
-    // });
   },
   computed: {
     tabList() {

src/mixin/componentsMixin/AddressOverview.ts

@@ -3,7 +3,6 @@ import QRCode from "qrcode";
 import { getAddressTxCount } from "@/service/api";
 import Rpc from "@/utils/Rpc";
 export default Vue.extend({
-  props: {},
   data() {
     return {
       txCount: 0,

src/mixin/componentsMixin/charts.ts

+import Vue from "vue";
+import moment from "moment";
+
+export default Vue.extend({
+  methods: {
+    generateD1() {
+      const list = [];
+      for (let i = 0; i < 7; ++i) {
+        const m = moment()
+          .hour(0)
+          .minute(0)
+          .second(0)
+          .add(-i, "days");
+        list.push(m);
+      }
+      return list.map((i) => i.unix());
+    },
+    generateW1() {
+      const list = [];
+      for (let i = 0; i < 7; ++i) {
+        const m = moment()
+          .hour(0)
+          .minute(0)
+          .second(0)
+          .add(-i * 7, "days");
+        list.push(m);
+      }
+      return list.map((i) => i.unix());
+    },
+    generateM1() {
+      const list = [];
+      for (let i = 0; i < 7; ++i) {
+        const m = moment()
+          .hour(0)
+          .minute(0)
+          .second(0)
+          .add(-i, "month");
+        list.push(m);
+      }
+      return list.map((i) => i.unix());
+    },
+    generateM6() {
+      const list = [];
+      for (let i = 0; i < 7; ++i) {
+        const m = moment()
+          .hour(0)
+          .minute(0)
+          .second(0)
+          .add(-i * 6, "month");
+        list.push(m);
+      }
+      return list.map((i) => i.unix());
+    },
+    generateY1() {
+      const list = [];
+      for (let i = 0; i < 7; ++i) {
+        const m = moment()
+          .hour(0)
+          .minute(0)
+          .second(0)
+          .add(-i, "year");
+        list.push(m);
+      }
+      return list.map((i) => i.unix());
+    },
+  },
+});

src/service/api.ts

@@ -39,13 +39,13 @@ export function getAccountRecords(
       },
       range: [
         {
-          start: i,
+          end: i,
           key: "block_time",
         },
       ],
       sort: [
         {
-          ascending: true,
+          ascending: false,
           key: "height_index",
         },
       ],

src/views/mobile/address/components/m-address-overview/m-address-balance-graph.vue

@@ -5,30 +5,50 @@
         {{ $t('lang.address.accountBalance') }}
       </dir>
       <div class="">
-        <span class="text-text-color ml-3">W1</span>
-        <span class="text-footer-color font-bold ml-3">M1</span>
-        <span class="text-text-color ml-3">M6</span>
-        <span class="text-text-color ml-3">Y1</span>
-        <span class="text-text-color ml-3">ALL</span>
+        <span
+          class="text-text-color ml-3"
+          v-for="(s, i) in scaleList"
+          :key="i"
+          :class="{
+            ' text-footer-color': s === selectedScale,
+          }"
+          @click="selectedScale = s"
+        >
+          {{ s }}
+        </span>
       </div>
     </div>
     <div class="relative">
-      <img :src="noData" alt="" />
+      <!-- <img :src="noData" alt="" />
       <div
         class="absolute text-center left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 text-text-color text-xs"
       >
         暂无数据
-      </div>
+      </div> -->
+      <charts-in-addr
+        :scale="selectedScale"
+        :grid="{
+          top: '10px',
+          bottom: '25px',
+          left: '40px',
+          right: '40px',
+        }"
+        style="height: 110px;"
+      ></charts-in-addr>
     </div>
   </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
 import noData from '@/assets/images/blockChainBrowser/address/mobile-chart-no-data.png'
+import chartsInAddr from '@/components/chartsInAddr.vue'
 export default Vue.extend({
+  components: { chartsInAddr },
   data() {
     return {
       noData,
+      scaleList: ['W1', 'M1', 'M6', 'Y1'],
+      selectedScale: 'W1',
     }
   },
 })