WEB数据可视化（ECharts）

本文系统总结了ECharts可视化库的核心组件和属性配置。主要内容包括：1）ECharts图表类型（折线图、柱状图等20余种）；2）12个核心组件（标题、坐标轴、图例等）的详细属性表，涵盖显示控制、位置布局、样式配置等；3）数据系列特有属性及交互功能；4）完整的ECharts配置关系图，展示各组件如何协同工作。通过属性表的分类整理，帮助开发者快速查找和掌握ECharts的配置方法，实现丰富的数据可

2501_92104012

1382人浏览 · 2025-10-16 23:59:28

2501_92104012 · 2025-10-16 23:59:28 发布

总结一下最近学到的书的内容：

文本样式属性 (textStyle / subtextStyle)

滚动图例属性 (type: 'scroll')

滚动图例属性 (type: 'scroll')

11. 数据区域缩放组件 (dataZoom) 的详细属性表

滑动条样式属性 (type: 'slider')

内置缩放属性 (type: 'inside')

12.视觉映射组件 (visualMap) 的详细属性表

inRange / outOfRange 视觉元素

文本与标签属性

分段型特有属性 (type: 'piecewise')

连续型特有属性 (type: 'continuous')

样式属性

13. 时间轴组件 (timeline) 的详细属性表：

4.ECharts所有核心概念都用上的完整关系图

1.ECharts简单介绍：

ECharts 是百度开发的一款开源可视化图表库，能轻松实现数据的交互式、高颜值可视化呈现。

.简单柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 入门示例</title>
    <!-- 使用稳定的CDN引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 指定容器大小 -->
    <div id="main" style="width: 1200px;height:600px;"></div>
    
    <script>
        // 初始化图表实例
        var myChart = echarts.init(document.getElementById('main'));
        
        // 完整的柱状图配置（包含数据）
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},  // 鼠标悬停时显示提示
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{ 
                name: '销量',
                type: 'bar',  // 指定图表类型为柱状图
                data: [5, 20, 36, 10, 10, 20]  // 补充数据，这是之前缺少的部分
            }]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应窗口大小变化，自动调整图表尺寸
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>

2.ECharts图表类型名词

`line`	折线图
bar	柱状图
`pie`	饼图
`scatter`	散点图
`effectScatter`	涟漪效果散点图
`radar`	雷达图
`map`	地图
`candlestick`	K线图
`boxplot`	箱线图
`heatmap`	热力图
`graph`	关系图
`lines`	路径图
`tree`	树图
`treemap`	矩形树图
`sunburst`	旭日图
`parallel`	平行坐标系
`sankey`	桑基图
`funnel`	漏斗图
`gauge`	仪表盘

3.ECharts基本名词

title 标题组件	用于设置图表的标题
xAxis 直角坐标系中的横轴	直角坐标系中的横轴，通常默认为类目型
yAxis 直角坐标系中的纵轴	直角坐标系中的纵轴，通常默认为数值型
grid 直角坐标系中除坐标轴外的绘图网格	用于定义直角系整体布局
legend 图例组件	用于表述数据和图形的关联
markPoint 标记点	用于标记图表中特定的点
markLine 标记线	用于标记图表中特定的值
dataZoom 数据区域缩放	用于展现大量数据时选择可视范围
visualMap 视觉映射组件	用于将数据映射到视觉元素
visualMap 视觉映射组件	用于为图表添加辅助功能，如添加标线、框选缩放等
tooltip 提示框组件	用于展现更详细的数据
timeline 时间轴	用于展现同一系列数据在时间维度上的多份数据
series 数据系列	一个图表可能包含多个系列，每个系列可能包含多个数据

1.标题组件属性

以下是 ECharts 标题组件 (title) 的详细属性表：

核心属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示标题组件
`text`	`string`	-	主标题文本，支持使用 `\n` 换行
`link`	`string`	-	主标题文本超链接
`target`	`string`	`'blank'`	链接打开方式，`'self'` 或 `'blank'`
`textStyle`	`Object`	-	主标题文本样式（详见文本样式表）
`subtext`	`string`	-	副标题文本
`sublink`	`string`	-	副标题文本超链接
`subtarget`	`string`	`'blank'`	副标题链接打开方式
`subtextStyle`	`Object`	-	副标题文本样式

位置属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	标题离容器左侧的距离，可选：`'left'`, `'center'`, `'right'` 或具体像素/百分比
`top`	`string`/`number`	`'auto'`	标题离容器顶部的距离，可选：`'top'`, `'middle'`, `'bottom'` 或具体像素/百分比
`right`	`string`/`number`	`'auto'`	标题离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	标题离容器底部的距离
`backgroundColor`	`string`	`'transparent'`	标题背景色
`borderColor`	`string`	`'#ccc'`	标题边框颜色
`borderWidth`	`number`	`0`	标题边框线宽
`borderRadius`	`number`/`Array`	`0`	标题边框圆角半径
`padding`	`number`/`Array`	`5`	标题内边距
`shadowBlur`	`number`	-	阴影模糊大小
`shadowColor`	`string`	-	阴影颜色
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

文本样式属性 (textStyle / subtextStyle)

属性	类型	默认值	描述
`color`	`string`	`#333`	文字颜色
`fontStyle`	`string`	`'normal'`	文字字体风格，`'normal'`, `'italic'`, `'oblique'`
`fontWeight`	`string`/`number`	`'bold'`	文字粗细，`'normal'`, `'bold'`, `'bolder'`, `'lighter'` 或 100-900
`fontFamily`	`string`	`'sans-serif'`	文字字体系列
`fontSize`	`number`	`18`	主标题文字大小，副标题默认 `12`
`lineHeight`	`number`	-	行高
`width`	`number`/`string`	-	文本显示宽度
`height`	`number`/`string`	-	文本显示高度
`textBorderColor`	`string`	`'transparent'`	文字本身的描边颜色
`textBorderWidth`	`number`	`0`	文字本身的描边宽度
`textShadowColor`	`string`	`'transparent'`	文字本身的阴影颜色
`textShadowBlur`	`number`	`0`	文字本身的阴影长度
`textShadowOffsetX`	`number`	`0`	文字本身的阴影 X 偏移
`textShadowOffsetY`	`number`	`0`	文字本身的阴影 Y 偏移
`overflow`	`string`	`'none'`	文字超出宽度是否截断，`'truncate'` 表示截断
`ellipsis`	`string`	`'...'`	在 `overflow` 为 `'truncate'` 时生效

2.坐标轴组件属性

坐标轴类型与显示

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示坐标轴
`type`	`string`	`'category'`	坐标轴类型：`'value'`(数值轴), `'category'`(类目轴), `'time'`(时间轴), `'log'`(对数轴)
`position`	`string`	-	坐标轴位置：xAxis-`'top'`/`'bottom'`, yAxis-`'left'`/`'right'`
`offset`	`number`	`0`	坐标轴偏移量

坐标轴刻度

