colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式
series: [
{
type: "effectScatter",
coordinateSystem: "geo",
rippleEffect: {
brushType: "stroke",
},
showEffectOn: "render",
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(14,245,209,0.2)' //打点颜色
},
{
offset: 0.8,
color: 'rgba(14,245,209,0.2)'
},
{
offset: 1,
color: 'rgba(14,245,209,1)'
},
],
global: false, // 缺省为 false
},
},
label: {
show: true,// 打点显示数据
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function (para) {
return "{cnNum|" + para.data.name + "}"; //打点的显示以及样式定义为cnNum
},
rich: {
cnNum: {
fontSize: 10.5,//文字大小
fontWeight: 'bold',//文字加粗
color: "#ABF8FF",
},
},
},
symbol: "circle",
//气泡大小
symbolSize: function (val) {
if (val[2] === 0) {
return 0;
}
let a = (maxSize4Pin - minSize4Pin) / (max - min);
let b = maxSize4Pin - a * max;
return a * val[2] + b * 1.2;
},
data: convertData(data),
zlevel: 1,
},
]
const maxSize4Pin = 100,
minSize4Pin = 20;
上一篇文章,
vue3+elementPlus:实现数字滚动效果(用于大屏可视化)-****博客文章浏览阅读46次。vue3+elementPlus:实现数字滚动效果。自行封装注册一个公共组件,或拉取vue-count-to插件源码,因为这个插件在vue3里不能用https://blog.****.net/weixin_43928112/article/details/137358802?spm=1001.2014.3001.5501