1. 标题（title）
js
title: {
text: '图表标题', // 主标题文本
subtext: '副标题', // 副标题文本
left: 'center', // 水平安放位置，可以是 'left' | 'center' | 'right' 或具体像素值
top: 'top', // 垂直安放位置，可以是 'top' | 'middle' | 'bottom' 或具体像素值
textStyle: { // 标题文本样式
color: '#333',
fontSize: 18
},
subtextStyle: { // 副标题文本样式
color: '#aaa',
fontSize: 12
}
}2. 图例（legend）
js
legend: {
type: 'plain', // 图例类型，可选：'plain'（普通）| 'scroll'（可滚动）
left: 'left', // 位置
top: 'top', // 位置
data: [ // 图例的数据数组，每个项为一个系列的名称
'系列1', '系列2', '系列3'
],
textStyle: { // 图例文本样式
color: '#333'
},
itemWidth: 20, // 图例标记的图形宽度
itemHeight: 14 // 图例标记的图形高度
}3. 网格（grid）
js
grid: {
left: '10%', // 网格离容器左侧的距离
right: '10%', // 网格离容器右侧的距离
bottom: '15%', // 网格离容器底部的距离
top: '20%', // 网格离容器顶部的距离
containLabel: true // 网格区域是否包含坐标轴的刻度标签
backgroundColor: '#f5f5f5' // 网格轴的背景颜色
}4. 坐标轴（xAxis / yAxis）
1.x轴
js
xAxis: [
{
// ==================== 底部X轴配置 ====================
// 坐标轴类型：时间轴，用于显示时间序列数据
type: 'time',
// 坐标轴位置：显示在图表底部
position: 'bottom',
// 坐标轴名称
name: '日期',
// 坐标轴名称显示位置：end表示显示在轴末端
nameLocation: 'end',
// 坐标轴轴线配置
axisLine: {
// 是否显示轴线
show: true,
// 轴线样式
lineStyle: {
// 轴线颜色
color: '#333'
}
},
// 坐标轴刻度配置
axisTick: {
// 是否显示刻度
show: true,
// 刻度与标签对齐
alignWithLabel: true
},
// 坐标轴刻度标签配置
axisLabel: {
// 是否显示刻度标签
show: true,
// 刻度标签颜色
color: '#666',
// 标签格式化器
formatter: {
// 月份显示格式：{MM}月
month: '{MM}月',
// 日期显示格式：月-日
day: '{MM}-{dd}'
}
},
// 分割线配置（网格线）
splitLine: {
// 是否显示分割线
show: true,
// 分割线样式
lineStyle: {
// 分割线颜色
color: '#f0f0f0',
// 分割线类型：虚线
type: 'dashed'
}
}
},
{
// ==================== 顶部X轴配置 ====================
// 坐标轴类型：类目轴，用于显示离散的类目数据
type: 'category',
// 坐标轴位置：显示在图表顶部
position: 'top',
// 类目数据：四个季度
data: ['Q1', 'Q2', 'Q3', 'Q4'],
// 坐标轴轴线配置：不显示轴线
axisLine: {
show: false
},
// 坐标轴刻度配置：不显示刻度
axisTick: {
show: false
},
// 坐标轴刻度标签配置
axisLabel: {
// 标签颜色
color: '#999',
// 标签字体大小
fontSize: 12
}
}
]2.y轴
js
yAxis: {
type: 'value',
position: 'left',
name: '数值',
axisLine: { show: true },
axisTick: { show: true },
axisLabel: { show: true },
splitLine: { // 分隔线设置
show: true,
lineStyle: {
type: 'dashed' // 虚线
}
}
}3.四种轴类型
| 轴类型 | 数据特点 | 数据格式 | 适用场景 |
|-----|--------|------------------|-------------------|---|
| 数值轴 | 连续数值 | 数字 | 普通连续数据，如温度、价格 |
| 类目轴 | 离散数据 | 字符串或数字（表示分类） | 分类数据，如月份、产品类别 |
| 时间轴 | 连续时间 | 时间字符串、时间戳、Date对象 | 时间序列数据，如股票价格、气温变化 |
| 对数轴 | 正数，跨度大 | 正数 | 数据跨越多个数量级，如科学数据 | |
1. 数值轴 (value)
数值轴的x轴，y轴一般都是从data中取值。
js
xAxis: {
type: 'value',
name: 'X轴名称',
min: 0, // 最小值
max: 100, // 最大值
interval: 20, // 刻度间隔
axisLabel: {
formatter: '{value} 单位' // 标签格式化
}
}
// 数据示例
series: [{
type: 'line',
data: [[10, 20], [30, 40], [50, 60]], // 通常与encode配合，指定哪个维度作为x轴、y轴
encode: {
x: 0, // 使用data中的第0个元素作为类目
y: 1 // 使用第1个元素作为数值
}
}]2. 类目轴 (category)
数值轴的x可以在x轴的时候设置，也可以在数据中设置。 类目轴是离散的轴，适用于分类数据。
特点：
- 数据为离散的类目，如字符串或数字。
- 坐标轴刻度为固定的类目，每个类目均匀分布。
- 类目数据可以来自
xAxis.data或从series.data中通过encode指定。
js
xAxis: {
type: 'category',
data: ['类目1', '类目2', '类目3'], // 类目数据
axisLabel: {
rotate: 45 // 标签旋转角度，避免重叠
}
}
// 方式一：在xAxis.data中指定类目 在轴上定义数据（推荐用于简单数据）
xAxis: {
type: 'category',
data: ['一月', '二月', '三月']
},
series: [{
type: 'bar',
data: [10, 20, 30] // 每个类目对应的数值
}]
// 方式二：从series数据中提取（推荐用于复杂数据结构）
xAxis: {
type: 'category'
},
series: [{
type: 'bar',
data: [['一月', 10], ['二月', 20], ['三月', 30]],
encode: {
x: 0, // 使用data中的第0个元素作为类目
y: 1 // 使用第1个元素作为数值
}
}]3. 时间轴 (time)
数值轴的x可以在x轴的时候设置，也可以在数据中设置。 时间轴是连续的数值轴，专门用于时间数据。
特点：
- 数据为时间格式，可以是时间字符串、时间戳或Date对象。
- 坐标轴刻度自动根据时间范围生成，并且标签格式化显示时间。
- 支持时间的不连续数据，会自动按时间顺序排列。
js
// 处理不连续时间数据
option = {
xAxis: xAxis: {
type: 'time',
// 时间范围
min: '2024-01-01', // 最小时间
max: '2024-12-31', // 最大时间
// 时间间隔控制
minInterval: 3600 * 24 * 1000, // 最小间隔1天（毫秒）
maxInterval: 3600 * 24 * 1000 * 30, // 最大间隔30天
// 智能时间格式化
axisLabel: {
formatter: {
year: '{yyyy}年',
month: '{MM}月',
day: '{MM}-{dd}',
hour: '{MM}-{dd} {HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}'
}
},
// 分割线配置
splitLine: {
show: true,
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
yAxis: { type: 'value' },
series: [{
type: 'line',
data: [
['2024-01-01', 100],
['2024-01-05', 150], // 跳过3天
['2024-01-10', 120], // 跳过5天
['2024-01-11', 180] // 连续
],
encode: { x: 0, y: 1 }
}]
}4. 对数轴 (time)
对数轴是对数变换的数值轴，适用于数据跨度大的情况。
特点：
- 数据必须为正数（因为对数函数定义域为正实数）。
- 坐标轴刻度按对数变换，例如10, 100, 1000等。
- 常用于展示数据范围跨越多个数量级的情况。
js
yAxis: {
type: 'log',
// 对数基数
logBase: 10, // 对数底数，默认为10
// 范围控制（注意：是对数变换后的范围）
min: 1, // 10^0 = 1
max: 100000, // 10^5 = 100000
// 间隔控制
interval: 1, // 指数间隔
// 标签格式化
axisLabel: {
formatter: function(value, index) {
// 科学计数法显示
if (value >= 1000) {
const exponent = Math.log10(value);
return '10^' + exponent;
}
return value;
}
},
// 特殊处理：处理接近0的值
silent: false, // 是否静默处理无效数据
// 分割线
splitLine: {
show: true,
lineStyle: {
color: '#e0e0e0'
}
}
}
// 处理数量级差异大的数据，数据配置项
option = {
yAxis: { type: 'log' },
xAxis: { type: 'category' },
series: [{
type: 'line',
data: [1, 10, 100, 1000, 10000, 100000] // 6个数量级的差异
}]
}5. 提示框（tooltip）
当鼠标悬停在图表上时，显示的提示框。
js
tooltip: {
trigger: 'item', // 触发类型，可选：'item'（数据项图形触发）| 'axis'（坐标轴触发）| 'none'
formatter: function(params) { // 提示框浮层内容格式器
return `${params.name}: ${params.value}`;
},
backgroundColor: 'rgba(0,0,0,0.7)', // 背景颜色
textStyle: {
color: '#fff'
},
borderWidth: 0,
padding: [5, 10]
}6. 工具箱（toolbox）
js
toolbox: {
feature: {
saveAsImage: { // 保存为图片
type: 'png',
name: '图表'
},
dataView: { // 数据视图工具
readOnly: false
},
restore: {}, // 重置
dataZoom: {}, // 数据区域缩放
magicType: { // 动态类型切换
type: ['line', 'bar']
}
}
}7. 系列（series）
系列列表，每个系列通过 type 决定自己的图表类型。
1.折线图（line）
js
series: [{
name: '系列1',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true, // 是否平滑曲线
symbol: 'circle',
// 设置数据点形状为圆形 - `'circle'`：圆形
//- `'rect'`：矩形
//- `'roundRect'`：圆角矩形
//- `'triangle'`：三角形
//- `'diamond'`：菱形
//- `'pin'`：针形
//- `'arrow'`：箭头形
symbolSize: 10, // 设置数据点大小
lineStyle: {
color: '#5470c6',
width: 2
},
itemStyle: { // 折线拐点标志的样式
color: '#5470c6'
},
areaStyle: { // 区域填充样式（面积图）
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: '#5470c6'
}, {
offset: 1, color: 'rgba(84, 112, 198, 0.1)'
}]
}
}
}]2.饼图（pie）
js
series: [{
name: '系列1',
type: 'pie',
radius: '50%', // 饼图的半径，可以是像素值或百分比
center: ['50%', '50%'], // 饼图的中心（水平、垂直）位置
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' }
],
label: {
show: true,
formatter: '{b}: {c} ({d}%)' // {a}系列名，{b}数据名，{c}数据值，{d}百分比
},
emphasis: { // 高亮状态下的样式
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]3.柱状图（bar）
js
series: [{
name: '系列1',
type: 'bar',
data: [120, 132, 101, 134, 90, 230, 210],
barWidth: '60%', // 柱条的宽度
itemStyle: {
color: '#5470c6'
},
label: { // 图形上的文本标签
show: true,
position: 'top'
}
}]8. 数据缩放（dataZoom）
用于区域缩放，从而能够自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
js
dataZoom: [
{
type: 'slider', // 滑动条型数据区域缩放组件
show: true, // 显示这个滑动条组件
xAxisIndex: [0], // 控制第一个x轴（索引为0）,如果有多个x轴，可以控制题缩放哪个x轴
start: 0, // 初始显示范围从0%开始
end: 100 // 初始显示范围到100%结束
},
{
type: 'inside', // 内置型数据区域缩放组件
yAxisIndex: [0], // 控制第一个y轴（索引为0）
start: 29, // 初始显示范围从29%开始
end: 36 // 初始显示范围到36%结束
}
]9. 视觉映射（visualMap）
用于进行视觉编码，也就是将数据映射到视觉元素（如颜色、透明度、大小等）。
js
visualMap: {
type: 'continuous', // 连续型视觉映射组件
min: 0, // 指定视觉映射的最小值
max: 100, // 指定视觉映射的最大值
calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
orient: 'vertical', // 视觉映射组件的方向，可选：'vertical' | 'horizontal'
left: 'left',
top: 'bottom',
inRange: { // 定义在选中范围内的视觉元素
color: ['#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
}
}12. 事件处理（eventHandler）
可以通过 on 方法绑定事件，例如：
js
myChart.on('click', function(params) {
console.log(params);
});整体示例
js
<!DOCTYPE html>
<html lang="zh-CN">
<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.4.3/dist/echarts.min.js"></script>
<style>
#chart-container {
width: 1000px;
height: 600px;
margin: 20px auto;
border: 1px solid #eee;
border-radius: 8px;
padding: 10px;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script>
// 初始化ECharts实例
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);
// 完整的配置选项
const option = {
// 1. 标题配置
title: {
text: '2024年销售数据统计',
subtext: '数据来源：销售部门',
left: 'center',
top: 10,
textStyle: {
color: '#333',
fontSize: 20,
fontWeight: 'bold'
},
subtextStyle: {
color: '#666',
fontSize: 14
}
},
// 2. 图例配置
legend: {
type: 'plain',
data: ['产品A销售额', '产品B销售额', '市场份额'],
left: 'center',
bottom: 10,
textStyle: {
color: '#333'
},
itemWidth: 20,
itemHeight: 14
},
// 3. 网格配置
grid: {
left: '8%',
right: '8%',
bottom: '15%',
top: '15%',
containLabel: true
},
// 4. 坐标轴配置
xAxis: [
{
// 底部x轴 - 时间轴
type: 'time',
position: 'bottom',
name: '日期',
nameLocation: 'end',
axisLine: {
show: true,
lineStyle: {
color: '#333'
}
},
axisTick: {
show: true,
alignWithLabel: true
},
axisLabel: {
show: true,
color: '#666',
formatter: {
month: '{MM}月',
day: '{MM}-{dd}'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#f0f0f0',
type: 'dashed'
}
}
},
{
// 顶部x轴 - 类目轴（用于柱状图）
type: 'category',
position: 'top',
data: ['Q1', 'Q2', 'Q3', 'Q4'],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: '#999',
fontSize: 12
}
}
],
yAxis: [
{
// 左侧y轴 - 数值轴
type: 'value',
position: 'left',
name: '销售额（万元）',
nameTextStyle: {
color: '#666'
},
axisLine: {
show: true,
lineStyle: {
color: '#5470c6'
}
},
axisTick: {
show: true
},
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
{
// 右侧y轴 - 数值轴（百分比）
type: 'value',
position: 'right',
name: '市场份额（%）',
nameTextStyle: {
color: '#666'
},
min: 0,
max: 100,
axisLine: {
show: true,
lineStyle: {
color: '#ee6666'
}
},
axisLabel: {
formatter: '{value}%'
}
}
],
// 5. 提示框配置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function(params) {
let result = `<div style="font-weight:bold;margin-bottom:5px;">${params[0].axisValueLabel}</div>`;
params.forEach(item => {
const value = item.seriesType === 'line' ? item.value[1] : item.value;
const unit = item.seriesName.includes('份额') ? '%' : '万元';
result += `
<div style="display:flex;align-items:center;margin:2px 0;">
<span style="display:inline-block;width:10px;height:10px;background:${item.color};margin-right:5px;"></span>
${item.seriesName}: ${value}${unit}
</div>
`;
});
return result;
},
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#ccc',
borderWidth: 1,
textStyle: {
color: '#333'
}
},
// 6. 工具箱配置
toolbox: {
feature: {
saveAsImage: {
type: 'png',
name: '销售数据统计',
backgroundColor: '#fff'
},
dataView: {
readOnly: false,
lang: ['数据视图', '关闭', '刷新'],
buttonColor: '#5470c6'
},
restore: {},
dataZoom: {
yAxisIndex: false
},
magicType: {
type: ['line', 'bar', 'stack']
}
},
right: 20,
top: 10
},
// 7. 数据缩放配置
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100,
bottom: 25,
height: 20
},
{
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 100
}
],
// 8. 视觉映射配置
visualMap: {
type: 'continuous',
dimension: 1, // 映射到数据的第二个维度（销售额）
seriesIndex: 0, // 应用到第一个系列（产品A）
min: 0,
max: 200,
inRange: {
color: ['#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
},
right: 10,
top: 'center',
textStyle: {
color: '#666'
}
},
// 9. 系列配置
series: [
// 产品A销售额 - 折线图
{
name: '产品A销售额',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
['2024-01-15', 120],
['2024-02-15', 132],
['2024-03-15', 101],
['2024-04-15', 134],
['2024-05-15', 90],
['2024-06-15', 230],
['2024-07-15', 210],
['2024-08-15', 182],
['2024-09-15', 191],
['2024-10-15', 234],
['2024-11-15', 290],
['2024-12-15', 330]
],
smooth: true,
lineStyle: {
color: '#5470c6',
width: 3
},
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [{
offset: 0, color: 'rgba(84, 112, 198, 0.5)'
}, {
offset: 1, color: 'rgba(84, 112, 198, 0.1)'
}]
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
// 产品B销售额 - 柱状图
{
name: '产品B销售额',
type: 'bar',
xAxisIndex: 1, // 使用第二个x轴（类目轴）
yAxisIndex: 0,
data: [150, 230, 224, 218],
itemStyle: {
color: '#91cc75'
},
label: {
show: true,
position: 'top',
formatter: '{c}万元'
}
},
// 市场份额 - 折线图（使用右侧y轴）
{
name: '市场份额',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 1,
data: [
['2024-01-15', 25],
['2024-02-15', 28],
['2024-03-15', 26],
['2024-04-15', 32],
['2024-05-15', 30],
['2024-06-15', 35],
['2024-07-15', 38],
['2024-08-15', 36],
['2024-09-15', 40],
['2024-10-15', 42],
['2024-11-15', 45],
['2024-12-15', 48]
],
lineStyle: {
color: '#ee6666',
width: 2,
type: 'dashed'
},
itemStyle: {
color: '#ee6666'
},
symbol: 'circle',
symbolSize: 6
}
],
// 10. 动画配置
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut'
};
// 使用配置项和数据显示图表
myChart.setOption(option);
// 11. 事件处理
myChart.on('click', function(params) {
console.log('图表点击事件:', params);
if (params.componentType === 'series') {
alert(`您点击了 ${params.seriesName}\n数值: ${params.value}`);
}
});
myChart.on('dataZoom', function(params) {
console.log('数据缩放:', params);
});
// 窗口大小改变时重绘图表
window.addEventListener('resize', function() {
myChart.resize();
});
</script>
</body>
</html>