属性	类型	默认值	描述
`min`	`number`/`string`	-	坐标轴最小值（`'dataMin'`表示数据最小值）
`max`	`number`/`string`	-	坐标轴最大值（`'dataMax'`表示数据最大值）
`scale`	`boolean`	`false`	只在数值轴中有效，是否脱离0值比例
`splitNumber`	`number`	`5`	坐标轴分割段数（预估）
`minInterval`	`number`	-	自动计算的坐标轴最小间隔大小
`maxInterval`	`number`	-	自动计算的坐标轴最大间隔大小

轴线样式

属性	类型	默认值	描述
`axisLine.show`	`boolean`	`true`	是否显示坐标轴轴线
`axisLine.onZero`	`boolean`	`true`	X轴默认垂直Y轴的0位置，Y轴默认垂直X轴的0位置
`axisLine.lineStyle`	`Object`	-	轴线样式（颜色、宽度、类型等）
`axisLine.symbol`	`string`/`Array`	-	轴线两边的箭头，如 `['none', 'arrow']`
`axisLine.symbolSize`	`Array`	`[10, 15]`	箭头大小
`axisLine.symbolOffset`	`Array`/`number`	`0`	箭头偏移

坐标轴刻度

属性	类型	默认值	描述
`axisTick.show`	`boolean`	`true`	是否显示坐标轴刻度
`axisTick.alignWithLabel`	`boolean`	`false`	类目轴中与标签对齐
`axisTick.inside`	`boolean`	`false`	刻度是否朝内
`axisTick.length`	`number`	`5`	刻度长度
`axisTick.lineStyle`	`Object`	-	刻度线样式

坐标轴刻度标签

属性	类型	默认值	描述
`axisLabel.show`	`boolean`	`true`	是否显示刻度标签
`axisLabel.interval`	`number`/`Function`	`'auto'`	刻度标签的显示间隔
`axisLabel.inside`	`boolean`	`false`	刻度标签是否朝内
`axisLabel.rotate`	`number`	`0`	刻度标签旋转角度
`axisLabel.margin`	`number`	`8`	刻度标签与轴线距离
`axisLabel.formatter`	`string`/`Function`	-	刻度标签格式化器
`axisLabel.color`	`Function`/`string`	`'#6b6b6b'`	刻度标签文字颜色
`axisLabel.fontSize`	`number`	`12`	文字字号
`axisLabel.fontWeight`	`string`	`'normal'`	文字粗细

坐标轴网格线

属性	类型	默认值	描述
`splitLine.show`	`boolean`	`true`	是否显示网格线
`splitLine.interval`	`number`/`Function`	`'auto'`	网格线显示间隔
`splitLine.lineStyle`	`Object`	-	网格线样式

分割区域

属性	类型	默认值	描述
`splitArea.show`	`boolean`	`false`	是否显示分割区域
`splitArea.interval`	`number`/`Function`	`'auto'`	分割区域显示间隔
`splitArea.areaStyle`	`Object`	-	分割区域样式

数据相关（类目轴专用）

属性	类型	默认值	描述
`data`	`Array`	-	类目轴数据，如 `['周一','周二','周三']`
`boundaryGap`	`boolean`/`Array`	`true`	类目轴边界间隙，可配`[起点间隙%, 终点间隙%]`

3.图例组件属性

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示图例
`type`	`string`	`'plain'`	图例类型，`'plain'`(普通)，`'scroll'`(可滚动)
`data`	`Array`	-	图例数据数组，如 `['销量', '利润', '成本']`

位置与布局属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	图例离容器左侧的距离
`top`	`string`/`number`	`'auto'`	图例离容器顶部的距离
`right`	`string`/`number`	`'auto'`	图例离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	图例离容器底部的距离
`width`	`string`/`number`	`'auto'`	图例宽度
`height`	`string`/`number`	`'auto'`	图例高度
`orient`	`string`	`'horizontal'`	图例排列方向：`'horizontal'`(水平)，`'vertical'`(垂直)
`align`	`string`	`'auto'`	图例标记和文本的对齐：`'auto'`, `'left'`, `'right'`

图例项样式

属性	类型	默认值	描述
`itemGap`	`number`	`10`	图例每项之间的间隔
`itemWidth`	`number`	`25`	图例标记的图形宽度
`itemHeight`	`number`	`14`	图例标记的图形高度
`itemStyle`	`Object`	-	图例项的样式
`symbolKeepAspect`	`boolean`	`true`	如果图标有宽高比，是否保持宽高比
`formatter`	`string`/`Function`	-	图例文本格式化器

文本样式

