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:实现数字滚动效果(用于大屏可视化)-CSDN博客文章浏览阅读46次。vue3+elementPlus:实现数字滚动效果。自行封装注册一个公共组件,或拉取vue-count-to插件源码,因为这个插件在vue3里不能用https://blog.csdn.net/weixin_43928112/article/details/137358802?spm=1001.2014.3001.5501