当前位置：首页 > news >正文

ECharts极简入门

news 2025/8/15 11:59:08

ECharts 是一个基于 JavaScript的开源可视化图表库，广泛应用于数据可视化的场景中，支持多种图表类型，如柱状图、折线图、饼图、散点图、雷达图等，且具有强大的自定义功能。

1. ECharts 基本使用

首先需要引入 ECharts 库，通常通过 CDN 或本地引入。以下是通过 CDN 引入的方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 入门教程</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>// 初始化 ECharts 实例var chart = echarts.init(document.getElementById('chart'));// 配置项var option = {title: {text: 'ECharts 入门示例',subtext: '子标题',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['A', 'B', 'C', 'D']},series: [{name: '类别',type: 'pie',radius: '50%',data: [{ value: 40, name: 'A' },{ value: 30, name: 'B' },{ value: 20, name: 'C' },{ value: 10, name: 'D' }]}]};// 使用刚定义的配置项和数据显示图表chart.setOption(option);</script>
</body>
</html>

2. 解析配置项

title：图表的标题配置。
- text: 主标题内容。
- subtext: 副标题内容。
- left: 控制标题的位置，center表示居中，left表示左对齐，right表示右对齐。
tooltip：提示框配置，鼠标悬浮在图形元素上时显示的内容。
- trigger: 触发方式，item表示触发项（如饼图的每一项），axis表示坐标轴触发。
- formatter: 自定义提示框的显示内容，{a}是系列名称，{b}是数据项名称，{c}是数据项的值，{d}是百分比。
legend：图例配置，展示各系列对应的标识符。
- orient: 图例的排列方式，vertical表示竖直排列，horizontal表示水平排列。
- left: 控制图例的位置，left表示左对齐，center居中，right右对齐。
- data: 图例项的名称数组，对应到 series 数据项中的 name。
series：系列数据配置，ECharts 中的图表类型（如柱状图、折线图、饼图等）都会通过 series 来定义。
- name: 系列名称，用于 tooltip 提示框展示。
- type: 图表类型，这里是 pie，表示饼图，其他常见类型有 bar（柱状图）、line（折线图）等。
- radius: 饼图的半径大小，50% 表示占据容器宽度的50%。
- data: 图表数据，包含各数据项的 value（数值）和 name（名称）。

3. 场景分析：使用 ECharts 展示数据统计

假设我们需要展示一个饼图，反映某公司不同部门的员工分布情况。我们可以通过 ECharts 来快速实现该需求，以下是代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>员工分布情况</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>var chart = echarts.init(document.getElementById('chart'));var option = {title: {text: '公司部门员工分布',subtext: '2025年数据',left: 'center'},tooltip: {trigger: 'item',formatter: '{b}: {c}人 ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['研发', '市场', '销售', '人力资源', '财务']},series: [{name: '员工分布',type: 'pie',radius: '50%',data: [{ value: 400, name: '研发' },{ value: 150, name: '市场' },{ value: 300, name: '销售' },{ value: 100, name: '人力资源' },{ value: 50, name: '财务' }]}]};chart.setOption(option);</script>
</body>
</html>

4. 详细解释

title：此图表的主标题为“公司部门员工分布”，副标题为“2025年数据”，这些都位于页面中央显示。
tooltip：每次鼠标悬停在图表的不同部门上时，都会弹出该部门员工数量以及该部门占总员工数的百分比。
legend：显示不同部门的图例，并放置在页面的左侧。
series：这里的 type 为 pie，表示我们使用饼图来展示员工分布，radius: '50%' 让饼图的大小为容器宽度的50%。

5. 进阶功能：自定义样式和交互

ECharts 提供了许多自定义图表样式和交互功能，可以进一步优化用户体验。例如，可以为每个部门设置不同的颜色，或者启用动画效果。

option = {...option,color: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'], // 自定义颜色animationType: 'expansion', // 动画效果series: [{name: '员工分布',type: 'pie',radius: '50%',label: {show: true,position: 'outside',formatter: '{b}: {c}人'},data: [{ value: 400, name: '研发' },{ value: 150, name: '市场' },{ value: 300, name: '销售' },{ value: 100, name: '人力资源' },{ value: 50, name: '财务' }]}]
};

color: 自定义每个部分的颜色。
label: 配置标签的显示方式，包括位置和格式。