属性	类型	默认值	描述
`textStyle`	`Object`	-	图例文本样式
`textStyle.color`	`string`	`#333`	文字颜色
`textStyle.fontSize`	`number`	`12`	文字字号
`textStyle.fontWeight`	`string`	`'normal'`	文字粗细
`textStyle.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`textStyle.rich`	`Object`	-	在富文本标签中定义样式

背景与边框

属性	类型	默认值	描述
`backgroundColor`	`string`	`'transparent'`	图例背景色
`borderColor`	`string`	`'#ccc'`	图例边框颜色
`borderWidth`	`number`	`0`	图例边框线宽
`borderRadius`	`number`/`Array`	`0`	图例边框圆角半径
`padding`	`number`/`Array`	`5`	图例内边距
`shadowColor`	`string`	-	阴影颜色
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

选中与交互

属性	类型	默认值	描述
`selectedMode`	`boolean`/`string`	`true`	图例选中模式，`true`(可多选)，`'single'`(单选)，`false`(不可选)
`selected`	`Object`	-	图例选中状态表，如 `{ '销量': true, '利润': false }`
`inactiveColor`	`string`	`'#ccc'`	图例关闭时的颜色
`inactiveBorderColor`	`string`	-	图例关闭时的边框颜色
`inactiveBorderWidth`	`number`	-	图例关闭时的边框宽度
`selector`	`boolean`/`Array`/`string`	`false`	选择器按钮，用于全选或反选
`selectorLabel`	`Object`	-	选择器标签的样式

滚动图例属性 (type: 'scroll')

属性	类型	默认值	描述
`scrollDataIndex`	`number`	`0`	滚动图例当前滚动位置
`pageButtonItemGap`	`number`	`5`	翻页按钮和图例项之间的间隔
`pageButtonGap`	`number`	`10`	翻页按钮和滚动图例之间的间隔
`pageButtonPosition`	`string`	`'end'`	翻页按钮位置：`'start'`, `'end'`
`pageFormatter`	`string`/`Function`	`'{current}/{total}'`	翻页页脚文本格式化器
`pageIcons`	`Object`	-	翻页按钮的图标
`pageIconColor`	`string`	`'#2f4554'`	翻页按钮颜色
`pageIconInactiveColor`	`string`	`'#aaa'`	翻页按钮不可用时的颜色
`pageIconSize`	`number`/`Array`	`15`	翻页按钮大小
`pageTextStyle`	`Object`	-	翻页页脚的文本样式

4.图例组件属性

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示图例
`type`	`string`	`'plain'`	图例类型，`'plain'`(普通)，`'scroll'`(可滚动)
`data`	`Array`	-	图例数据数组，如 `['销量', '利润', '成本']`
`id`	`string`	-	组件ID，可用于在option或API中引用

位置与布局属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	图例离容器左侧的距离，支持像素值或百分比
`top`	`string`/`number`	`'auto'`	图例离容器顶部的距离
`right`	`string`/`number`	`'auto'`	图例离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	图例离容器底部的距离
`width`	`string`/`number`	`'auto'`	图例宽度
`height`	`string`/`number`	`'auto'`	图例高度
`orient`	`string`	`'horizontal'`	图例排列方向：`'horizontal'`(水平)，`'vertical'`(垂直)
`align`	`string`	`'auto'`	图例标记和文本的对齐：`'auto'`, `'left'`, `'right'`
`icon`	`string`	-	图例项的图标，可覆盖series中的样式

图例项样式

属性	类型	默认值	描述
`itemGap`	`number`	`10`	图例每项之间的间隔
`itemWidth`	`number`	`25`	图例标记的图形宽度
`itemHeight`	`number`	`14`	图例标记的图形高度
`itemStyle`	`Object`	-	图例项的样式
`itemStyle.color`	`string`	-	图例项颜色
`itemStyle.borderColor`	`string`	-	图例项边框颜色
`itemStyle.borderWidth`	`number`	-	图例项边框宽度
`itemStyle.borderType`	`string`	`'solid'`	图例项边框类型
`itemStyle.opacity`	`number`	-	图例项透明度
`symbolKeepAspect`	`boolean`	`true`	如果图标有宽高比，是否保持宽高比
`formatter`	`string`/`Function`	-	图例文本格式化器

文本样式

属性	类型	默认值	描述
`textStyle`	`Object`	-	图例文本样式
`textStyle.color`	`string`	`#333`	文字颜色
`textStyle.fontSize`	`number`	`12`	文字字号
`textStyle.fontWeight`	`string`	`'normal'`	文字粗细
`textStyle.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`textStyle.fontStyle`	`string`	`'normal'`	文字风格
`textStyle.align`	`string`	-	文字水平对齐
`textStyle.verticalAlign`	`string`	-	文字垂直对齐
`textStyle.lineHeight`	`number`	-	行高
`textStyle.rich`	`Object`	-	在富文本标签中定义样式

背景与边框

属性	类型	默认值	描述
`backgroundColor`	`string`	`'transparent'`	图例背景色
`borderColor`	`string`	`'#ccc'`	图例边框颜色
`borderWidth`	`number`	`0`	图例边框线宽
`borderRadius`	`number`/`Array`	`0`	图例边框圆角半径
`borderType`	`string`	`'solid'`	边框类型：`'solid'`, `'dashed'`, `'dotted'`
`padding`	`number`/`Array`	`5`	图例内边距
`shadowColor`	`string`	-	阴影颜色
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

选中与交互

属性	类型	默认值	描述
`selectedMode`	`boolean`/`string`	`true`	图例选中模式，`true`(可多选)，`'single'`(单选)，`false`(不可选)
`selected`	`Object`	-	图例选中状态表，如 `{ '销量': true, '利润': false }`
`inactiveColor`	`string`	`'#ccc'`	图例关闭时的颜色
`inactiveBorderColor`	`string`	-	图例关闭时的边框颜色
`inactiveBorderWidth`	`number`	-	图例关闭时的边框宽度
`inactiveOpacity`	`number`	-	图例关闭时的透明度
`selector`	`boolean`/`Array`/`string`	`false`	选择器按钮，用于全选或反选
`selectorLabel`	`Object`	-	选择器标签的样式
`selectorPosition`	`string`	`'auto'`	选择器位置
`selectorItemGap`	`number`	`7`	选择器按钮之间的间隔
`selectorButtonGap`	`number`	`10`	选择器与图例项之间的间隔

滚动图例属性 (type: 'scroll')

属性	类型	默认值	描述
`scrollDataIndex`	`number`	`0`	滚动图例当前滚动位置
`pageButtonItemGap`	`number`	`5`	翻页按钮和图例项之间的间隔
`pageButtonGap`	`number`	`10`	翻页按钮和滚动图例之间的间隔
`pageButtonPosition`	`string`	`'end'`	翻页按钮位置：`'start'`, `'end'`
`pageFormatter`	`string`/`Function`	`'{current}/{total}'`	翻页页脚文本格式化器
`pageIcons`	`Object`	-	翻页按钮的图标
`pageIconColor`	`string`	`'#2f4554'`	翻页按钮颜色
`pageIconInactiveColor`	`string`	`'#aaa'`	翻页按钮不可用时的颜色
`pageIconSize`	`number`/`Array`	`15`	翻页按钮大小
`pageTextStyle`	`Object`	-	翻页页脚的文本样式

5.网格组件属性

位置与尺寸属性

属性	类型	默认值	描述
`show`	`boolean`	`false`	是否显示直角坐标系网格
`left`	`string`/`number`	`'10%'`	网格离容器左侧的距离
`top`	`string`/`number`	`60`	网格离容器顶部的距离
`right`	`string`/`number`	`'10%'`	网格离容器右侧的距离
`bottom`	`string`/`number`	`60`	网格离容器底部的距离
`width`	`string`/`number`	`'auto'`	网格宽度
`height`	`string`/`number`	`'auto'`	网格高度
`containLabel`	`boolean`	`false`	网格区域是否包含坐标轴的标签

边框与背景样式

属性	类型	默认值	描述
`backgroundColor`	`string`	`'transparent'`	网格背景色，支持渐变
`borderColor`	`string`	`'#ccc'`	网格边框颜色
`borderWidth`	`number`	`1`	网格边框线宽
`borderType`	`string`	`'solid'`	边框类型：`'solid'`, `'dashed'`, `'dotted'`
`borderDashOffset`	`number`	`0`	虚线边框偏移量
`borderCap`	`string`	`'butt'`	虚线边框线帽类型
`borderJoin`	`string`	`'bevel'`	虚线边框连接处类型
`borderMiterLimit`	`number`	`10`	斜接面限制比例

阴影效果

属性	类型	默认值	描述
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowColor`	`string`	-	阴影颜色
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

工具类属性

属性	类型	默认值	描述
`tooltip`	`Object`	-	网格区域的tooltip设置
`zlevel`	`number`	`0`	所有图形的 zlevel 值
`z`	`number`	`0`	组件的所有图形的z值

6.工具箱组件属性

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示工具箱组件
`orient`	`string`	`'horizontal'`	工具箱图标方向：`'horizontal'`(水平)，`'vertical'`(垂直)
`itemSize`	`number`	`15`	工具箱图标大小
`itemGap`	`number`	`10`	工具箱每项之间的间隔
`showTitle`	`boolean`	`true`	是否在鼠标悬停时显示标题

位置与布局属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	工具箱离容器左侧的距离
`top`	`string`/`number`	`'auto'`	工具箱离容器顶部的距离
`right`	`string`/`number`	`'auto'`	工具箱离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	工具箱离容器底部的距离
`width`	`string`/`number`	`'auto'`	工具箱宽度
`height`	`string`/`number`	`'auto'`	工具箱高度

图标样式属性

