color asset bubble

src/views/WalletAccounts.vue

@@ -407,10 +407,10 @@ export default {
       if (this.calculateByDenom.qty) {
         Object.entries(this.calculateByDenom.qty).forEach(i => {
           const price = this.getPrice(i[0])
-          total.push([i[1], Math.sqrt(price), i[1] * price, i[0]])
+          total.push([Math.sqrt(i[1]), Math.sqrt(price), i[1] * price, i[0]])
         })
       }
-      return total
+      return total.sort((a, b) => b[2] - a[2])
     },
     calculateTotalChange() {
       let total = 0

src/views/components/charts/EchartScatter.vue

@@ -17,7 +17,7 @@ import {
   LegendComponent,
 } from 'echarts/components'
 import VChart, { THEME_KEY } from 'vue-echarts'
-import { formatNumber } from '@/libs/utils'
+import { chartColors, formatNumber } from '@/libs/utils'
 
 use([
   CanvasRenderer,
@@ -43,29 +43,54 @@ export default {
   },
   computed: {
     option() {
+      const colors = chartColors()
+      const series = this.items.filter(x => x[1] > 0).map((item, index) => ({
+        name: item[3],
+        data: [item],
+        type: 'scatter',
+        symbolSize(data) {
+          const r = Math.log10(data[2]) * 5
+          return r < 10 ? 10 : r
+        },
+        emphasis: {
+          focus: 'series',
+          label: {
+            show: true,
+            formatter(param) {
+              return `${param.data[3]}, ${formatNumber(param.data[2], true, 1)}`
+            },
+            position: 'top',
+          },
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(120, 36, 50, 0.5)',
+          shadowOffsetY: 5,
+          color: index > colors.length ? colors[0] : colors[index],
+        },
+      }))
+      const assets = this.items.filter(x => x[1] > 0).map(x => x[3])
       return {
         title: {
           text: '',
           left: '5%',
           top: '3%',
         },
-        // legend: {
+        legend: {
-        //   right: '10%',
+          right: '10%',
-        //   top: '3%',
+          top: '3%',
-        //   data: ['1990', '2015'],
+          data: assets,
-        // },
+        },
-        // grid: {
-        //   left: '8%',
-        //   top: '10%',
-        // },
         xAxis: {
           name: 'Qty',
+          nameLocation: 'center',
           splitLine: {
             lineStyle: {
               type: 'dashed',
             },
           },
           axisLabel: {
+            show: false,
             formatter(param) {
               return formatNumber(param, true, 0)
             },
@@ -73,6 +98,7 @@ export default {
         },
         yAxis: {
           name: 'Price',
+          nameLocation: 'center',
           axisLabel: {
             show: false,
             formatter(param) {
@@ -86,33 +112,34 @@ export default {
           },
           scale: true,
         },
-        series: [
+        series,
-          {
+        // series: [
-            name: '',
+        //   {
-            data: this.items.filter(x => x[1] > 0),
+        //     name: '',
-            type: 'scatter',
+        //     data: this.items.filter(x => x[1] > 0),
-            symbolSize(data) {
+        //     type: 'scatter',
-              const r = Math.log(data[2])
+        //     symbolSize(data) {
-              return r > 50 ? 50 : r
+        //       const r = Math.log10(data[2])
-            },
+        //       return r * 5
-            emphasis: {
+        //     },
-              focus: 'series',
+        //     emphasis: {
-              label: {
+        //       focus: 'series',
-                show: true,
+        //       label: {
-                formatter(param) {
+        //         show: true,
-                  return `${param.data[3]}, ${formatNumber(param.data[2], true, 0)}`
+        //         formatter(param) {
-                },
+        //           return `${param.data[3]}, ${formatNumber(param.data[2], true, 0)}`
-                position: 'top',
+        //         },
-              },
+        //         position: 'top',
-            },
+        //       },
-            itemStyle: {
+        //     },
-              shadowBlur: 10,
+        //     itemStyle: {
-              shadowColor: 'rgba(120, 36, 50, 0.5)',
+        //       shadowBlur: 10,
-              shadowOffsetY: 5,
+        //       shadowColor: 'rgba(120, 36, 50, 0.5)',
-              color: '#28c76f',
+        //       shadowOffsetY: 5,
-            },
+        //       color: '#28c76f',
-          },
+        //     },
-        ],
+        //   },
+        // ],
       }
     },
   },