from IPython.display import HTML, display
from jinja2 import Template
import json
def snb_echart_piexxxxxx(data, configOptions = {
'seriesRadius': ['0%', '55%'],
'seriesLabelNormalFormatter': '{d}%'
}):
if not data:
display(HTML(f"""<!DOCTYPE html>
<html style="height:100%;width:100%;overflow:hidden;">
<body style="height:100%;width:100%">
<p style="font-size: 20px;color:rgba(255,255,255,0.45);position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">暂无数据</p>
</body>
</html>"""))
return
html = (
"""
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 500px; margin: 0; ">
<div id="container" style="height: 100%;min-height:100px;overflow:hidden;"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'svg',
useDirtyRect: false
});
var option;
var chartData = """
+ json.dumps(data)
+ """ ;
function setCol(color1, color2) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: color1
}, {
offset: 1, color: color2
}],
global: false
}
}
option = {
color: [
setCol("#EE1E23","#660708"),
setCol("#dc2f02","#a4161a"),
setCol("#faa307","#ba181b"),
setCol("#8d99ae","#e5383b"),
setCol("#ffcad4","#b1a7a6"),
setCol("#708d81","#d3d3d3"),
setCol("#0b3954","#f5f3f4"),
],
tooltip: {
trigger: "item",
formatter: "{b}<br />数量:{c} {d}%",
},
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 10
},
legend: {
bottom: "10%", //水平位置，
left: 'center',
height: 200,
icon: "circle", //图例形状
textStyle: {
color: "#FFF",
},
orient: "horizontal",
type: "scroll", //必须设置为scroll,才可以超出翻页
pageIconColor: "#ee1e23", //激活的分页按钮颜色
pageIconInactiveColor: "#FFE07D7F", //没激活的分页按钮颜色
},
avoidLabelOverlap: false,
emphasis: {
label: {
show: true,
fontSize: 24,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
series: [
{
type: "pie",
radius: """ + str(configOptions['seriesRadius']) + """,
label: {
normal: {
color: '#fff',
show: true,
fontSize: '12px',
formatter: '""" + str(configOptions['seriesLabelNormalFormatter']) + """',
},
emphasis: {
show: true,
},
},
data: chartData,
},
],
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
myChart.on('click', function (params) {
});
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
"""
)
display(HTML(html))
snb_echart_piexxxxxx(data = [
{ 'value': 9336, 'name': "架空线路1设备" },
{ 'value': 9336, 'name': "架空线路2设备" },
{ 'value': 9336, 'name': "架空线路4设备" },
{ 'value': 9336, 'name': "架空线路3设备" },
{ 'value': 9336, 'name': "架空线路5设备" },
{ 'value': 9336, 'name': "架空线6设备" },
{ 'value': 9336, 'name': "架空线路7设备" },
])
Run to view results