属性	类型	默认值	描述
`iconStyle`	`Object`	-	图标样式
`iconStyle.color`	`string`	`'#6b6b6b'`	图标颜色
`iconStyle.borderColor`	`string`	`'#6b6b6b'`	图标边框颜色
`iconStyle.borderWidth`	`number`	`1`	图标边框宽度
`iconStyle.borderType`	`string`	`'solid'`	边框类型
`iconStyle.borderRadius`	`number`	`2`	图标边框圆角
`iconStyle.shadowColor`	`string`	`'rgba(0,0,0,0.2)'`	阴影颜色
`iconStyle.shadowBlur`	`number`	`4`	阴影模糊大小
`iconStyle.shadowOffsetX`	`number`	`1`	阴影水平偏移
`iconStyle.shadowOffsetY`	`number`	`1`	阴影垂直偏移
`iconStyle.opacity`	`number`	`1`	图标透明度
`iconStyle.textPosition`	`string`	`'bottom'`	文字位置
`iconStyle.textFill`	`string`	`'#6b6b6b'`	文字颜色

背景与边框

属性	类型	默认值	描述
`backgroundColor`	`string`	`'transparent'`	工具箱背景色
`borderColor`	`string`	`'#ccc'`	工具箱边框颜色
`borderWidth`	`number`	`0`	工具箱边框线宽
`borderRadius`	`number`/`Array`	`0`	工具箱边框圆角半径
`padding`	`number`/`Array`	`5`	工具箱内边距
`shadowColor`	`string`	-	阴影颜色
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

功能特性 (feature)

功能	类型	描述
`saveAsImage`	`Object`	保存为图片
`saveAsImage.type`	`string`	保存图片格式：`'png'`, `'jpeg'`
`saveAsImage.name`	`string`	保存的文件名称
`saveAsImage.backgroundColor`	`string`	保存图片的背景色
`saveAsImage.excludeComponents`	`Array`	排除组件
`saveAsImage.pixelRatio`	`number`	保存图片的分辨率比例

7.提示框组件属性

触发与显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示提示框
`trigger`	`string`	`'item'`	触发类型：`'item'`(数据项)，`'axis'`(坐标轴)，`'none'`(不触发)
`triggerOn`	`string`	`'mousemove'`	触发条件：`'mousemove'`, `'click'`, `'mousemove\|click'`
`alwaysShowContent`	`boolean`	`false`	是否永远显示提示框内容
`showContent`	`boolean`	`true`	是否显示提示框浮层
`showDelay`	`number`	`0`	浮层显示的延迟（ms）
`hideDelay`	`number`	`100`	浮层隐藏的延迟（ms）
`enterable`	`boolean`	`false`	鼠标是否可进入提示框浮层中

位置与约束属性

属性	类型	默认值	描述
`position`	`string`/`Array`/`Function`	-	提示框位置
`confine`	`boolean`	`false`	是否将 tooltip 框限制在图表的区域内
`appendToBody`	`boolean`	`false`	是否将 tooltip 的 DOM 节点添加为 HTML 的 `<body>` 的子节点
`className`	`string`	-	自定义 tooltip 的 CSS 类名
`transitionDuration`	`number`	`0.4`	提示框浮层的移动动画过渡时间

内容格式化属性

属性	类型	默认值	描述
`formatter`	`string`/`Function`	-	提示框内容格式化器
`valueFormatter`	`Function`	-	工具提示中数值的格式化器
`backgroundColor`	`string`	`'rgba(50,50,50,0.7)'`	提示框背景色
`borderColor`	`string`	-	提示框边框颜色
`borderWidth`	`number`	`0`	提示框边框线宽
`borderRadius`	`number`/`Array`	`4`	提示框边框圆角半径
`shadowBlur`	`number`	`10`	阴影模糊大小
`shadowColor`	`string`	`'rgba(0,0,0,0.2)'`	阴影颜色
`shadowOffsetX`	`number`	`1`	阴影水平偏移
`shadowOffsetY`	`number`	`1`	阴影垂直偏移
`padding`	`number`/`Array`	`5`	提示框内边距

文本样式属性

属性	类型	默认值	描述
`textStyle`	`Object`	-	提示框文本样式
`textStyle.color`	`string`	`'#fff'`	文字颜色
`textStyle.fontSize`	`number`	`14`	文字字号
`textStyle.fontWeight`	`string`	`'normal'`	文字粗细
`textStyle.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`textStyle.fontStyle`	`string`	`'normal'`	文字风格
`textStyle.lineHeight`	`number`	-	行高
`textStyle.width`	`string`/`number`	-	文本显示宽度
`textStyle.height`	`string`/`number`	-	文本显示高度
`textStyle.textBorderColor`	`string`	-	文字描边颜色
`textStyle.textBorderWidth`	`number`	-	文字描边宽度
`textStyle.textShadowColor`	`string`	-	文字阴影颜色
`textStyle.textShadowBlur`	`number`	-	文字阴影模糊大小
`textStyle.textShadowOffsetX`	`number`	-	文字阴影X偏移
`textStyle.textShadowOffsetY`	`number`	-	文字阴影Y偏移
`textStyle.overflow`	`string`	`'none'`	文字超出宽度处理
`textStyle.ellipsis`	`string`	`'...'`	文字截断时显示

坐标轴指示器属性

属性	类型	默认值	描述
`axisPointer`	`Object`	-	坐标轴指示器配置
`axisPointer.type`	`string`	`'line'`	指示器类型：`'line'`, `'shadow'`, `'cross'`, `'none'`
`axisPointer.axis`	`string`	`'auto'`	指示器坐标轴：`'x'`, `'y'`, `'radius'`, `'angle'`
`axisPointer.snap`	`boolean`	-	坐标轴指示器是否自动吸附到点上
`axisPointer.z`	`number`	-	指示器的 z 值
`axisPointer.label`	`Object`	-	指示器文本标签
`axisPointer.lineStyle`	`Object`	-	直线指示器样式
`axisPointer.shadowStyle`	`Object`	-	阴影指示器样式
`axisPointer.crossStyle`	`Object`	-	十字星指示器样式

额外功能属性

属性	类型	默认值	描述
`order`	`string`	`'seriesAsc'`	多系列提示框排序：`'seriesAsc'`, `'seriesDesc'`, `'valueAsc'`, `'valueDesc'`
`renderMode`	`string`	`'html'`	渲染模式：`'html'`, `'richText'`
`extraCssText`	`string`	-	额外附加到浮层的 css 样式

8.标记点组件属性

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示标记点
`symbol`	`string`	`'pin'`	标记点图形类型
`symbolSize`	`number`/`Array`/`Function`	`10`	标记点图形大小
`symbolRotate`	`number`	-	标记点图形旋转角度
`symbolKeepAspect`	`boolean`	`false`	是否保持图形长宽比
`symbolOffset`	`Array`	`[0, 0]`	标记点图形偏移

数据配置属性

属性	类型	默认值	描述
`data`	`Array`	-	标记点数据数组
`data.name`	`string`	-	标记点名称
`data.type`	`string`	-	特殊标记点类型：`'min'`, `'max'`, `'average'`, `'median'`
`data.valueIndex`	`number`	-	在使用维度数据时指定维度
`data.valueDim`	`string`	-	在使用维度数据时指定维度名称
`data.coord`	`Array`	-	标记点的坐标
`data.x`	`number`	-	标记点的 x 坐标
`data.y`	`number`	-	标记点的 y 坐标
`data.value`	`number`	-	标记点的值

样式属性

属性	类型	默认值	描述
`itemStyle`	`Object`	-	标记点样式
`itemStyle.color`	`string`	`'auto'`	标记点颜色
`itemStyle.borderColor`	`string`	`'#000'`	标记点边框颜色
`itemStyle.borderWidth`	`number`	`0`	标记点边框宽度
`itemStyle.borderType`	`string`	`'solid'`	边框类型
`itemStyle.borderDashOffset`	`number`	`0`	虚线边框偏移
`itemStyle.borderCap`	`string`	`'butt'`	虚线边框线帽
`itemStyle.borderJoin`	`string`	`'bevel'`	虚线边框连接
`itemStyle.borderMiterLimit`	`number`	`10`	斜接面限制
`itemStyle.shadowBlur`	`number`	`0`	阴影模糊大小
`itemStyle.shadowColor`	`string`	-	阴影颜色
`itemStyle.shadowOffsetX`	`number`	`0`	阴影水平偏移
`itemStyle.shadowOffsetY`	`number`	`0`	阴影垂直偏移
`itemStyle.opacity`	`number`	`1`	透明度

标签属性

属性	类型	默认值	描述
`label`	`Object`	-	标记点标签
`label.show`	`boolean`	`true`	是否显示标签
`label.position`	`string`	`'inside'`	标签位置
`label.distance`	`number`	`5`	标签距离图形距离
`label.rotate`	`number`	`0`	标签旋转角度
`label.offset`	`Array`	`[0, 0]`	标签偏移
`label.formatter`	`string`/`Function`	-	标签内容格式化器
`label.color`	`string`	`'#fff'`	文字颜色
`label.fontSize`	`number`	`12`	文字字号
`label.fontWeight`	`string`	`'normal'`	文字粗细
`label.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`label.backgroundColor`	`string`	`'transparent'`	文字背景色
`label.borderColor`	`string`	-	文字边框颜色
`label.borderWidth`	`number`	`0`	文字边框宽度
`label.borderRadius`	`number`	`0`	文字边框圆角
`label.padding`	`number`/`Array`	`0`	文字内边距
`label.shadowColor`	`string`	`'transparent'`	文字阴影颜色
`label.shadowBlur`	`number`	`0`	文字阴影模糊大小
`label.shadowOffsetX`	`number`	`0`	文字阴影X偏移
`label.shadowOffsetY`	`number`	`0`	文字阴影Y偏移

