EffectScatter 涟漪特效动画散点(气泡)图
基本用法
vue
<script setup>
import { ref } from 'vue'
const data = ref([
[28604, 77, 17096869, "Australia", 1990],
[31163, 77.4, 27662440, "Canada", 1990],
[1516, 68, 1154605773, "China", 1990],
[13670, 74.7, 10582082, "Cuba", 1990],
[28599, 75, 4986705, "Finland", 1990],
[29476, 77.1, 56943299, "France", 1990],
[31476, 75.4, 78958237, "Germany", 1990],
[28666, 78.1, 254830, "Iceland", 1990],
[1777, 57.7, 870601776, "India", 1990],
[29550, 79.1, 122249285, "Japan", 1990],
[2076, 67.9, 20194354, "North Korea", 1990],
[12087, 72, 42972254, "South Korea", 1990],
[24021, 75.4, 3397534, "New Zealand", 1990],
[43296, 76.8, 4240375, "Norway", 1990],
[10088, 70.8, 38195258, "Poland", 1990],
[19349, 69.6, 147568552, "Russia", 1990],
[10670, 67.3, 53994605, "Turkey", 1990],
[26424, 75.7, 57110117, "United Kingdom", 1990],
[37062, 75.4, 252847810, "United States", 1990]
])
function formatterSymbolSize(data){
return Math.sqrt(data[2])/5e2
}
</script>
<template>
<VueEcharts style="width:100%;height:300px;">
<EffectScatter :data="data" :symbolSize="formatterSymbolSize" />
<XAxis />
<YAxis scale />
</VueEcharts>
</template>