Skip to content
常用图表类型配置实践
ECharts 通过 series.type 选择图表类型，series 数组中的每一项代表一个数据系列。折线图、柱状图和饼图是使用最频繁的三类图表，它们的配置各有侧重。本章介绍这些图表的数据格式、视觉样式、标签和图例的基本配置方式。
折线图
数据格式与 series.type
type: 'line' 定义折线图。数据可以直接写入 series.data，也可以交由 dataset 统一管理[2]。使用 series.data 时，最常用一维数组：
javascript
series: [{
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130]
}]数组中的每个数值按顺序对应类目轴（xAxis 的 data 或默认索引）。如果 X 轴需要表达时间信息，可使用二维数组并设置 xAxis.type: 'time'：
javascript
data: [
['2024-01-01', 120],
['2024-01-02', 200]
]不过多数场景下一维数组加类目轴已经够用。
绘制多条折线只需追加系列对象：
javascript
series: [
{ type: 'line', data: [120, 200, 150, 80] },
{ type: 'line', data: [90, 130, 180, 110] }
]每个系列按照全局调色板依次取色，图例也会自动生成。
lineStyle 与 areaStyle
折线的视觉细节由 lineStyle 控制，主要属性包括颜色、线宽和线型。
javascript
series: [{
type: 'line',
data: [120, 200, 150, 80],
lineStyle: {
color: '#5470c6',
width: 2,
type: 'solid' // 'dashed' | 'dotted'
}
}]lineStyle.type 的取值与 CSS border-style 类似，支持 solid（实线）、dashed（虚线）、dotted（点线）。
面积图通过 areaStyle 在折线下方填充背景色[1]。最简单的用法是传入空对象，使用系列颜色的半透明填充：
javascript
areaStyle: {}此时填充色为系列颜色叠加不透明度。面积图适合表现数据量级的变化区间。
自定义填充颜色可以指定固定值：
javascript
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}或者使用渐变：
javascript
areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(84,112,198,0.6)' },
{ offset: 1, color: 'rgba(84,112,198,0.05)' }
]
}
}x, y, x2, y2 控制渐变方向，0 0 0 1 表示从上到下。顶部深色、底部透明的渐变可以让面积图看起来更轻量。
柱状图
itemStyle 与 label
柱状图的 type 为 'bar'，柱子的颜色、圆角和边框通过 itemStyle 设定。
javascript
series: [{
type: 'bar',
data: [120, 200, 150, 80],
itemStyle: {
color: '#91cc75',
borderRadius: [4, 4, 0, 0], // 上左、上右、下右、下左
borderWidth: 1,
borderColor: '#ccc'
}
}]borderRadius 可以是一个统一数值，也可以像上面那样分别控制四个角。圆角让柱子显得柔和，适用于非正式的数据展示场景。
柱子上方（或内部）的数值标签使用 label 配置：
javascript
label: {
show: true,
position: 'top', // 'inside' | 'insideTop' | 'top' | 'bottom' 等
color: '#333',
fontSize: 12
}position: 'top' 将标签放在柱子顶部外侧，这是最常见的位置。对于负值柱子，标签会自动调整到下方。需要定制格式时可以使用 formatter：
javascript
formatter: function (params) {
return params.value + ' 万';
}也可以使用字符串模板 '{c} 万'，{c} 代表数据值。
分组柱状图只需在 series 中添加多个 bar 系列，同一类目的柱子会自动并排：
javascript
series: [
{ type: 'bar', data: [120, 200, 150, 80], name: '产品A' },
{ type: 'bar', data: [90, 130, 180, 110], name: '产品B' }
]柱子之间的间距通过 barGap（同组内间距）和 barCategoryGap（组间距）控制，通常使用百分比值。
饼图
数据格式与扇区颜色
饼图的 type 为 'pie'，数据项需要指明名称和数值：
javascript
series: [{
type: 'pie',
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}]扇区的颜色默认取自全局调色板，也可以单独指定：
javascript
{ value: 335, name: '直接访问', itemStyle: { color: '#5470c6' } }labelLine 与格式化
饼图的标签通过 label 控制内容，labelLine 控制引导线样式。
javascript
labelLine: {
smooth: true,
lineStyle: {
color: '#999',
width: 1
}
}smooth: true 让引导线平滑弯曲，减少线条交叉时的混乱感。
标签格式通常需要显示名称和百分比：
javascript
label: {
show: true,
formatter: '{b}: {d}%'
}{b} 为扇区名称，{d} 为百分比。若需要多行信息，使用回调函数：
javascript
formatter: function (params) {
return params.name + '\n' + params.value + ' 人\n' + params.percent + '%';
}params.percent 是已计算好的百分比数值，不必自行计算。
当数据项较多时，小扇区的引导线和标签容易重叠。这种情况下可以关闭默认标签（label.show: false），仅保留 emphasis 状态下的高亮标签，配合 tooltip 查看详情。也可以使用南丁格尔玫瑰图（roseType: 'radius'）让各扇区角度相同，减小挤压。
图例与全局调色板
legend 的 orient、position 与文字样式
图例组件 legend 默认放置在容器顶部、水平排列。orient 设为 'vertical' 可切换为垂直排列，再配合 left / right / top / bottom 定位。
javascript
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: {
fontSize: 12,
color: '#666'
}
}left、right、top、bottom 支持像素值、百分比或 'center'。对于饼图，图例用来表明颜色与类别的对应关系；对于折线图和柱状图，则用来区分不同系列。
图例的文字样式通过 textStyle 调整，还可使用 itemGap、itemWidth 等属性控制图例项之间的间距和图形宽度。
全局 color 调色板
ECharts 内置了一组默认颜色，可以通过 option.color 数组统一覆盖：
javascript
option = {
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
series: [
{ type: 'line', data: [...] },
{ type: 'line', data: [...] },
{ type: 'bar', data: [...] }
]
}各个系列按顺序从数组中取色，超出长度时循环复用。相比逐个系列设置颜色，调整全局调色板更迅速。需要注意的是，如果一个系列或数据项已经通过 itemStyle.color 单独指定了颜色，该颜色会覆盖调色板分配的色值，后续修改调色板时该处不会变化。
组合示例：仪表板
将多个图表组合到一个页面中，只需准备对应的容器并各自初始化 ECharts 实例。为了保持整体视觉统一，多个图表可以复用同一个 color 数组。
html
<div id="line-chart" style="width: 600px; height: 300px;"></div>
<div id="bar-chart" style="width: 600px; height: 300px;"></div>
<div id="pie-chart" style="width: 400px; height: 300px;"></div>javascript
const colors = ['#5470c6', '#91cc75', '#fac858'];
// 折线图 - 趋势
const lineChart = echarts.init(document.getElementById('line-chart'));
lineChart.setOption({
color: colors,
tooltip: { trigger: 'axis' },
legend: { orient: 'horizontal', bottom: 0 },
xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
yAxis: {},
series: [
{ type: 'line', data: [120, 200, 150, 80], name: '销售额',
lineStyle: { width: 2 }, areaStyle: {} },
{ type: 'line', data: [90, 130, 180, 110], name: '利润',
lineStyle: { width: 2 } }
]
});
// 柱状图 - 对比
const barChart = echarts.init(document.getElementById('bar-chart'));
barChart.setOption({
color: colors,
tooltip: { trigger: 'axis' },
legend: { orient: 'horizontal', bottom: 0 },
xAxis: { data: ['华东', '华南', '华北', '西部'] },
yAxis: {},
series: [
{ type: 'bar', data: [335, 310, 234, 135], name: '线上',
itemStyle: { borderRadius: [4,4,0,0] }, label: { show: true, position: 'top' } },
{ type: 'bar', data: [200, 180, 160, 100], name: '线下',
itemStyle: { borderRadius: [4,4,0,0] }, label: { show: true, position: 'top' } }
]
});
// 饼图 - 占比
const pieChart = echarts.init(document.getElementById('pie-chart'));
pieChart.setOption({
color: colors,
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', right: 10, top: 'center' },
series: [{
type: 'pie',
radius: '65%',
data: [
{ value: 335, name: '华东' },
{ value: 310, name: '华南' },
{ value: 234, name: '华北' },
{ value: 135, name: '西部' }
],
label: { formatter: '{b}: {d}%' },
labelLine: { smooth: true }
}]
});该示例中仅使用了 tooltip 最基本的 trigger 属性，目的是让图表具备悬停提示。tooltip 的详细配置将在后续章节展开。
注意事项
数据格式差异：饼图要求
{name, value}结构；折线图和柱状图可以使用一维数组、二维数组或对象数组。如果数据来自后端接口，可以通过map转换为所需格式，或直接使用dataset的按行映射[2]。初学阶段直接处理series.data更直观。面积图叠加：多条折线均设置
areaStyle时，后面的系列会遮挡前面的系列。要得到半透明叠加效果，需手动调整各系列areaStyle.color的不透明度。柱状图负值标签：
position: 'top'对于负数柱子会自动将标签显示在下方，无需特殊处理；而position: 'inside'会将标签强制置于柱子内部，负数区域的标签可能因柱子颜色较暗而难以辨认。调色板与单独指定的优先级：单个数据项或系列的
itemStyle.color会覆盖全局调色板赋予的颜色。这在需要突出某个数据点时有用，但后续调整全局配色时可能导致该处颜色不变。饼图标签拥挤：数据项过多时标签和引导线易重叠。此时可合并小项为“其他”，使用玫瑰图（
roseType: 'radius'），或仅保留高亮状态下的标签。响应式处理：示例中容器的
width是固定值。在实际仪表板中，容器宽度多由百分比或栅格系统控制。ECharts 不会自动监听容器尺寸变化，需要在窗口resize事件中手动调用chart.resize()，否则图表可能出现溢出或留白。