强调样式属性

属性	类型	默认值	描述
`emphasis`	`Object`	-	高亮样式
`emphasis.disabled`	`boolean`	`false`	是否关闭高亮
`emphasis.scale`	`boolean`	`true`	是否放大符号
`emphasis.focus`	`string`	`'none'`	聚焦策略
`emphasis.itemStyle`	`Object`	-	高亮时的图形样式
`emphasis.label`	`Object`	-	高亮时的标签样式

可用符号类型 (symbol)

'circle' - 圆形
'rect' - 矩形
'roundRect' - 圆角矩形
'triangle' - 三角形
'diamond' - 菱形
'pin' - 针形
'arrow' - 箭头
'none' - 无图形
自定义图片：'image://url'

9.标记线组件属性

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示标记线
`silent`	`boolean`	`false`	是否不响应和触发鼠标事件
`symbol`	`string`/`Array`	`'circle'`	标记线两端的符号类型
`symbolSize`	`number`/`Array`/`Function`	`8`	标记线符号大小
`symbolRotate`	`number`	-	标记线符号旋转角度
`symbolOffset`	`Array`	`[0, 0]`	标记线符号偏移

数据配置属性

属性	类型	默认值	描述
`data`	`Array`	-	标记线数据数组
`data.type`	`string`	-	特殊标记线类型：`'min'`, `'max'`, `'average'`, `'median'`
`data.name`	`string`	-	标记线名称
`data.xAxis`	`number`	-	指定 x 轴坐标
`data.yAxis`	`number`	-	指定 y 轴坐标
`data.coord`	`Array`	-	指定起点或终点坐标
`data.valueIndex`	`number`	-	在使用维度数据时指定维度
`data.valueDim`	`string`	-	在使用维度数据时指定维度名称
`data.lineStyle`	`Object`	-	单个标记线的样式

线条样式属性

属性	类型	默认值	描述
`lineStyle`	`Object`	-	标记线样式
`lineStyle.color`	`string`	`'#000'`	标记线颜色
`lineStyle.width`	`number`	`1`	标记线宽度
`lineStyle.type`	`string`	`'solid'`	线条类型：`'solid'`, `'dashed'`, `'dotted'`
`lineStyle.opacity`	`number`	`1`	线条透明度
`lineStyle.curveness`	`number`	`0`	线条曲度，支持弧形
`lineStyle.cap`	`string`	`'butt'`	线帽类型
`lineStyle.join`	`string`	`'bevel'`	线段连接处样式
`lineStyle.miterLimit`	`number`	`10`	斜接面限制
`lineStyle.shadowBlur`	`number`	`0`	阴影模糊大小
`lineStyle.shadowColor`	`string`	-	阴影颜色
`lineStyle.shadowOffsetX`	`number`	`0`	阴影水平偏移
`lineStyle.shadowOffsetY`	`number`	`0`	阴影垂直偏移

标签属性

