echarts配置项详细解释

ECharts 是一款基于 JavaScript 的数据可视化库，其核心配置通过 option 对象定义，包含图表的结构、数据、样式、交互等所有信息。以下是对 ECharts 核心配置项的详细解释，按功能模块分类说明：

一、顶层基础配置

顶层配置是 option 对象的直接属性，用于定义图表的全局信息、基础组件和整体样式。

1. title - 标题组件

用于设置图表的主标题和副标题，支持多标题（数组形式）。
常用属性：

• text：主标题文本（如 '2024年销售数据'）。
• subtext：副标题文本（如 '单位：万元'）。
• left/right/top/bottom：标题位置（可选 'center'/'left'/'right' 或具体像素值，如 10）。
• textStyle：主标题样式（如 { color: '#333', fontSize: 16 }）。
• subtextStyle：副标题样式，同 textStyle。

示例：

title: {text: '月度销售额',subtext: '2024年1-6月',left: 'center',textStyle: { fontSize: 18 }
}

2. tooltip - 提示框组件

鼠标悬停在图表元素上时显示的提示信息，支持自定义内容和样式。
核心属性：

• trigger：触发方式（必选）：
  • 'item'：针对散点图、饼图等，触发单个数据项。
  • 'axis'：针对折线图、柱状图等，触发整个坐标轴上的所有数据。
• formatter：提示框内容格式化（支持字符串模板或函数）：
  • 字符串模板（如 '{a} <br/>{b}: {c}万元'，{a} 为系列名，{b} 为类目名，{c} 为值）。
  • 函数（如 (params) => { return params[0].name + ': ' + params[0].value; }）。
• backgroundColor：背景色（如 'rgba(0,0,0,0.7)'）。
• axisPointer：坐标轴指示器（仅 trigger: 'axis' 生效），如 { type: 'shadow' }（阴影指示器，适合柱状图）。

示例：

tooltip: {trigger: 'axis',formatter: '{b}月: {c}万元',axisPointer: { type: 'line' } // 线指示器，适合折线图
}

3. legend - 图例组件

用于标识不同系列的数据（如折线图的多条线、饼图的不同类别），点击可切换系列显示/隐藏。
常用属性：

• data：图例名称数组（需与 series.name 对应，如 ['产品A', '产品B']）。
• left/top：图例位置（如 'right' 靠右显示）。
• orient：排列方向（'horizontal' 横向，'vertical' 纵向）。

示例：

legend: {data: ['产品A', '产品B'],top: 10,left: 'center'
}

4. grid - 直角坐标系网格

定义折线图、柱状图等直角坐标系内绘图区域的位置和大小（避免图表元素与边缘重叠）。
核心属性：

• left/right/top/bottom：网格距离容器边缘的距离（如 '3%' 或 30 像素）。
• containLabel：是否包含坐标轴标签（设为 true 可避免标签被截断）。

示例：

grid: {left: '5%',right: '5%',bottom: '10%',containLabel: true
}

5. xAxis / yAxis - 坐标轴组件

直角坐标系的 X 轴和 Y 轴，支持多坐标轴（数组形式，如多个 Y 轴）。
核心属性：

• type：坐标轴类型（必选）：
  • 'category'：类目轴（适用于离散数据，如月份、产品名），需配合 data 定义类目。
  • 'value'：数值轴（适用于连续数据，如销售额、温度，自动计算范围）。
  • 'time'：时间轴（适用于时间序列数据，自动解析时间格式）。
• data：类目轴的类目数据（仅 type: 'category' 生效，如 ['1月', '2月']）。
• name：坐标轴名称（如 '销售额（万元）'）。
• axisLabel：坐标轴刻度标签样式（如 { rotate: 45 } 旋转标签避免重叠）。
• splitLine：网格线样式（如 { lineStyle: { color: '#eee' } } 浅灰色网格线）。

示例（X轴为类目轴）：

xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月'],axisLabel: { rotate: 30 } // 标签旋转30度
}

示例（Y轴为数值轴）：

yAxis: {type: 'value',name: '销售额（万元）',splitLine: { lineStyle: { color: '#f0f0f0' } }
}

二、核心数据配置 series

series 是 ECharts 最核心的配置项，定义图表的数据和类型（如折线图、柱状图），支持多系列（数组形式）。

每个系列对象的核心属性：

• name：系列名称（需与 legend.data 对应，用于图例和提示框）。
• type：图表类型（必选），如 'line'（折线图）、'bar'（柱状图）、'pie'（饼图）、'scatter'（散点图）等。
• data：系列数据（根据图表类型格式不同）。

1. 折线图/柱状图（type: 'line' / 'bar'）

适用于展示趋势或对比数据，依赖直角坐标系（需配置 xAxis/yAxis）。
特有属性：

