ECharts
一、饼图配置
1. title（标题组件）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| text | string | 主标题文本- 有数据：显示总数（如 “估值总数：100”）- 无数据：显示提示文字（如 “暂无数据”） | 有数据："估值总数：120"；无数据："暂无估值数据" | 支持换行符\n，如"估值总数：120\n（环比+5%）" |
| subtext | string | 副标题文本，固定显示 “产品估值总数” | "产品估值总数" | 可结合subtextStyle做二级说明，如补充统计时间 |
| left | string/number | 水平位置，居中对齐- 字符串：'center'/'left'/'right'- 数字：像素值（如 20）或百分比（如 '20%'） | 'center' | 优先级：百分比 > 固定像素，响应式布局建议用百分比 |
| top | string/number | 垂直位置，动态调整- 有数据：'10%'（靠上）- 无数据：'50%'（居中） | 有数据：'10%'；无数据：'50%' | 也可设为像素值（如 50），需适配容器高度 |
| textStyle | Object | 主标题样式 | - | - |
| textStyle.fontSize | number | 主标题字体大小 | 16 | 常规取值：12-24px，无数据时可调大至 18px |
| textStyle.fontWeight | string/number | 字体粗细- 字符串：'bold'/'normal'/'lighter'- 数字：100-900（400=normal，700=bold） | 'bold' | 无数据提示文字建议用'normal'，降低视觉权重 |
| textStyle.color | string | 字体颜色 | '#333333' | 支持十六进制、RGB、RGBA，无数据时可用'#999' |
| textStyle.fontFamily | string | 字体类型 | 'Microsoft Yahei, sans-serif' | 适配多端建议用通用字体 |
| textStyle.lineHeight | number | 行高（多行文本题） | 24 | 仅对换行文本生效 |
| subtextStyle | Object | 副标题样式 | - | - |
| subtextStyle.fontSize | number | 副标题字体大小 | 12 | 通常比主标题小 2-4px |
| subtextStyle.color | string | 副标题颜色 | '#666666' | 建议浅于主标题，增强层级 |
| subtextStyle.fontStyle | string | 字体样式 | 'normal'/'italic'（斜体） | 一般用normal，特殊场景可加斜体 |
| show | boolean | 控制标题整体是否显示 | true | 无数据时可设为true（仅显示提示文字），也可设为false隐藏 |
2. tooltip（提示框组件）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| trigger | string | 触发类型，饼图固定为'item'（点击 / 悬浮单个扇区触发） | 'item' | 对比：柱状图常用'axis'（坐标轴触发） |
| formatter | string/Function | 提示框内容格式化- 字符串模板：'{b}: {c} ({d}%)'（名称：数值（百分比））- 函数：自定义更灵活的格式 | 函数示例：(params) => {return 数量：{params.value}占比：${params.percent}%;} | 支持 HTML 标签（如<br>换行、<span style="">样式） |
| show | boolean | 控制提示框显示- 有数据：true- 无数据：false | 有数据：true；无数据：false | 也可通过tooltip.disabled全局禁用 |
| backgroundColor | string | 提示框背景色 | 'rgba(0,0,0,0.7)' | 建议用半透明黑色，增强可读性 |
| textStyle | Object | 提示框内文字样式 | { fontSize: 12, color: '#fff' } | 文字需与背景色对比明显 |
| padding | number/Array | 提示框内边距 | [10, 15]（上下 10px，左右 15px） | 单数值：四边统一；数组：[上，右，下，左] |
| borderRadius | number | 提示框圆角 | 4 | 取值越大越圆润，适配 UI 风格 |
| triggerOn | string | 触发时机 | 'mousemove'（悬浮）/'click'（点击） | 饼图默认'mousemove'，需精准触发可设为'click' |
3. legend（图例组件）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| show | boolean | 饼图中固定设为false（隐藏图例） | false | 如需显示，可结合以下扩展属性 |
| data | Array | 图例数据（显示时需配置） | ['估值成功', '估值失败', '估值异常'] | 需与 series.data 的 name 一一对应 |
| left/right/top/bottom | string/number | 图例位置 | 'right'/'bottom' | 饼图显示图例建议放右侧或底部 |
| textStyle | Object | 图例文字样式 | { fontSize: 12, color: '#666' } | - |
| itemWidth/itemHeight | number | 图例标记宽高 | 12/12 | 控制图例前小方块 / 圆点大小 |
| itemGap | number | 图例项之间的间距 | 15 | 单位 px，避免图例挤在一起 |
4. series（系列列表，饼图核心配置）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 | ||
|---|---|---|---|---|---|---|
| name | string | 系列名称，用于 tooltip 和图例关联 | "估值状态" | 需与图例 data、提示框 params.name 对应 | ||
| type | string | 图表类型，固定为'pie' | 'pie' | - | ||
| radius | Array | 饼图半径（环形饼图）- 第一个值：内半径- 第二个值：外半径 | ['60%', '80%'] | 单位：百分比（相对容器）或像素（如[60, 80]）；纯饼图设为['0%', '80%'] | ||
| avoidLabelOverlap | boolean | 防止标签重叠策略- true：自动调整标签位置- false：不调整 | true | 数据类别多（>5 个）时建议设为true，避免标签挤在一起 | ||
| emphasis | Object | 高亮样式（悬浮 / 点击扇区时） | - | - | ||
| emphasis.itemStyle | Object | 高亮扇区样式 | - | - | ||
| emphasis.itemStyle.shadowBlur | number | 阴影模糊大小 | 10 | 值越大阴影越模糊，增强高亮视觉效果 | ||
| emphasis.itemStyle.shadowOffsetX | number | 阴影水平偏移 | 2 | 正数右移，负数左移 | ||
| emphasis.itemStyle.shadowColor | string | 阴影颜色 | 'rgba(0,0,0,0.3)' | 建议半透明，避免太突兀 | ||
| emphasis.itemStyle.color | string | 高亮时扇区颜色（可选） | '#ff7f50' | 可单独覆盖原颜色，增强对比 | ||
| label | Object | 扇区标签（显示分类 / 数值 / 占比） | - | - | ||
| label.show | boolean | 控制标签显示- 有数据：true- 无数据：false | 有数据：true；无数据：false | - | ||
| label.formatter | string/Function | 标签内容格式化 | 字符串模板：'{b}: {d}%'；函数：(params) => params.name({params.percent}%)`` | 支持富文本（结合rich） | ||
| label.rich | Object | 富文本样式（自定义标签不同部分样式） | {<br> name: { color: '#333', fontSize: 12 },<br> percent: { color: '#999', fontSize: 10 }<br>} | 配合 formatter 使用：`'{name | {b}} {percent | ({d}%)}'` |
| label.fontSize | number | 标签字体大小 | 12 | - | ||
| label.color | string | 标签字体颜色 | '#333' | - | ||
| label.position | string | 标签位置 | 'outside'（外部）/'inside'（内部）/'center'（中心） | 环形饼图建议'outside'，纯饼图可'inside' | ||
| labelLine | Object | 标签引导线（仅 label.position=outside 时生效） | - | - | ||
| labelLine.show | boolean | 控制引导线显示 | true | 标签在外部时建议显示，增强关联 | ||
| labelLine.length | number | 第一段引导线长度 | 15 | 单位 px，控制引导线第一段长度 | ||
| labelLine.length2 | number | 第二段引导线长度 | 10 | 第二段为从第一段到标签的线段 | ||
| labelLine.lineStyle | Object | 引导线样式 | - | - | ||
| labelLine.lineStyle.color | string | 引导线颜色 | '#ccc' | - | ||
| labelLine.lineStyle.width | number | 引导线宽度 | 1 | - | ||
| labelLine.lineStyle.type | string | 引导线类型 | 'solid'（实线）/'dashed'（虚线） | - | ||
| data | Array | 饼图数据数组格式：[{ name: '分类1', value: 10 }, { name: '分类2', value: 20 }] | 有数据：[{ name: '估值成功', value: 80 }, { name: '估值失败', value: 20 }]；无数据：[] | 无数据时需置空，避免图表报错 | ||
| center | Array | 饼图中心坐标- 第一个值：水平中心（百分比 / 像素）- 第二个值：垂直中心（百分比 / 像素） | ['50%', '50%'] | 无数据时可调整为['50%', '40%']，配合标题居中 | ||
| itemStyle | Object | 扇区基础样式（非高亮状态） | - | - | ||
| itemStyle.color | string/Function | 扇区颜色- 字符串：固定颜色- 函数：动态分配颜色 | 函数示例：(params) => {const colors = ['#4E87ED', '#FF6B6B', '#FCC367'];<br> return colors[params.dataIndex];<br>} | 也可通过color全局配置颜色列表 | ||
| itemStyle.borderColor | string | 扇区间隔线颜色 | '#fff' | 设为白色，增强扇区分隔 | ||
| itemStyle.borderWidth | number | 扇区间隔线宽度 | 1 | - | ||
| animation | boolean | 是否开启动画 | true | 无数据时建议设为false，避免空动画 | ||
| animationDuration | number | 动画时长 | 1000 | 单位 ms，控制饼图加载动画速度 |
5. 全局补充属性（饼图通用）
| 属性 | 类型 | 说明 | 示例 |
|---|---|---|---|
| backgroundColor | string | 图表容器背景色 | 'transparent'（透明） |
| tooltip.axisPointer | Object | 坐标轴指示器（饼图一般不用，柱状图常用） | - |
| grid | Object | 直角坐标系网格（饼图无坐标系，无需配置） | - |
二、柱状图配置
1. tooltip（提示框组件）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| trigger | string | 触发类型，柱状图固定为'axis'（悬浮坐标轴触发，显示该分类下所有系列数据） | 'axis' | 对比：饼图为'item' |
| axisPointer | Object | 坐标轴指示器（悬浮时的高亮指示） | - | - |
| axisPointer.type | string | 指示器类型，柱状图常用'shadow'（阴影覆盖整个柱形） | 'shadow' | 其他值：'line'（直线，折线图用）、'none'（无） |
| axisPointer.backgroundColor | string | 指示器背景色 | 'transparent'（透明） | 设为透明，仅保留阴影轮廓 |
| axisPointer.borderWidth | number | 指示器边框宽度 | 0 | 隐藏边框，仅显示阴影 |
| axisPointer.shadowStyle | Object | 阴影指示器样式（补充） | { color: 'rgba(0,0,0,0.05)' } | 自定义阴影颜色 / 透明度 |
| formatter | Function | 提示框内容格式化函数（比字符串模板更灵活） | (params) => {<br> let res = params[0].axisValue; // x轴类目名<br> params.forEach(item => {<br> res += `<br>${item.seriesName}：${item.value}`;<br> });<br> return res;<br>} | 支持 HTML 标签，可自定义样式 |
| show | boolean | 控制提示框显示 | true | 无数据时设为false |
| backgroundColor | string | 提示框背景色 | 'rgba(0,0,0,0.7)' | - |
| padding | Array | 提示框内边距 | [8, 12] | - |
| textStyle | Object | 提示框文字样式 | { fontSize: 12, color: '#fff' } | - |
2. grid（直角坐标系内绘图网格）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| left | string/number | 网格左侧距离容器的距离 | '5%' | 百分比 / 像素，预留空间给 y 轴标签 |
| right | string/number | 网格右侧距离容器的距离 | '5%' | - |
| top | string/number | 网格顶部距离容器的距离 | '15%' | 预留空间给标题 / 图例 |
| bottom | string/number | 网格底部距离容器的距离 | '15%' | 预留空间给 x 轴标签 / 图例 |
| containLabel | boolean | 是否包含坐标轴刻度标签- true：网格范围包含标签，避免标签被截断- false：网格仅包含绘图区域 | true | 必设为true，否则 x/y 轴标签可能超出容器 |
| backgroundColor | string | 网格背景色 | 'transparent' | - |
| borderColor | string | 网格边框颜色 | '#eee' | 可设为浅灰色，区分网格区域 |
| borderWidth | number | 网格边框宽度 | 0 | 隐藏边框设为 0 |
3. xAxis（x 轴，类目轴）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| type | string | 坐标轴类型，柱状图 x 轴固定为'category'（类目轴） | 'category' | 其他值：'value'（数值轴）、'time'（时间轴） |
| data | Array | x 轴类目数据（产品类型） | ['产品A', '产品B', '产品C', '产品D'] | 无数据时设为[]，避免轴显示异常 |
| axisLine | Object | 坐标轴轴线设置 | - | - |
| axisLine.lineStyle | Object | 轴线样式 | - | - |
| axisLine.lineStyle.color | string | 轴线颜色 | '#e6e6e6' | 浅灰色，弱化轴线视觉 |
| axisLine.lineStyle.width | number | 轴线宽度 | 1 | - |
| axisLine.lineStyle.type | string | 轴线类型 | 'solid' | - |
| axisLine.show | boolean | 是否显示轴线 | true | 可设为false隐藏，仅保留刻度 / 标签 |
| axisTick | Object | 坐标轴刻度设置 | - | - |
| axisTick.alignWithLabel | boolean | 刻度线与标签对齐- true：刻度线宽度匹配标签宽度- false：刻度线居中 | true | 类目轴必设，避免刻度线偏移 |
| axisTick.show | boolean | 是否显示刻度线 | true | - |
| axisTick.length | number | 刻度线长度 | 5 | 单位 px，控制刻度线长短 |
| axisTick.lineStyle | Object | 刻度线样式 | { color: '#e6e6e6' } | - |
| axisLabel | Object | 坐标轴刻度标签设置 | - | - |
| axisLabel.rotate | number | 标签文字旋转角度- 正数：逆时针旋转- 负数：顺时针旋转 | 30（逆时针 30 度） | 类目名过长时旋转，避免重叠 |
| axisLabel.interval | number/Function | 标签显示间隔- 数字：隔 n 个显示一个（0 = 全部显示）- 函数：自定义显示逻辑 | 0（全部显示）/(index) => index % 2 === 0（隔一个显示） | 类目多（>8 个）时建议设为 1 或自定义函数 |
| axisLabel.fontSize | number | 标签字体大小 | 12 | - |
| axisLabel.color | string | 标签字体颜色 | '#666666' | - |
| axisLabel.margin | number | 标签与轴线的距离 | 10 | 单位 px，避免标签贴紧轴线 |
| axisLabel.formatter | string/Function | 标签格式化 | (value) => value.length > 4 ? value.substring(0,4)+'...' : value（超长截断） | 类目名过长时截断 / 换行 |
| splitLine | Object | x 轴分割线（类目轴一般隐藏） | { show: false } | 数值轴常用，类目轴无需显示 |
4. yAxis（y 轴，数值轴）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| type | string | 坐标轴类型，柱状图 y 轴固定为'value'（数值轴） | 'value' | - |
| min | number/Function | 坐标轴最小值- 数字：固定最小值（如 0）- 函数：动态计算（如(value) => Math.floor(value.min / 10) * 10） | 0 | 柱状图建议设为 0，避免数值对比失真 |
| max | number/Function | 坐标轴最大值 | (value) => Math.ceil(value.max / 10) * 10（向上取整） | 动态适配数据，避免柱形超出网格 |
| interval | number/Function | 坐标轴刻度间隔 | 10/(max) => max / 5（均分 5 段） | 控制刻度数量，建议 5-8 个刻度 |
| splitLine | Object | 网格分割线（y 轴核心，区分数值层级） | - | - |
| splitLine.show | boolean | 是否显示分割线 | true | 必设为 true，增强可读性 |
| splitLine.lineStyle | Object | 分割线样式 | - | - |
| splitLine.lineStyle.color | string | 分割线颜色 | '#f5f5f5' | 浅灰色，弱化分割线 |
| splitLine.lineStyle.width | number | 分割线宽度 | 1 | - |
| splitLine.lineStyle.type | string | 分割线类型 | 'solid'/'dashed' | 虚线可降低视觉干扰 |
| axisLine | Object | y 轴轴线设置 | - | - |
| axisLine.show | boolean | 是否显示 y 轴轴线 | false | 柱状图一般隐藏 y 轴轴线，仅保留分割线 |
| axisLine.lineStyle | Object | 轴线样式 | { color: '#e6e6e6' } | 显示时配置 |
| axisLabel | Object | y 轴刻度标签设置 | - | - |
| axisLabel.fontSize | number | 标签字体大小 | 12 | - |
| axisLabel.color | string | 标签字体颜色 | '#666666' | - |
| axisLabel.formatter | string/Function | 标签格式化 | '{value} 个'（添加单位） | 如数值是数量，可加 “个 / 件 / 次” 等单位 |
| axisTick | Object | y 轴刻度设置 | { show: false } | 柱状图一般隐藏 y 轴刻度线 |
| scale | boolean | 是否脱离 0 值比例- true：根据数据范围自动缩放（如数据都是 1000+，可从 1000 开始）- false：强制从 0 开始 | false | 柱状图建议false，保证对比公平 |
5. series（系列列表，柱状图核心）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| name | string | 系列名称（与图例、提示框关联） | "估值失败"/"估值成功" | 需与 legend.data 一一对应 |
| type | string | 图表类型，固定为'bar' | 'bar' | - |
| stack | string | 数据堆叠标识- 同名 stack 的系列会堆叠显示- 无 stack：并列显示 | "total"（所有系列堆叠） | 如需堆叠柱状图，所有系列设相同 stack 值；并列则不设 |
| barWidth | string/number | 柱条宽度- 字符串：百分比（相对类目宽度，如'60%'）- 数字：固定像素（如 20） | '60%' | 建议用百分比，适配不同类目数量 |
| barGap | string | 同系列柱条间距 | '10%' | 仅并列柱状图生效 |
| barCategoryGap | string | 不同系列柱条间距 | '20%' | 仅并列柱状图生效 |
| data | Array | 系列数据数组格式：[10, 20, 30, 40]（与 xAxis.data 一一对应） | 堆叠示例：估值成功：[80, 70, 90, 85]估值失败：[20, 10, 5, 15] | 无数据时设为[] |
| itemStyle | Object | 柱形样式 | - | - |
| itemStyle.color | string/Function | 柱形颜色- 固定值：'#4E87ED'（估值成功）/'#FF6B6B'（估值失败）- 函数：动态分配 | 函数示例：(params) => {const colors = ['#4E87ED', '#FF6B6B'];<br> return colors[params.seriesIndex];<br>} | 可结合主题配置统一颜色 |
| itemStyle.borderRadius | Array/number | 柱形圆角- 数字：四角统一圆角- 数组：[左上，右上，右下，左下] | [4, 4, 0, 0]（仅顶部圆角） | 增强视觉美观度 |
| itemStyle.borderWidth | number | 柱形边框宽度 | 0 | 隐藏边框 |
| label | Object | 柱形标签（显示数值） | - | - |
| label.show | boolean | 控制标签显示 | false（默认隐藏，如需显示设为 true） | 数据量少、数值小的时候可显示 |
| label.position | string | 标签位置 | 'top'（顶部）/'inside'（内部）/'bottom'（底部） | 显示时建议'top'，避免遮挡柱形 |
| label.fontSize | number | 标签字体大小 | 12 | - |
| label.color | string | 标签字体颜色 | '#333' | - |
| animation | boolean | 是否开启动画 | true | 无数据时设为false |
| animationEasing | string | 动画缓动效果 | 'cubicOut' | 控制柱形加载动画的速度曲线 |
6. legend（图例组件）
| 属性 | 类型 | 详细说明 | 示例 / 默认值 | 补充扩展 |
|---|---|---|---|---|
| show | boolean | 控制图例显示 | true | 无数据时设为false |
| bottom | string/number | 图例底部距离容器的距离 | '5%' | 也可设为'top'/'left'/'right' |
| data | Array | 图例数据（与 series.name 一一对应） | ['估值失败', '估值成功'] | 顺序与 series 顺序一致 |
| textStyle | Object | 图例文字样式 | - | - |
| textStyle.fontSize | number | 文字大小 | 12 | - |
| textStyle.color | string | 文字颜色 | '#666666' | - |
| textStyle.fontWeight | string | 文字粗细 | 'normal' | - |
| itemType | string | 图例标记类型 | 'rect'（矩形）/'circle'（圆形）/'triangle'（三角形） | 柱状图建议用'rect'，匹配柱形样式 |
| borderRadius | number | 图例标记圆角 | 2 | 配合 itemType=rect 使用，增强圆润度 |
| itemWidth | number | 图例标记宽度 | 12 | - |
| itemHeight | number | 图例标记高度 | 12 | - |
| itemGap | number | 图例项之间的间距 | 20 | 单位 px，避免图例挤在一起 |
| align | string | 图例项对齐方式 | 'left'/'center'/'right' | 'center'（默认） |
| orient | string | 图例排列方式 | 'horizontal'（水平）/'vertical'（垂直） | 柱状图建议'horizontal'（底部水平排列） |
7. 全局补充属性（柱状图通用）
| 属性 | 类型 | 说明 | 示例 | |
|---|---|---|---|---|
| title | Object | 标题配置（同饼图，可参考饼图 title 属性） | { text: '产品估值统计', left: 'center', top: '5%' } | |
| backgroundColor | string | 图表容器背景色 | 'transparent' | |
| animationDuration | number | 图表加载动画时长 | 1000 | |
| responsive | boolean | 是否开启响应式 | true | 适配不同屏幕尺寸，自动调整布局 |
扫一扫
7183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
