使用 ECharts 绘制仪表盘

掘金前端

作者前端微白

2025年6月29日 17:34

数据可视化的仪表艺术

仪表盘是现代数据可视化中不可或缺的组件，它能直观展示关键指标的状态和进度。本文将全面介绍如何使用 ECharts 这一强大的开源可视化库创建各种仪表盘。从基础仪表到高级多指针仪表，通过代码示例让你快速掌握仪表盘的设计与应用。

环境准备与基础配置

1. 引入 ECharts

使用 npm：npm install echarts
CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

2. 准备容器

<div id="dashboard" style="width: 600px; height: 400px;"></div>

3. 初始化图表

const chart = echarts.init(document.getElementById('dashboard'));

基础仪表盘实现

const option = {
  series: [{
    type: 'gauge', // 核心：仪表盘类型
    center: ['50%', '60%'], // 中心位置
    startAngle: 180, // 起始角度
    endAngle: 0,    // 结束角度
    min: 0,         // 最小值
    max: 100,       // 最大值
    splitNumber: 10, // 分割段数
    
    // 仪表盘指针
    pointer: {
      show: true,
      length: '60%',
      width: 6
    },
    
    // 仪表盘详情（通常显示当前值）
    detail: {
      valueAnimation: true,
      formatter: '{value}%',
      fontSize: 20,
      offsetCenter: [0, '20%']
    },
    
    // 数据配置
    data: [{ value: 65 }], // 初始值
    
    // 刻度配置
    axisLine: {
      lineStyle: {
        width: 20, // 仪表盘宽度
        color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]
      }
    },
    
    // 刻度标签
    axisLabel: {
      distance: -30,
      fontSize: 12
    },
    
    // 分割线
    splitLine: {
      length: 18
    }
  }]
};

chart.setOption(option);

个性化仪表盘设计技巧

1. 自定义色彩分段

axisLine: {
  lineStyle: {
    color: [
      [0.2, '#52c41a'],  // 0-20% 绿色
      [0.5, '#faad14'],  // 20-50% 黄色
      [0.8, '#fa541c'],  // 50-80% 橙色
      [1, '#f5222d']     // 80-100% 红色
    ],
    width: 18
  }
}

2. 修改指针样式

pointer: {
  icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', // 自定义形状
  length: '50%',
  width: 20,
  itemStyle: {
    color: 'auto'  // 自动匹配当前分段色
  }
}

3. 添加动画效果

detail: {
  valueAnimation: true,  // 数值动画
  formatter: function(value) {
    return '{value|' + value.toFixed(0) + '}{unit|%}'; // 富文本格式
  },
  rich: {
    value: {
      fontSize: 28,
      fontWeight: 'bold',
      color: '#4d4d4d'
    },
    unit: {
      fontSize: 15,
      color: '#999'
    }
  }
}

进阶应用：多指针仪表盘

const option = {
  series: [{
    type: 'gauge',
    // ...基础配置...
    
    pointer: {
      // 隐藏默认指针
      show: false
    },
    
    data: [
      { value: 35, name: '内存使用' },
      { value: 70, name: 'CPU使用' },
      { value: 85, name: '磁盘IO' }
    ],
    
    // 配置多个指针
    pointer: [
      {
        show: true,
        length: '60%',
        width: 6,
        itemStyle: { color: '#37A2DA' }
      },
      {
        show: true,
        length: '50%',
        width: 6,
        itemStyle: { color: '#FF9F7F' },
        offsetCenter: [0, '-10%']
      },
      {
        show: true,
        length: '40%',
        width: 6,
        itemStyle: { color: '#67E0E3' },
        offsetCenter: [0, '-20%']
      }
    ],
    
    // 详细标签配置
    detail: {
      show: false  // 禁用默认值显示
    }
  }],
  
  // 添加图例显示多个指标
  legend: {
    data: ['内存使用', 'CPU使用', '磁盘IO'],
    bottom: 10
  },
  
  // 添加标题
  title: {
    text: '服务器监控仪表盘',
    left: 'center'
  }
};

环形进度条仪表盘

