cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

color asset bubble

Browse Source
This commit is contained in:
liangping 2022-03-11 19:42:34 +08:00
parent 65039e46bf
commit 1300ec3c3f
2 changed files with 66 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/WalletAccounts.vue
View File

@ -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

101
src/views/components/charts/EchartScatter.vue
View File

@ -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: {
// right: '10%',
// top: '3%',
// data: ['1990', '2015'],
// },
// grid: {
// left: '8%',
// top: '10%',
// },
legend: {
right: '10%',
top: '3%',
data: assets,
},
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: [
{
name: '',
data: this.items.filter(x => x[1] > 0),
type: 'scatter',
symbolSize(data) {
const r = Math.log(data[2])
return r > 50 ? 50 : r
},
emphasis: {
focus: 'series',
label: {
show: true,
formatter(param) {
return `${param.data[3]}, ${formatNumber(param.data[2], true, 0)}`
},
position: 'top',
},
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: '#28c76f',
},
},
],
series,
// series: [
// {
// name: '',
// data: this.items.filter(x => x[1] > 0),
// type: 'scatter',
// symbolSize(data) {
// const r = Math.log10(data[2])
// return r * 5
// },
// emphasis: {
// focus: 'series',
// label: {
// show: true,
// formatter(param) {
// return `${param.data[3]}, ${formatNumber(param.data[2], true, 0)}`
// },
// position: 'top',
// },
// },
// itemStyle: {
// shadowBlur: 10,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 5,
// color: '#28c76f',
// },
// },
// ],
}
},
},