<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资源分类统计</title>
<script src="echarts.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
background: #0a1e3e;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
.container {
background: linear-gradient(135deg, #1a2f4f 0%, #0d1b2e 100%);
padding: 0;
border-radius: 8px;
display: inline-block;
}
.title {
width: 100%;
height: 32px;
padding-left: 35px;
font-size: 18px;
font-weight: 500;
line-height: 32px;
background-image: url(header.svg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left center;
color: #00d4ff;
box-sizing: border-box;
}
.content {
display: flex;
align-items: center;
gap: 40px;
padding: 20px;
}
#chart {
width: 300px;
height: 300px;
}
.legend {
flex: 1;
}
.legend-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.legend-color {
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 2px;
}
.legend-name {
color: #fff;
font-size: 16px;
margin-right: 20px;
min-width: 120px;
}
.legend-value {
color: #00ff88;
font-size: 22px;
font-weight: bold;
}
.legend-unit {
color: #00ff88;
font-size: 14px;
margin-left: 5px;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<div class="title">资源分类统计</div>
<div class="content">
<div id="chart"></div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background: #00d4ff;"></div>
<span class="legend-name">时空基础数据</span>
<span class="legend-value">423</span>
<span class="legend-unit">万条</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00ff88;"></div>
<span class="legend-name">资源调查数据</span>
<span class="legend-value">532</span>
<span class="legend-unit">万条</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #00ff00;"></div>
<span class="legend-name">规划管控数据</span>
<span class="legend-value">835</span>
<span class="legend-unit">万条</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ff9933;"></div>
<span class="legend-name">工程建设数据</span>
<span class="legend-value">573</span>
<span class="legend-unit">万条</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ff5555;"></div>
<span class="legend-name">公共专题数据</span>
<span class="legend-value">857</span>
<span class="legend-unit">万条</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #bb66ff;"></div>
<span class="legend-name">物联感知数据</span>
<span class="legend-value">847</span>
<span class="legend-unit">万条</span>
</div>
</div>
</div>
</div>
<script>
const chart = echarts.init(document.getElementById('chart'));
const data = [
{ value: 423, name: '时空基础数据', itemStyle: { color: '#00d4ff' } },
{ value: 532, name: '资源调查数据', itemStyle: { color: '#00ff88' } },
{ value: 835, name: '规划管控数据', itemStyle: { color: '#00ff00' } },
{ value: 573, name: '工程建设数据', itemStyle: { color: '#ff9933' } },
{ value: 857, name: '公共专题数据', itemStyle: { color: '#ff5555' } },
{ value: 847, name: '物联感知数据', itemStyle: { color: '#bb66ff' } }
];
const total = data.reduce((sum, item) => sum + item.value, 0);
const option = {
animation: false,
tooltip: {
trigger: 'item',
formatter: function(params) {
const color = params.color;
const borderColor = params.data.tooltip ? params.data.tooltip.borderColor : color;
return '<div style="position:relative;">' +
'<div style="position:absolute;left:-24px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:11px solid ' + borderColor + ';"></div>' +
'<div style="position:absolute;left:-23px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:10px solid #fff;"></div>' +
'<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + color + ';margin-right:8px;"></span>' +
'<span style="font-weight:bold;color:#333;">' + params.name + '</span><br/>' +
'<span style="margin-left:18px;color:#666;">' + params.value + ' 万条</span>' +
'</div>';
},
backgroundColor: '#fff',
borderWidth: 2,
textStyle: {
color: '#333',
fontSize: 14
},
padding: [10, 15],
position: function(point, params, dom, rect, size) {
return [point[0] + 15, point[1] - size.contentSize[1] / 2];
},
extraCssText: 'border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); overflow: visible;'
},
series: [
{
type: 'pie',
radius: ['58%', '70%'],
center: ['50%', '50%'],
data: data.map(item => {
const color = item.itemStyle.color;
let innerColor;
if (color === '#00d4ff') innerColor = '#0099cc';
else if (color === '#00ff88') innerColor = '#00cc66';
else if (color === '#00ff00') innerColor = '#00cc00';
else if (color === '#ff9933') innerColor = '#cc7722';
else if (color === '#ff5555') innerColor = '#cc4444';
else if (color === '#bb66ff') innerColor = '#9955cc';
return {
value: item.value,
name: item.name,
itemStyle: {
color: innerColor,
borderWidth: 0
},
tooltip: {
borderColor: color
}
};
}),
label: { show: false },
labelLine: { show: false },
z: 1
},
{
type: 'pie',
radius: ['70%', '76%'],
center: ['50%', '50%'],
data: data.map(item => ({
...item,
tooltip: {
borderColor: item.itemStyle.color
}
})),
label: { show: false },
labelLine: { show: false },
itemStyle: {
borderWidth: 0,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffsetY: 3
},
emphasis: {
scale: true,
scaleSize: 5,
itemStyle: {
shadowBlur: 15,
shadowOffsetY: 5
}
},
z: 2
},
{
type: 'pie',
radius: ['82%', '86%'],
center: ['50%', '50%'],
silent: true,
startAngle: 0,
data: [
{
value: 48,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(100, 150, 200, 0.9)' },
{ offset: 1, color: 'rgba(100, 150, 200, 0.05)' }
]
}
}
},
{ value: 2, itemStyle: { color: 'transparent' } },
{
value: 48,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 1, y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(80, 120, 180, 0.05)' },
{ offset: 1, color: 'rgba(80, 120, 180, 0.8)' }
]
}
}
},
{ value: 2, itemStyle: { color: 'transparent' } }
],
label: { show: false },
labelLine: { show: false },
animation: false,
z: 100
},
{
type: 'pie',
radius: ['0%', '58%'],
center: ['50%', '50%'],
silent: true,
data: [{ value: 1, itemStyle: { color: 'rgba(13, 27, 46, 0.8)' } }],
label: {
show: true,
position: 'center',
formatter: () => `{a|${total}}\n{b|总量}`,
rich: {
a: {
fontSize: 48,
fontWeight: 'bold',
color: '#00ff88',
lineHeight: 60
},
b: {
fontSize: 18,
color: '#fff',
lineHeight: 30
}
}
}
}
]
};
chart.setOption(option);
let angle = 0;
setInterval(() => {
angle += 2;
chart.setOption({
series: [{}, {}, {
startAngle: angle
}]
});
}, 30);
window.addEventListener('resize', () => chart.resize());
</script>
</body>
</html>
资源：https://files.cnblogs.com/files/Fooo/echarts_par.zip?t=1774496859&download=true
浙公网安备 33010602011771号