• data：数组形式，如 [120, 200, 150]（与 xAxis.data 一一对应）。
• lineStyle（折线图）：线条样式（如 { width: 2, color: '#5470c6' }）。
• itemStyle：数据点/柱形样式（如 { color: '#5470c6' } 定义柱形颜色）。
• smooth（折线图）：是否平滑曲线（true 为平滑，false 为折线）。
• barWidth（柱状图）：柱形宽度（如 '60%' 占类目宽度的比例）。

示例（折线图）：

series: [{name: '产品A',type: 'line',data: [120, 190, 150, 230],smooth: true,lineStyle: { width: 3 },itemStyle: { color: '#5470c6' }}
]

2. 饼图（type: 'pie'）

适用于展示占比数据，不依赖直角坐标系，通过 radius 和 center 定位。
特有属性：

• data：数组对象，每个对象含 name（类别名）和 value（数值），如 [{ name: '手机', value: 30 }, { name: '电脑', value: 20 }]。
• radius：饼图半径（如 '60%' 或 ['40%', '70%'] 为环形图）。
• center：饼图中心位置（如 ['50%', '50%'] 居中）。
• label：扇区标签（如 { show: true, formatter: '{b}: {c} ({d}%)' }，{d} 为百分比）。
• roseType：是否为南丁格尔图（'radius' 按半径区分大小，适合对比数据差异）。

示例（环形图）：

series: [{type: 'pie',data: [{ name: '电商', value: 40 },{ name: '门店', value: 30 },{ name: '批发', value: 20 }],radius: ['40%', '70%'], // 内半径40%，外半径70%label: { formatter: '{b}: {d}%' }}
]

3. 散点图（type: 'scatter'）

适用于展示两个变量的相关性，数据格式为含 x 和 y 的对象数组。
特有属性：

• data：数组对象，如 [{ x: 10, y: 20 }, { x: 15, y: 25 }]。
• symbolSize：点的大小（可固定值如 10，或函数动态计算 (data) => data.value[2]）。
• itemStyle：点的样式（如颜色随值变化，结合 visualMap）。

三、交互与样式配置

1. toolbox - 工具栏组件

提供图表的常用工具（如下载图片、数据视图、刷新等）。
常用属性：

• feature：工具集合，如：
  • saveAsImage：下载图片（{ show: true }）。
  • dataView：数据视图（可编辑数据，{ show: true }）。
  • restore：刷新图表（{ show: true }）。

示例：

toolbox: {feature: {saveAsImage: { show: true },dataView: { show: true },restore: { show: true }}
}

2. visualMap - 视觉映射组件

将数据值映射到视觉通道（如颜色、大小），增强数据表现力。
常用类型：

• 连续型（type: 'continuous'）：适用于连续数据，如销售额映射颜色深浅。
• 分段型（type: 'piecewise'）：适用于离散数据，如评分等级映射不同颜色。

示例（连续型颜色映射）：

visualMap: {type: 'continuous',min: 0, // 数据最小值max: 300, // 数据最大值range: [0, 300], // 映射范围inRange: { color: ['#fff', '#5470c6'] } // 颜色从白色到蓝色渐变
},
series: [{type: 'scatter',data: [{ x: 10, y: 20, value: 50 }, { x: 15, y: 25, value: 200 }] // value用于映射
}]

3. color - 全局颜色配置

定义图表的默认颜色列表，系列未单独设置颜色时从该列表取色。
示例：

color: ['#5470c6', '#91cc75', '#fac858'], // 系列1用#5470c6，系列2用#91cc75...

4. 动画配置

控制图表加载和交互时的动画效果，顶层或系列内均可配置：

• animation：是否开启动画（true/false）。
• animationDuration：动画时长（如 1000 毫秒）。
• animationEasing：动画缓动效果（如 'cubicOut' 减速动画）。

四、配置项层级关系

ECharts 配置项遵循层级嵌套规则，核心结构如下：

option = {title: {}, // 标题tooltip: {}, // 提示框legend: {}, // 图例grid: {}, // 网格（直角坐标系）xAxis: {}, // X轴yAxis: {}, // Y轴toolbox: {}, // 工具栏visualMap: {}, // 视觉映射color: [], // 全局颜色series: [ // 数据系列（核心）{ name: '', type: '', data: [] }, // 系列1{ name: '', type: '', data: [] }  // 系列2]
};

总结

ECharts 配置项通过 option 对象组织，核心逻辑是：

1. 用 title/legend 定义图表说明；
2. 用 xAxis/yAxis/grid 搭建直角坐标系（饼图等无需）；
3. 用 series 配置核心数据和图表类型；
4. 用 tooltip/toolbox 增强交互体验；
5. 用 color/visualMap 优化视觉样式。

实际使用时，可根据图表类型（折线、柱状、饼图等）调整配置项，ECharts 官网提供了丰富的示例和配置文档，可进一步参考。