ECharts极简入门
- 手机
- 2025-08-27 22:18:02
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=" 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=" 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: 配置标签的显示方式，包括位置和格式。 6. 总结ECharts 是一个功能丰富且灵活的数据可视化库，支持多种类型的图表。通过简单的配置，你可以实现复杂的交互效果和动态样式调整。了解了 ECharts 的基本配置项后，你可以根据实际需求进行定制化的开发和设计，帮助你更好地呈现数据分析结果。
ECharts极简入门由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“ECharts极简入门”