const option = {
  series: [{
    type: 'gauge',
    radius: '90%',     // 半径大小
    startAngle: 225,   // 起点角度
    endAngle: -45,     // 终点角度
    
    // 进度条样式
    progress: {
      show: true,
      width: 20,
      roundCap: true   // 圆角端点
    },
    
    // 刻度配置
    axisLine: {
      roundCap: true,
      lineStyle: {
        width: 20,
        color: [[1, '#f0f0f0']] // 背景色
      }
    },
    
    // 自定义指针（圆点）
    pointer: {
      show: true,
      icon: 'circle',
      length: '0%',
      width: 12,
      itemStyle: {
        color: '#1890ff'
      }
    },
    
    // 添加标签
    axisLabel: {
      show: false
    },
    detail: {
      valueAnimation: true,
      fontSize: 28,
      formatter: '{value}%',
      color: 'auto',
      offsetCenter: [0, '10%']
    },
    data: [{
      value: 75
    }]
  }]
};

实时更新仪表盘数据

// 初始化图表
const chart = echarts.init(document.getElementById('dashboard'));
chart.setOption(option);

// 更新函数
function updateGauge(newValue) {
  chart.setOption({
    series: [{
      data: [{ value: newValue }]
    }]
  });
}

// 模拟实时数据（每秒更新）
setInterval(() => {
  const value = Math.round(Math.random() * 100);
  updateGauge(value);
}, 1000);

// 响应式调整
window.addEventListener('resize', () => {
  chart.resize();
});

业务场景应用示例：健康监测仪表盘

const healthOption = {
  series: [{
    type: 'gauge',
    min: 0,
    max: 100,
    splitNumber: 5,
    axisLabel: {
      formatter: function(value) {
        // 健康等级标签
        if (value === 0) return '危险';
        if (value === 25) return '较差';
        if (value === 50) return '一般';
        if (value === 75) return '良好';
        if (value === 100) return '优秀';
        return '';
      },
      color: '#666',
      distance: -20
    },
    anchor: {
      show: true,
      size: 12,
      itemStyle: {
        borderWidth: 3
      }
    },
    pointer: {
      icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v35c0,1.4-1.2,2.6-2.6,2.6h0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.5,0.7,2.9,0.7z',
      length: '50%',
      width: 8
    },
    data: [{
      value: 88
    }]
  }]
};

性能优化与最佳实践

性能优化策略

// 关闭不必要的动画
animation: false,

// 减少刷新频率
setOption(newOption, {
  lazyUpdate: true, 
  notMerge: true
});

// 使用Canvas渲染（默认）
init(dom, canvas);

响应式布局

const resizeObserver = new ResizeObserver(() => {
  chart.resize();
});
resizeObserver.observe(document.getElementById('dashboard'));

无障碍访问

aria: {
  show: true,
  description: '健康指数仪表盘，当前值为88%，处于优秀水平'
}

常见问题解决方案

1. 仪表盘不显示

检查容器尺寸是否正确设置
确认 echarts.init() 参数正确
验证数据格式是否符合要求

2. 自定义样式失效

确保属性路径正确（如 axisLine.lineStyle.color）
检查浏览器控制台错误信息
优先使用官方文档支持的配置项

3. 动画卡顿

减少数据刷新频率（使用节流）
避免过度复杂的图表设计
使用轻量级的 Canvas 渲染而非 SVG

打造专业级仪表盘

通过本文的学习，您已经掌握了：

ECharts 基础仪表盘的创建方法
个性化仪表盘的设计技巧
多指针和环形进度条的实现
实时数据更新的最佳实践
性能优化与问题排查方法

仪表盘设计不仅需要技术实现，还需要考虑用户体验和数据故事讲述原则：

graph LR
A[明确业务目标] --> B[选择合适指标]
B --> C[设计视觉层次]
C --> D[优化色彩对比]
D --> E[确保响应式布局]
E --> F[测试与迭代]

ECharts 提供了丰富的配置选项，让开发者能够创建出既美观又实用的仪表盘组件。

拓展资源：

ECharts 官方文档

ECharts Gallery - 仪表盘示例

色彩选择工具 - Adobe Color

图标资源库 - Font Awesome

普通视图