属性	类型	默认值	描述
`label`	`Object`	-	标记线标签
`label.show`	`boolean`	`true`	是否显示标签
`label.position`	`string`	`'middle'`	标签位置：`'start'`, `'middle'`, `'end'`
`label.distance`	`number`	`5`	标签距离线的距离
`label.rotate`	`number`	`0`	标签旋转角度
`label.offset`	`Array`	`[0, 0]`	标签偏移
`label.formatter`	`string`/`Function`	-	标签内容格式化器
`label.color`	`string`	`'#fff'`	文字颜色
`label.fontSize`	`number`	`12`	文字字号
`label.fontWeight`	`string`	`'normal'`	文字粗细
`label.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`label.backgroundColor`	`string`	`'transparent'`	文字背景色
`label.borderColor`	`string`	-	文字边框颜色
`label.borderWidth`	`number`	`0`	文字边框宽度
`label.borderRadius`	`number`	`0`	文字边框圆角
`label.padding`	`number`/`Array`	`0`	文字内边距
`label.shadowColor`	`string`	`'transparent'`	文字阴影颜色
`label.shadowBlur`	`number`	`0`	文字阴影模糊大小
`label.shadowOffsetX`	`number`	`0`	文字阴影X偏移
`label.shadowOffsetY`	`number`	`0`	文字阴影Y偏移

强调样式属性

属性	类型	默认值	描述
`emphasis`	`Object`	-	高亮样式
`emphasis.disabled`	`boolean`	`false`	是否关闭高亮
`emphasis.lineStyle`	`Object`	-	高亮时的线条样式
`emphasis.label`	`Object`	-	高亮时的标签样式

精度与动画属性

属性	类型	默认值	描述
`precision`	`number`	`2`	标线数值的精度，小数位数
`animation`	`boolean`	`true`	是否开启动画
`animationThreshold`	`number`	`2000`	动画阈值
`animationDuration`	`number`	`1000`	动画时长
`animationEasing`	`string`	`'cubicOut'`	动画缓动效果
`animationDelay`	`number`/`Function`	`0`	动画延迟

10.数据系列

核心系列属性

属性	类型	默认值	描述
`type`	`string`	-	系列类型，如 `'line'`, `'bar'`, `'pie'`, `'scatter'`
`id`	`string`	-	组件ID，可用于在option或API中引用
`name`	`string`	-	系列名称，用于提示框和图例
`coordinateSystem`	`string`	`'cartesian2d'`	坐标系：`'cartesian2d'`, `'polar'`, `'geo'` 等
`xAxisIndex`	`number`	`0`	使用的x轴索引
`yAxisIndex`	`number`	`0`	使用的y轴索引
`polarIndex`	`number`	`0`	使用的极坐标索引
`geoIndex`	`number`	`0`	使用的地理坐标系索引

数据相关属性

属性	类型	默认值	描述
`data`	`Array`/`Object`	-	系列数据内容
`datasetIndex`	`number`	-	使用的dataset索引
`encode`	`Object`	-	定义如何从dataset中映射数据
`dimensions`	`Array`	-	维度定义，用于dataset

通用样式属性

属性	类型	默认值	描述
`color`	`string`	-	系列颜色
`itemStyle`	`Object`	-	图形样式
`lineStyle`	`Object`	-	线条样式（折线图等）
`areaStyle`	`Object`	-	区域填充样式
`label`	`Object`	-	图形上的文本标签
`labelLine`	`Object`	-	标签的视觉引导线
`emphasis`	`Object`	-	高亮状态下的样式
`select`	`Object`	-	选中状态下的样式
`blur`	`Object`	-	淡出状态下的样式

布局与位置属性

属性	类型	默认值	描述
`zlevel`	`number`	`0`	所有图形的 zlevel 值
`z`	`number`	`2`	组件的所有图形的z值
`silent`	`boolean`	`false`	是否不响应和触发鼠标事件
`animation`	`boolean`	`true`	是否开启动画
`animationThreshold`	`number`	`2000`	动画阈值
`animationDuration`	`number`	`1000`	动画时长
`animationEasing`	`string`	`'cubicOut'`	动画缓动效果
`animationDelay`	`number`/`Function`	`0`	动画延迟

系列特有属性

折线图 (line) 特有

属性	类型	默认值	描述
`smooth`	`boolean`	`false`	是否平滑曲线
`step`	`boolean`/`string`	`false`	阶梯线图：`'start'`, `'middle'`, `'end'`
`connectNulls`	`boolean`	`false`	是否连接空数据
`showSymbol`	`boolean`	`true`	是否显示符号
`symbol`	`string`	`'emptyCircle'`	符号类型
`symbolSize`	`number`/`Function`	`4`	符号大小
`stack`	`string`	-	数据堆叠，相同stack值的系列堆叠

柱状图 (bar) 特有

属性	类型	默认值	描述
`barWidth`	`string`/`number`	-	柱条宽度
`barMaxWidth`	`string`/`number`	-	柱条最大宽度
`barMinWidth`	`string`/`number`	-	柱条最小宽度
`barGap`	`string`	`'30%'`	不同系列的柱间距离
`barCategoryGap`	`string`	`'20%'`	同一系列的柱间距离
`stack`	`string`	-	数据堆叠

饼图 (pie) 特有

属性	类型	默认值	描述
`radius`	`string`/`Array`	`[0, '75%']`	饼图半径
`center`	`Array`	`['50%', '50%']`	饼图中心位置
`roseType`	`boolean`/`string`	`false`	南丁格尔图：`'radius'`, `'area'`
`startAngle`	`number`	`90`	起始角度
`minAngle`	`number`	`0`	最小扇形角度
`avoidLabelOverlap`	`boolean`	`true`	是否启用防止标签重叠策略

散点图 (scatter) 特有

属性	类型	默认值	描述
`symbol`	`string`	`'circle'`	符号类型
`symbolSize`	`number`/`Function`	`10`	符号大小
`symbolRotate`	`number`	-	符号旋转角度

11. 数据区域缩放组件 (dataZoom) 的详细属性表

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示数据区域缩放组件
`type`	`string`	`'slider'`	缩放组件类型：`'slider'`(滑动条)，`'inside'`(内置)
`filterMode`	`string`	`'filter'`	过滤模式：`'filter'`(过滤数据)，`'weakFilter'`(弱过滤)，`'empty'`(置空)，`'none'`(不过滤)
`realtime`	`boolean`	`true`	是否实时更新

位置与尺寸属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	组件离容器左侧的距离
`top`	`string`/`number`	`'auto'`	组件离容器顶部的距离
`right`	`string`/`number`	`'auto'`	组件离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	组件离容器底部的距离
`width`	`string`/`number`	`'auto'`	组件宽度
`height`	`string`/`number`	`'auto'`	组件高度
`orient`	`string`	`'horizontal'`	布局方向：`'horizontal'`(水平)，`'vertical'`(垂直)

数据范围控制属性

属性	类型	默认值	描述
`start`	`number`	`0`	数据窗口范围的起始百分比 (0-100)
`end`	`number`	`100`	数据窗口范围的结束百分比 (0-100)
`startValue`	`number`/`string`	-	数据窗口范围的起始数值
`endValue`	`number`/`string`	-	数据窗口范围的结束数值
`minSpan`	`number`	-	最小窗口范围（百分比）
`maxSpan`	`number`	-	最大窗口范围（百分比）
`minValueSpan`	`number`	-	最小窗口范围（数值）
`maxValueSpan`	`number`	-	最大窗口范围（数值）

坐标轴控制属性

属性	类型	默认值	描述
`xAxisIndex`	`number`/`Array`	-	控制的 x 轴索引
`yAxisIndex`	`number`/`Array`	-	控制的 y 轴索引
`radiusAxisIndex`	`number`/`Array`	-	控制的半径轴索引
`angleAxisIndex`	`number`/`Array`	-	控制的角度轴索引
`singleAxisIndex`	`number`/`Array`	-	控制的单轴索引

滑动条样式属性 (type: 'slider')

属性	类型	默认值	描述
`backgroundColor`	`string`	`'rgba(47,69,84,0.1)'`	背景色
`dataBackground`	`Object`	-	数据阴影的样式
`dataBackground.lineStyle`	`Object`	-	数据阴影线样式
`dataBackground.areaStyle`	`Object`	-	数据阴影区域样式
`fillerColor`	`string`	`'rgba(167,183,204,0.4)'`	选中范围填充颜色
`borderColor`	`string`	`'#ddd'`	边框颜色
`handleIcon`	`string`	-	手柄的 icon 形状
`handleSize`	`string`/`number`	`'100%'`	控制手柄的尺寸
`handleStyle`	`Object`	-	手柄样式
`handleStyle.color`	`string`	`'#a7b7cc'`	手柄颜色
`handleStyle.borderColor`	`string`	`'#7b88a0'`	手柄边框颜色
`handleStyle.borderWidth`	`number`	`1`	手柄边框宽度
`moveHandleIcon`	`string`	-	移动手柄的图标
`moveHandleSize`	`number`	`7`	移动手柄尺寸
`moveHandleStyle`	`Object`	-	移动手柄样式
`labelPrecision`	`number`	`0`	显示label的小数精度
`labelFormatter`	`string`/`Function`	-	标签格式化器
`showDetail`	`boolean`	`true`	是否显示详细数据信息
`showDataShadow`	`string`	`'auto'`	是否显示数据阴影
`zoomLock`	`boolean`	`false`	是否锁定选择区域
`textStyle`	`Object`	-	文本样式

内置缩放属性 (type: 'inside')

属性	类型	默认值	描述
`disabled`	`boolean`	`false`	是否停止组件的功能
`zoomOnMouseWheel`	`boolean`	`true`	是否支持鼠标滚轮缩放
`moveOnMouseMove`	`boolean`	`true`	是否支持拖拽移动
`preventDefaultMouseMove`	`boolean`	`true`	是否阻止默认的鼠标移动行为
`zoomOnMouseWheel`	`boolean`	`true`	鼠标滚轮触发缩放
`moveOnMouseMove`	`boolean`	`true`	鼠标移动触发平移
`preventDefaultMouseMove`	`boolean`	`true`	阻止默认鼠标移动行为

12.视觉映射组件 (visualMap) 的详细属性表

核心类型属性

属性	类型	默认值	描述
`type`	`string`	`'continuous'`	类型：`'continuous'`(连续型)，`'piecewise'`(分段型)
`show`	`boolean`	`true`	是否显示视觉映射组件
`seriesIndex`	`number`/`Array`	-	指定映射的系列索引

位置与尺寸属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	组件离容器左侧的距离
`top`	`string`/`number`	`'auto'`	组件离容器顶部的距离
`right`	`string`/`number`	`'auto'`	组件离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	组件离容器底部的距离
`width`	`string`/`number`	`'auto'`	组件宽度
`height`	`string`/`number`	`'auto'`	组件高度
`orient`	`string`	`'vertical'`	布局方向：`'vertical'`(垂直)，`'horizontal'`(水平)
`padding`	`number`/`Array`	`5`	内边距
`itemWidth`	`number`	`20`	图形宽度（分段型）
`itemHeight`	`number`	`14`	图形高度（分段型）
`itemGap`	`number`	`10`	每项之间的间隔（分段型）
`itemSymbol`	`string`	`'roundRect'`	标记的图形（分段型）

数据映射属性

属性	类型	默认值	描述
`min`	`number`	-	允许的最小值
`max`	`number`	-	允许的最大值
`range`	`Array`	-	指定手柄对应数值的位置
`calculable`	`boolean`	`false`	是否显示拖拽用的手柄（连续型）
`realtime`	`boolean`	`true`	是否实时更新
`dimension`	`number`	-	指定用数据的哪个维度做映射
`inRange`	`Object`	-	定义在选中范围内的视觉元素
`outOfRange`	`Object`	-	定义在选中范围外的视觉元素

视觉编码属性

inRange / outOfRange 视觉元素

属性	类型	描述
`color`	`Array`/`string`	颜色映射
`colorAlpha`	`Array`/`number`	颜色透明度映射
`opacity`	`Array`/`number`	整体透明度映射
`symbol`	`Array`/`string`	标记的图形
`symbolSize`	`Array`/`number`	标记的大小
`lift`	`Array`/`number`	颜色亮度映射
`saturation`	`Array`/`number`	颜色饱和度映射

文本与标签属性

属性	类型	默认值	描述
`text`	`Array`	-	两端的文本，如 `['高', '低']`
`textGap`	`number`	`10`	两端文字主体之间的距离
`textStyle`	`Object`	-	文本样式
`formatter`	`string`/`Function`	-	标签的格式化器
`showLabel`	`boolean`	`true`	是否显示文本标签

分段型特有属性 (type: 'piecewise')

属性	类型	默认值	描述
`splitNumber`	`number`	`5`	分割段数
`pieces`	`Array`	-	自定义分段
`categories`	`Array`	-	类目数据
`minOpen`	`boolean`	`false`	是否包含 min 区间
`maxOpen`	`boolean`	`false`	是否包含 max 区间
`selectedMode`	`string`	`'multiple'`	选择模式：`'multiple'`, `'single'`
`inverse`	`boolean`	`false`	是否反转
`precision`	`number`	`0`	小数精度
`itemGap`	`number`	`10`	每项之间的间隔
`show`	`boolean`	`true`	是否显示组件

连续型特有属性 (type: 'continuous')

属性	类型	默认值	描述
`calculable`	`boolean`	`false`	是否显示拖拽用的手柄
`inRange`	`Object`	-	定义在选中范围内的视觉元素
`outOfRange`	`Object`	-	定义在选中范围外的视觉元素
`controller`	`Object`	-	视觉映射控制器
`hoverLink`	`boolean`	`true`	鼠标悬停时的联动高亮

样式属性

属性	类型	默认值	描述
`backgroundColor`	`string`	`'rgba(0,0,0,0)'`	背景色
`borderColor`	`string`	`'#ccc'`	边框颜色
`borderWidth`	`number`	`0`	边框线宽
`borderRadius`	`number`	`0`	边框圆角半径
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowColor`	`string`	-	阴影颜色
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

