echarts 饼图试例
原创
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts饼图示例</title>
<!-- 引入ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
accent: '#8b5cf6',
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.chart-shadow {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 flex items-center">
<i class="fa fa-pie-chart text-primary mr-3"></i>
ECharts饼图示例
</h1>
<p class="text-gray-600 mt-2">展示不同类别的数据占比及交互效果</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 主饼图 -->
<div class="lg:col-span-2 bg-white rounded-xl p-6 chart-shadow card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-800">产品销售占比分析</h2>
<div class="flex space-x-2">
<button id="toggleLegend" class="text-sm bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition-colors">
<i class="fa fa-list-ul mr-1"></i> 显示/隐藏图例
</button>
<button id="rotateChart" class="text-sm bg-primary/10 hover:bg-primary/20 text-primary px-3 py-1 rounded-full transition-colors">
<i class="fa fa-refresh mr-1"></i> 旋转
</button>
</div>
</div>
<div id="mainPieChart" class="w-full h-[400px]"></div>
</div>
<!-- 数据信息面板 -->
<div class="bg-white rounded-xl p-6 chart-shadow card-hover">
<h2 class="text-xl font-semibold text-gray-800 mb-4">数据详情</h2>
<div id="dataInfo" class="space-y-4">
<div class="p-3 bg-gray-50 rounded-lg border border-gray-100">
<p class="text-gray-500 text-sm">总销售额</p>
<p class="text-2xl font-bold text-gray-800">¥ 2,458,900</p>
</div>
<div id="selectedData" class="p-4 bg-primary/5 rounded-lg border border-primary/20">
<p class="text-gray-500 text-sm">请点击饼图查看详情</p>
<p class="text-xl font-bold text-primary mt-2">--</p>
</div>
<div class="pt-4 border-t border-gray-100">
<h3 class="font-medium text-gray-700 mb-2">操作提示</h3>
<ul class="text-sm text-gray-600 space-y-1">
<li><i class="fa fa-mouse-pointer text-primary mr-1"></i> 点击扇形查看详情</li>
<li><i class="fa fa-hand-paper-o text-primary mr-1"></i> 鼠标悬停显示数据</li>
<li><i class="fa fa-legend text-primary mr-1"></i> 点击图例隐藏/显示类别</li>
</ul>
</div>
</div>
</div>
<!-- 环形图示例 -->
<div class="lg:col-span-3 bg-white rounded-xl p-6 chart-shadow card-hover">
<h2 class="text-xl font-semibold text-gray-800 mb-4">环形图样式 - 市场份额分布</h2>
<div id="donutChart" class="w-full h-[300px]"></div>
</div>
</div>
</div>
<script>
// 初始化主饼图
const mainPieChart = echarts.init(document.getElementById('mainPieChart'));
// 初始化环形图
const donutChart = echarts.init(document.getElementById('donutChart'));
// 销售数据
const salesData = [
{ name: '电子产品', value: 850000, rate: 34.6 },
{ name: '服装鞋帽', value: 620000, rate: 25.2 },
{ name: '家居用品', value: 480000, rate: 19.5 },
{ name: '食品饮料', value: 320000, rate: 13.0 },
{ name: '其他', value: 188900, rate: 7.7 }
];
// 市场份额数据
const marketShareData = [
{ name: '本公司', value: 38 },
{ name: '竞争对手A', value: 27 },
{ name: '竞争对手B', value: 18 },
{ name: '竞争对手C', value: 12 },
{ name: '其他品牌', value: 5 }
];
// 主饼图配置
const mainPieOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}元 ({d}%)',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: '#eee',
borderWidth: 1,
textStyle: { color: '#333' },
padding: 10,
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)'
},
legend: {
orient: 'horizontal',
bottom: 10,
textStyle: { color: '#666' },
itemGap: 15,
itemWidth: 12,
itemHeight: 12
},
series: [
{
name: '销售额',
type: 'pie',
radius: ['40%', '70%'], // 内环和外环半径，控制是否为环形
center: ['50%', '45%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 6, // 扇形的圆角
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 18,
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 20,
length2: 30,
lineStyle: {
width: 1.5
}
},
data: salesData,
// 动画效果
animationDuration: 1000,
animationEasingUpdate: 'cubicOut',
// 选中样式
select: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
}
],
color: ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b', '#ef4444']
};
// 环形图配置
const donutOption = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
legend: {
orient: 'vertical',
left: 20,
textStyle: { color: '#666' }
},
series: [
{
name: '市场份额',
type: 'pie',
radius: ['50%', '70%'], // 环形图，内外半径差值控制环的厚度
center: ['65%', '50%'],
data: marketShareData,
itemStyle: {
borderRadius: 4,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'outside',
formatter: '{b}: {c}%'
},
labelLine: {
show: true,
length: 15,
length2: 20
}
}
],
color: ['#165DFF', '#0FC6C2', '#722ED1', '#FF7D00', '#F5222D']
};
// 设置图表配置
mainPieChart.setOption(mainPieOption);
donutChart.setOption(donutOption);
// 点击事件 - 显示详情
mainPieChart.on('click', function(params) {
const dataInfo = document.getElementById('selectedData');
dataInfo.innerHTML = `
<p class="text-gray-500 text-sm">选中类别</p>
<p class="text-xl font-bold text-primary mt-1">${params.name}</p>
<div class="mt-3 grid grid-cols-2 gap-2 text-sm">
<div class="bg-white p-2 rounded">
<p class="text-gray-500">销售额</p>
<p class="font-medium">¥ ${params.value.toLocaleString()}</p>
</div>
<div class="bg-white p-2 rounded">
<p class="text-gray-500">占比</p>
<p class="font-medium">${params.percent.toFixed(1)}%</p>
</div>
</div>
`;
});
// 切换图例显示/隐藏
document.getElementById('toggleLegend').addEventListener('click', function() {
const currentShow = mainPieOption.legend.show !== false;
mainPieOption.legend.show = !currentShow;
mainPieChart.setOption(mainPieOption);
});
// 旋转图表
document.getElementById('rotateChart').addEventListener('click', function() {
mainPieChart.dispatchAction({
type: 'pieRoam',
animation: true,
angle: 90 // 旋转90度
});
});
// 响应窗口大小变化
window.addEventListener('resize', function() {
mainPieChart.resize();
donutChart.resize();
});
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
