Only for the record, one nice phosphorescent gauge with echarts and panel periodic callback
and the code
import panel as pn
js_files = {'echarts5':"https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"}
pn.extension(js_files=js_files)
html = """
<body style="height: 100%; margin: 0">
<div id="container_ec" style="height: 100%"></div>
<script type="text/javascript">
var option;
let value = 65.23;
let title = 'vision';
let int = value.toFixed(2).split('.')[0];
let float = value.toFixed(2).split('.')[1];
option = {
backgroundColor: '#121212',
title: {
text: 'vision',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 48,
color: '#fff',
fontWeight:'500',
},
b: {
fontSize: 20,
color: '#fff',
padding: [0, 0, 14, 0]
},
c: {
fontSize: 20,
color: '#fff',
padding: [5, 0]
}
}
},
},
series: [
{
type: 'gauge',
radius: '60%',
clockwise: false,
startAngle: '90',
endAngle: '-269.9999',
splitNumber: 30,
detail: { offsetCenter: [0, -20],
formatter: ' ' },
pointer: {show: false},
axisLine: {show: true,
lineStyle: {
color: [
[0, '#2CFAFC'],
[36.7 / 100, '#0ff'],
[1, '#0f232e']
],
width: 20
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 100,
lineStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 1)',
shadowOffsetY:'0',
color: '#020f18',
width: 2
}
},
axisLabel: {
show: false
}
},
{
type: 'pie',
radius: ['44%', '45%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: '#0C355E'
}
},
label: {
show: false
},
data: _dashed()
},
{
type: 'pie',
radius: [0, '30%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: '#000',
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#0FF',
}, {
offset: 1,
color: '#060f20'
}])
}
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
radius: ['64%', '65.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: '#0f232e'
}
},
label: {
show: false
},
data: [400]
},
{
type: 'pie',
radius: ['68%', '69.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: 'rgba(15, 35, 46,.6)',
}
},
label: {
show: false
},
data: [100]
}
]
};
function _dashed() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,255,255,.3)',
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,0,0,0)',
borderWidth: 1,
borderColor: "rgba(0,255,255,1)"
}
}
})
}
}
console.log(dataArr);
return dataArr
}
function doing() {
let option = myChart.getOption();
option.series[1].startAngle = option.series[1].startAngle - 1;
myChart.setOption(option);
}
function startTimer() {
timer = setInterval(doing, 200);
}
setTimeout(startTimer, 0);
var dom = document.getElementById("container_ec");
var myChart = echarts.init(dom);
var number = 0
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
"""
# option.title.text = '{a|' + 54 + '}{b|.' + float + '}\n{c|' + title + '}'
# fe = pn.pane.HTML(html, width= 500, height= 500)
# fe.show()
js_dummy = pn.pane.HTML("")
fe = pn.pane.HTML(html, width= 400, height= 400)
# //option.title.text = '{{a|' + {int(np.random.random()*1000)} + '}} {{b|.' + float + '}}\n{{c|' + title + '}}' ;
i=0
import numpy as np
def update():
global i
i += 1
js_dummy.object = f"""<script>
number = {int(np.random.random()*100)}
option.title.text = '{{a|'+number+'}}'+'{{b|.'+float+'}}'+'\\n{{c|'+title+'}}'
console.log('pepe'+{i}+ '{{a|')
option.series[0].axisLine.lineStyle.color[1][0] = 1-number/100
myChart.setOption(option);
</script>
"""
js_dummy.param.trigger('object')
# option.series[0].data[0].value = 500
pn.state.add_periodic_callback(update, 500)
col = pn.Column(fe, js_dummy)
tmpl = pn.template.VanillaTemplate(title='Gauges', theme = pn.template.DarkTheme)
tmpl.main.append(col)
tmpl.show()