优化后的饼图效果
Scss样式部分
html,body{
width: 100%;
height: 100%;
padding:0px;
box-sizing: border-box;
overflow: hidden;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.layout-demo-box{
display: flex;
flex-direction: column;
width: 540px;
height: 300px;
background: linear-gradient(to bottom, #000e2a 0%, #000000 10%,#001134 100%);
border: 1px solid #00436e;
border-radius: 5px;
*{
box-sizing: border-box;
}
.title-box{
width: 100%;
height: 50px;
flex-shrink: 0;
padding: 20px 20px 0px 20px;
h1{
font-size: 14px;
line-height: 16px;
margin: 0px;
background: linear-gradient(to top, #00d1fe, #fff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
p{
font-size: 12px;
margin: 0px;
color:#646d8c;
}
}
.chart-box{
width: 100%;
height: 0px;
flex:1;
}
}
HTML页面部分
<div class="layout-demo-box">
<div class="title-box">
<h1>收益率占比统计</h1>
<p>统计日期(2025-06-06 12:00:00)</p>
</div>
<div class="chart-box" id="chartId"></div>
</div>
JS页面部分
methods: {
/**
* 初始化并渲染 ECharts 图表
* 功能说明：
* 1. 创建 ECharts 实例并渲染图表
* 2. 自动响应窗口大小变化
* 3. 组件销毁时自动清理资源防止内存泄漏
*/
initEcharts() {
// 1. 获取 DOM 元素 - 添加空检查
const chartDom = document.getElementById('chartId');
if (!chartDom) {
console.warn(' 图表容器不存在');
return;
}
// 2. 初始化图表实例
this.myChart = echarts.init(chartDom);
// 3. 设置图表配置
const option = {
// option 配置 start ---------------------------------------
// option 配置 end ---------------------------------------
};
// 4. 应用配置
try {
this.myChart.setOption(option);
} catch (error) {
console.error(' 图表配置错误:', error);
}
// 5. 响应式处理 - 使用防抖优化性能
this.handleResize = debounce(() => {
this.myChart && this.myChart.resize();
}, 300);
window.addEventListener('resize', this.handleResize);
},
// 清理资源
destroyEcharts() {
if (this.myChart) {
window.removeEventListener('resize', this.handleResize);
this.myChart.dispose();
this.myChart = null;
}
}
},
// Vue生命周期钩子-组件挂载完成后调用
mounted() {
this.$nextTick(() => {
this.initEcharts();
});
},
// Vue生命周期钩子-组件销毁前调用
beforeDestroy() {
this.destroyEcharts();
}
定义data数据
// 数据
chartData:{
sum:1000.00,
list:[
{ value: 100.00, rate:10.00, name: '指标A收益率' },
{ value: 300.00, rate:20.00, name: '指标B收益率' },
{ value: 300.00, rate:30.00, name: '指标C收益率' },
{ value: 500.00, rate:50.00, name: '指标D收益率' }
]
}
饼图的option配置
tooltip: {
trigger: 'item'
},
graphic: [{
type: 'circle',
left: '76',
top: '65',
shape: {
r: 60
},
style: {
fill: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
offset: 0,
color: 'rgba(0, 67, 110, 1)'
}, {
offset: 1,
color: 'rgba(0, 16, 50, 1)'
}]),
// shadowBlur: 10,
// shadowColor: 'rgba(0, 0, 0, 0.2)'
},
z: -1
}],
title: {
show: true,
text: chartData.sum,
subtext:"总收益率(亿元)" ,
x: "130",
y: "100",
textStyle: {
color: "#f6f8f9",
fontSize: 20,
fontWeight: 'bold'
},
subtextStyle: {
color: "#6f789a",
fontSize:12,
},
textAlign: "center",
},
color: ['#ef233c', '#d49840', '#4e71fd', '#38fef1'],
legend: {
orient: 'vertical',
right: '0%',
left: '46%',
top: 'center',
itemWidth: 7,
itemHeight: 12,
itemGap:20,
data: chartData.list.name,
formatter: function (name) {
let obj = {
rate:'',
value:'',
name:''
};
if (name) {
obj = chartData.list.find((item) => item.name === name);
}
return '{name|' + name + '} {rate|' + obj.rate + '%} {value|' + obj.value + '亿元}';
},
textStyle: {
rich: {
name: {
fontSize: 12,
width: 100,
color: '#6f789a'
},
rate: {
fontSize: 14,
fontWeight: 700,
width: 60,
color: '#e9ecf4'
},
value: {
fontSize: 14,
fontWeight: 700,
width: 80,
color: '#04ddfe'
}
}
}
},
series: [
{
name: '单位亿元',
type: 'pie',
radius: ['52%', '60%'],
center: ['25%', '50%'],
avoidLabelOverlap: false,
// roseType:'area',
itemStyle: {
borderRadius: 3,
borderColor:'#000',
borderWidth: 3,
shadowBlur: 18, // 阴影模糊大小
shadowOffsetX:8, // X轴位移
shadowOffsetY:5, // y轴位移
shadowColor: 'rgba(0, 67, 110, 0.4)' // 阴影颜色及透明度
},
label: {
show: false,
position: 'center'
},
emphasis: {
// 新增放大效果配置
scale: true,
scaleSize: 10 // 放大尺寸，可根据需要调整
},
labelLine: {
show: false
},
data: chartData.list
},
]
在线Demo
下方可在线查看Demo完整代码
总结
通过以上步骤，我们成功地使用 Echarts 制作并优化了一个饼图。在实际应用中，大家可以根据具体的数据和业务需求，进一步调整图表的样式和交互效果，让数据可视化更加美观和实用。希望这篇教程能对大家在前端数据可视化开发中有所帮助
