优化后的饼图效果
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{
display: flex;
align-items: center;
width: 100%;
height: 50px;
flex-shrink: 0;
padding: 20px 30px 0px 20px;
span{
flex-shrink: 0;
&:nth-child(1){
width: 0px;
flex-grow: 1;
}
}
.btn-box{
display: block;
color:#6bf6fc;
cursor: pointer;
}
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:#416387;
}
}
.chart-box{
width: 100%;
height: 0px;
flex:1;
}
}
HTML页面部分
<div class="layout-demo-box">
<div class="title-box">
<span>
<h1>指标多仪表盘面板</h1>
<p>统计日期(2025-06-09 12:00:00)</p>
</span>
</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: [70,12,28],
仪表盘的option配置
tooltip: {},
series: [{
name: '',
type: 'gauge',
z: 3,
min: 0,
max: 100,
splitNumber:10,
radius: '70%',
axisLine: { //设置刻度标签
show: true,
lineStyle: {
color: [
[30 / 100, '#3daef6'],
[60 / 100, '#4e71fd'],
[80 / 100, '#f87e21'],
[1, '#ef233c']
],
width: 2
}
},
axisTick: { //设置刻度(线)样式
show:true,
distance: -4, // 距离
length: 2,
lineStyle: {
color: '#00436e'
}
},
axisLabel: {
color: '#416387',
fontSize:10,
distance: 8
},
splitLine: { //设置分隔线样式
show:true,
length: 8,
distance: -6, // 距离
lineStyle: {
width: 6,
color: '#000818'
}
},
detail: { //设置仪表盘详情，用于显示数据
fontSize: 16,
color:'#68f0f7',
offsetCenter: [0, '80%'],
fontWeight: 'normal',
formatter: "{value}%"
},
title: {
fontSize: 12,
color:'#416387',
offsetCenter: [0, '100%']
},
markPoint: {
data: [{
x: "50%",
y: "50%",
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: "#000309"
},
}]
},
itemStyle: { //设置仪表盘指针样式
color:'rgb(107, 246, 252)',
shadowColor: 'rgba(107, 246, 252,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
pointer: { //设置高亮的仪表盘指针样式
width: 5,
},
data: [{
value: chartData[0],
name: '指标A占比'
}]
}, {
name: '',
type: 'gauge',
center: ['20%', '55%'],
radius: '60%',
min: 0,
max: 100,
endAngle: 45,
splitNumber: 5,
axisLine: {
show: true,
lineStyle: {
color: [
[30 / 100, '#3daef6'],
[60 / 100, '#4e71fd'],
[80 / 100, '#f87e21'],
[1, '#ef233c']
],
width: 2
}
},
axisTick: { //设置刻度(线)样式
show:true,
distance: -4, // 距离
length: 2,
lineStyle: {
color: '#00436e'
}
},
axisLabel: {
color: '#416387',
fontSize:10,
distance: 8
},
splitLine: { //设置分隔线样式
show:true,
length: 8,
distance: -6, // 距离
lineStyle: {
width: 6,
color: '#000818'
}
},
itemStyle: { //设置仪表盘指针样式
color:'rgb(107, 246, 252)',
shadowColor: 'rgba(107, 246, 252,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
pointer: {
width: 4
},
title: {
fontSize: 12,
color:'#416387',
offsetCenter: [0, '100%']
},
markPoint: {
data: [{
x: "20%",
y: "55%",
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: "#000309"
},
}]
},
detail: {
fontSize: 16,
color:'#6bf6fc',
offsetCenter: [0, '76%'],
fontWeight: 'normal',
formatter: "{value}%"
},
data: [{
value: chartData[1],
name: '指标B占比',
}]
}, {
name: '',
type: 'gauge',
center: ['78%', '55%'],
radius: '60%',
min: 0,
max: 100,
splitNumber: 5,
startAngle: 135,
endAngle: -45,
axisLine: {
show: true,
lineStyle: {
color: [
[30 / 100, '#3daef6'],
[60 / 100, '#4e71fd'],
[80 / 100, '#f87e21'],
[1, '#ef233c']
],
width: 2
}
},
axisTick: { //设置刻度(线)样式
show:true,
distance: -4, // 距离
length: 2,
lineStyle: {
color: '#00436e'
}
},
axisLabel: {
color: '#416387',
fontSize:10,
distance: 8
},
splitLine: { //设置分隔线样式
show:true,
length: 8,
distance: -6, // 距离
lineStyle: {
width: 6,
color: '#000818'
}
},
itemStyle: { //设置仪表盘指针样式
color:'rgb(107, 246, 252)',
shadowColor: 'rgba(107, 246, 252,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
},
pointer: {
width: 4,
},
title: {
fontSize: 12,
color:'#416387',
offsetCenter: [0, '100%']
},
markPoint: {
data: [{
x: "78%",
y: "55%",
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: "#000309"
},
}]
},
detail: {
fontSize: 16,
color:'#6bf6fc',
offsetCenter: [0, '76%'],
fontWeight: 'normal',
formatter: "{value}%"
},
data: [{
value: chartData[2],
name: '指标C占比',
}]
}]
在线Demo
下方可在线查看Demo完整代码
总结
通过以上步骤，我们成功地使用 Echarts 制作并优化了一个仪表盘。在实际应用中，大家可以根据具体的数据和业务需求，进一步调整图表的样式和交互效果，让数据可视化更加美观和实用。希望这篇教程能对大家在前端数据可视化开发中有所帮助