13. 时间轴组件 (timeline) 的详细属性表：

核心显示属性

属性	类型	默认值	描述
`show`	`boolean`	`true`	是否显示时间轴组件
`type`	`string`	`'slider'`	类型：`'slider'`(滑动条)，`'checkbox'`(选择框)
`axisType`	`string`	`'time'`	轴类型：`'time'`(时间)，`'category'`(类目)

位置与尺寸属性

属性	类型	默认值	描述
`left`	`string`/`number`	`'auto'`	组件离容器左侧的距离
`top`	`string`/`number`	`'auto'`	组件离容器顶部的距离
`right`	`string`/`number`	`'auto'`	组件离容器右侧的距离
`bottom`	`string`/`number`	`'auto'`	组件离容器底部的距离
`width`	`string`/`number`	`'auto'`	组件宽度
`height`	`string`/`number`	`'auto'`	组件高度
`orient`	`string`	`'horizontal'`	布局方向：`'horizontal'`(水平)，`'vertical'`(垂直)
`padding`	`number`/`Array`	`5`	内边距
`controlPosition`	`string`	`'left'`	控制按钮位置：`'left'`, `'right'`, `'top'`, `'bottom'`, `'none'`

数据与播放属性

属性	类型	默认值	描述
`data`	`Array`	-	时间轴数据数组
`currentIndex`	`number`	`0`	表示当前选中项
`autoPlay`	`boolean`	`false`	是否自动播放
`rewind`	`boolean`	`false`	播放完成是否反向播放
`loop`	`boolean`	`true`	是否循环播放
`playInterval`	`number`	`2000`	播放的时间间隔（毫秒）
`realtime`	`boolean`	`true`	是否实时更新

