本帖最后由 君茗 于 2024-8-30 09:20 编辑
之前看到过一种效果，类似下图，尝试在Smartbi中实现
采用方式：宏代码
概要原理：定时器循环修改组件样式；保证颜色以A->B->C->B->A进行循环
初步实现效果：
———————————————————————————————————————
思考：初步具有了呼吸效果。
若想实现不间断的呼吸效果，需得到两个rgba的中间数据。
应以步长的形式获得，这样能保证代码中try部分只写一个rgba值，然后通过步长来控制；同时阴影也可以通过此步长来控制
参考：【仪表盘】地图实现循环高亮效果 - Smartbi Insight V11帮助中心 -
【仪表盘】根据占比设置柱图中柱子的颜色 - Smartbi Insight V11帮助中心 -
附相关代码（事件为onBeforeRender）：
function main(page: IPage, portlet: IEChartsPortlet) {
var options = portlet.getChartOptions();
var series = options.series[0];
var sint = 1;//此参数为变化依据，为不同值是更改不同的series样式
var threshold = 1;//此为阈值变化依据，控制sint参数以正弦形式变化
var interval = setInterval(function () {
try {
if (sint == 1) {
series.lineStyle = {
"normal": {
"color": "rgba(30,144,255,1)",
"shadowColor": "rgba(30,144,255,1)",
"shadowBlur": 5
}
}
} else if(sint == 0.9) {
series.lineStyle = {
"normal": {
"color": "rgba(30,144,255,0.9)",
"shadowColor": "rgba(30,144,255,0.9)",
"shadowBlur": 10
}
}
} else if(sint == 0.8) {
series.lineStyle = {
"normal": {
"color": "rgba(30,144,255,0.8)",
"shadowColor": "rgba(30,144,255,0.8)",
"shadowBlur": 15
}
}
} else {
series.lineStyle = {
"normal": {
"color": "rgba(30,144,255,0.7)",
"shadowColor": "rgba(30,144,255,0.7)",
"shadowBlur": 20
}
}
}
} catch (e) {
console.error(e);
} finally {
portlet.setChartOptions(options);
//让数据在阈值内以正弦形式变化
if (sint == 1) {
threshold = -threshold;
sint = sint + 0.1 * threshold;
} else if (sint <= 0.71) {
threshold = -threshold;
sint = sint + 0.1*threshold;
} else {
sint = sint + 0.1*threshold;
}
}
} , 1000)
}
| 
