企业官网建设流程全解析

ECharts 配置语法详解

Apache ECharts 的配置项（option）是图表的核心，使用纯 JSON 对象格式（JavaScript 对象字面量）。它采用声明式语法：你只需描述“图表应该长什么样”，ECharts 会自动渲染。

当前官方文档主要基于ECharts 5.x 和 6.x（最新特性支持到 v6.0.0+），配置语法在 5.x 后相对稳定。

1. option 基本结构

一个典型的 option 对象结构如下：

varoption={// 全局配置backgroundColor:'#fff',// 背景色color:['#5470c6','#91cc75','#fac858',...],// 全局调色盘（系列自动取色）// 组件配置（可多个）title:{...},// 标题legend:{...},// 图例tooltip:{...},// 提示框toolbox:{...},// 工具箱grid:{...},// 直角坐标系网格xAxis:{...},// X 轴yAxis:{...},// Y 轴visualMap:{...},// 视觉映射dataZoom:{...},// 数据缩放// 数据系列（核心，必填，至少一个）series:[{type:'bar',// 图表类型name:'系列1',data:[10,20,30],itemStyle:{...},// 图形样式label:{...},// 数据标签emphasis:{...}// 高亮样式（悬停时）},// ... 更多系列],// 其他高级配置media:[...],// 响应式配置animation:true// 动画开关};

2. 配置规则与语法要点

• 层级嵌套：配置项采用树状结构，子属性独立配置。例如title.textStyle.color只影响标题文本颜色。
• 合并与覆盖：
  • 同层级重复属性，后者覆盖前者。
  • 对象合并：子属性不会整体覆盖，而是逐个合并（例如修改textStyle.fontSize不会影响其他 textStyle 属性）。
  • 系列 > 组件 > 全局 的优先级（局部覆盖全局）。
• 数组支持多实例：如title: [{...}, {...}]可显示多个标题；series天然支持多个。
• 函数支持：许多属性支持函数形式，用于动态计算。例如：

  tooltip:{formatter:function(params){return'值: '+params.value;}}

• 富文本（Rich Text）：在文本属性（如title.text、label.formatter）中使用{style|文本}语法，结合rich对象定义复杂样式。

  label:{formatter:'{a|富文本}\n{c|值: {c}}',rich:{a:{color:'red',fontSize:16},c:{backgroundColor:'#eee',padding:5}}}

• 响应式配置（media query）：

  media:[{query:{maxWidth:600},// 小屏幕option:{grid:{left:20},series:[{itemStyle:{...}}]}},{option:{...}// 默认大屏幕配置}]

3. 样式配置语法（常见）

ECharts 样式设置非常灵活，主要通过以下方式：

• 调色盘：根级color数组，或系列级color。
• 直接样式（推荐扁平写法，ECharts 4+ 不强制用normal）：

  series:[{itemStyle:{// 柱子/点样式color:'#5470c6',// 纯色borderColor:'#000',borderWidth:2,shadowBlur:10,shadowColor:'rgba(0,0,0,0.3)'},lineStyle:{...},// 折线样式areaStyle:{...},// 区域填充label:{// 数据标签show:true,color:'#fff',fontSize:12},emphasis:{// 鼠标悬停高亮itemStyle:{opacity:0.8},label:{show:true}}}]

• 渐变色/纹理：

  color:{type:'linear',x:0,y:0,x2:1,y2:0,colorStops:[{offset:0,color:'red'},{offset:1,color:'blue'}]}

• 主题与视觉映射：通过echarts.init(dom, 'dark')切换主题，或用visualMap根据数据映射颜色/大小。

4. 学习建议

• 官方配置手册（最权威）：https://echarts.apache.org/zh/option.html （完整列出所有配置项）
• 示例 Gallery：https://echarts.apache.org/examples/zh/ （上千个可复制示例，直接查看 option）
• 速查手册：https://echarts.apache.org/zh/cheat-sheet.html （快速定位组件文档）

掌握配置语法的最佳方式是多看官方示例 + 改代码实践。如果你有特定组件（如 tooltip、series）的配置需求，或者想看某个图表的完整 option 示例，随时告诉我！