样式属性

属性	类型	默认值	描述
`backgroundColor`	`string`	`'rgba(0,0,0,0)'`	背景颜色
`borderColor`	`string`	`'#ccc'`	边框颜色
`borderWidth`	`number`	`0`	边框线宽
`borderRadius`	`number`	`0`	边框圆角半径
`shadowBlur`	`number`	`0`	阴影模糊大小
`shadowColor`	`string`	-	阴影颜色
`shadowOffsetX`	`number`	`0`	阴影水平偏移
`shadowOffsetY`	`number`	`0`	阴影垂直偏移

标签属性

属性	类型	默认值	描述
`label`	`Object`	-	标签样式
`label.show`	`boolean`	`true`	是否显示标签
`label.interval`	`string`/`number`/`Function`	`'auto'`	标签显示间隔
`label.position`	`string`/`number`	-	标签位置
`label.formatter`	`string`/`Function`	-	标签内容格式化器
`label.color`	`string`/`Function`	`'#000'`	文字颜色
`label.fontSize`	`number`	`12`	文字字号
`label.fontWeight`	`string`	`'normal'`	文字粗细
`label.fontFamily`	`string`	`'sans-serif'`	文字字体系列
`label.rotate`	`number`	`0`	文字旋转角度
`label.margin`	`number`	`3`	标签与轴的距离
`label.rich`	`Object`	-	在富文本标签中定义样式

轴线与进度属性

属性	类型	默认值	描述
`lineStyle`	`Object`	-	轴线样式
`lineStyle.color`	`string`	`'#304654'`	轴线颜色
`lineStyle.width`	`number`	`1`	轴线宽度
`lineStyle.type`	`string`	`'solid'`	轴线类型
`lineStyle.opacity`	`number`	`1`	轴线透明度
`symbol`	`string`	`'emptyCircle'`	时间轴标记的图形
`symbolSize`	`number`/`Array`/`Function`	`10`	时间轴标记的大小
`symbolRotate`	`number`	-	时间轴标记的旋转角度
`symbolKeepAspect`	`boolean`	`false`	是否保持图形长宽比
`symbolOffset`	`Array`	`[0, 0]`	时间轴标记的偏移

进度条与选中样式

属性	类型	默认值	描述
`progress`	`Object`	-	进度条样式
`progress.lineStyle`	`Object`	-	进度线条样式
`progress.itemStyle`	`Object`	-	进度条项样式
`progress.label`	`Object`	-	进度条标签样式
`itemStyle`	`Object`	-	时间轴项的样式
`checkpointStyle`	`Object`	-	时间轴当前项的样式
`controlStyle`	`Object`	-	控制按钮样式
`emphasis`	`Object`	-	高亮样式

控制按钮属性

属性	类型	默认值	描述
`controlStyle`	`Object`	-	控制按钮样式
`controlStyle.show`	`boolean`	`true`	是否显示控制按钮
`controlStyle.showPlayBtn`	`boolean`	`true`	是否显示播放按钮
`controlStyle.showPrevBtn`	`boolean`	`true`	是否显示上一个按钮
`controlStyle.showNextBtn`	`boolean`	`true`	是否显示下一个按钮
`controlStyle.itemSize`	`number`	`22`	按钮尺寸
`controlStyle.itemGap`	`number`	`12`	按钮间隔
`controlStyle.position`	`string`	`'left'`	按钮位置
`controlStyle.playIcon`	`string`	-	播放图标
`controlStyle.stopIcon`	`string`	-	停止图标
`controlStyle.nextIcon`	`string`	-	下一个图标
`controlStyle.prevIcon`	`string`	-	上一个图标
`controlStyle.color`	`string`	`'#304654'`	按钮颜色
`controlStyle.borderColor`	`string`	`'#304654'`	按钮边框颜色
`controlStyle.borderWidth`	`number`	`1`	按钮边框宽度

4.ECharts所有核心概念都用上的完整关系图

┌─────────────────────────────────────────────────────────────────┐
│                    ECharts 实例 (myChart)                       │
│  var myChart = echarts.init(document.getElementById('main'));   │
└──────────────────────────────┬──────────────────────────────────┘
                               │
                               ▼
                     设置配置项 (setOption)
                     myChart.setOption(option);
                               │
                               ▼
┌───────────────────── Option 对象 (option) ──────────────────────┐
│                                                                │
│  +-------------------+    +-------------------+                │
│  │     标题 (title)   │    │    图例 (legend)   │                │
│  │   text: '主标题'   │    │   data: ['销量',   │                │
│  +-------------------+    │      '增长率']     │                │
│                           +-------------------+                │
│                                                                │
│  +-------------------+    +-------------------+                │
│  │   提示框 (tooltip) │    │  坐标系 (grid)     │                │
│  │  trigger: 'axis'  │    │  left: '10%',     │ +------------+ │
│  +-------------------+    │  right: '10%'     │ │ X轴(xAxis) │ │
│                           +--------┬----------+ │ type:       │ │
│                                    │            │  'category'│ │
│  +-------------------+             ▼            │ data:      │ │
│  │   数据集 (dataset) │    +--------┬----------+ │  ['1月',...]│ │
│  │   source: [       │    │ Y轴(yAxis)        │ +------------+ │
│  │     ['1月', 100,  │    │ type: 'value'     │                │
│  │      '2月', 200]  │    +-------------------+                │
│  │   ]               │                                         │
│  +-------------------+                                         │
│                                                                │
│  +────────────────── 系列数组 (series) ──────────────────+     │
│  │ [                                                   ] │     │
│  │   {                                                 } │     │
│  │     type: 'bar',      // 系列1：柱状图              │ │     │
│  │     name: '销量',      // 对应图例项                 │ │     │
│  │     datasetIndex: 0,  // 使用dataset的数据          │ │     │
│  │     encode: {         // 数据编码                   │ │     │
│  │       x: '月份',      // X轴对应dataset第0维度      │ │     │
│  │       y: '销售额'     // Y轴对应dataset第1维度      │ │     │
│  │     }                                               │ │     │
│  │   },                                                │ │     │
│  │   {                                                 } │     │
│  │     type: 'line',     // 系列2：折线图              │ │     │
│  │     name: '增长率',    // 对应图例项                 │ │     │
│  │     yAxisIndex: 1,    // 使用第2个Y轴               │ │     │
│  │     data: [20, 30]    // 也可以直接使用data         │ │     │
│  │   }                                                 │ │     │
│  │ ]                                                   │ │     │
│  +─────────────────────────────────────────────────────+ │     │
│                                                                │
│  +-------------------+    +-------------------+                │
│  │  视觉映射(visualMap)│   │   工具栏(toolbox)  │                │
│  │  type: 'continuous'│   │  feature: {       │                │
│  +-------------------+    │    saveAsImage: {}│                │
│                           +-------------------+                │
└─────────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────┐
│                   图表渲染到DOM容器中                           │
│                用户交互：悬停、点击、缩放等                      │
└─────────────────────────────────────────────────────────────────┘
                               │
                               ▼
                     事件处理 (events)
              myChart.on('click', function(params) {
                  console.log('点击了:', params);
              });