属性总揽
...大约 23 分钟
ECharts 属性详解
基础配置属性
1.1 初始化配置
var myChart = echarts.init(
dom, // DOM元素或ID
theme, // 主题名称或对象
{ // 初始化参数
devicePixelRatio: 2, // 设备像素比，默认为1
renderer: 'canvas', // 渲染器：'canvas' 或 'svg'
width: 'auto', // 宽度，'auto'或具体数值
height: 'auto', // 高度，'auto'或具体数值
locale: 'ZH' // 语言，'ZH'或'EN'
}
);1.2 全局配置
option = {
backgroundColor: '#fff', // 背景色，支持rgba/hex/rgb等格式
color: ['#c23531','#2f4554','#61a0a8'], // 调色盘颜色列表
textStyle: { // 全局文本样式
color: '#333', // 文字颜色
fontStyle: 'normal', // 字体风格：'normal','italic','oblique'
fontWeight: 'normal', // 字体粗细：'normal','bold','bolder','lighter'|100~900
fontFamily: 'sans-serif', // 字体
fontSize: 12 // 字体大小
},
animation: true, // 是否开启动画
animationDuration: 1000, // 初始动画时长(毫秒)
animationEasing: 'cubicInOut' // 动画缓动效果
};组件属性详解
2.1 标题(title)
title: {
text: '主标题', // 主标题文本
link: 'https://example.com', // 主标题链接
target: 'blank', // 链接打开方式：'self'|'blank'
subtext: '副标题', // 副标题文本
sublink: '', // 副标题链接
subtarget: '', // 副标题链接打开方式
left: 'center', // 水平位置：'left'|'center'|'right'|百分比|像素值
top: 'top', // 垂直位置：'top'|'middle'|'bottom'|百分比|像素值
textAlign: 'auto', // 文本水平对齐：'auto'|'left'|'right'|'center'
textVerticalAlign: 'auto', // 文本垂直对齐
padding: 5, // 标题内边距
itemGap: 10, // 主副标题间距
textStyle: {}, // 主标题文本样式(同全局textStyle)
subtextStyle: {} // 副标题文本样式
}2.2 图例(legend)
legend: {
type: 'plain', // 类型：'plain'普通|'scroll'可滚动
show: true, // 是否显示
zlevel: 0, // 所有图形的zlevel值
z: 2, // 组件的所有图形的z值
left: 'auto', // 位置
top: 'auto',
right: 'auto',
bottom: 'auto',
width: 'auto', // 宽度
height: 'auto', // 高度
orient: 'horizontal', // 布局方向：'horizontal'|'vertical'
align: 'auto', // 图例标记和文本对齐：'auto'|'left'|'right'
padding: 5, // 图例内边距
itemGap: 10, // 图例每项间隔
itemWidth: 25, // 图例标记图形宽度
itemHeight: 14, // 图例标记图形高度
symbolKeepAspect: true, // 保持图形长宽比
formatter: function(name) { // 格式化文本
return '图例 ' + name;
},
selectedMode: true, // 选择模式：true|false|'single'|'multiple'
inactiveColor: '#ccc', // 未激活图例颜色
selected: { // 默认选中状态
'系列1': true,
'系列2': false
},
textStyle: {}, // 文本样式
tooltip: { // 图例提示框
show: false
},
data: ['类别1','类别2'], // 图例数据
backgroundColor: 'transparent', // 背景色
borderColor: '#ccc', // 边框颜色
borderWidth: 0, // 边框宽度
borderRadius: 0, // 边框圆角
shadowBlur: 0, // 阴影模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
}2.3 提示框(tooltip)
tooltip: {
trigger: 'item', // 触发类型：'item'|'axis'|'none'
triggerOn: 'mousemove|click', // 触发条件：'mousemove'|'click'|'none'
showContent: true, // 是否显示提示框浮层
alwaysShowContent: false, // 是否永远显示内容
showDelay: 0, // 显示延迟(毫秒)
hideDelay: 100, // 隐藏延迟(毫秒)
enterable: false, // 鼠标是否可进入提示框
confine: false, // 是否将提示框限制在图表区域内
transitionDuration: 0.4, // 动画过渡时间(秒)
position: ['50%', '50%'], // 位置
formatter: function(params) { // 格式化函数
return params.name + ' : ' + params.value;
},
backgroundColor: 'rgba(50,50,50,0.7)', // 背景色
borderColor: '#333', // 边框颜色
borderWidth: 0, // 边框宽度
padding: 5, // 内边距
textStyle: { // 文本样式
color: '#fff'
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 额外CSS样式
}2.4 坐标轴(axis)
2.4.1 直角坐标系(xAxis/yAxis)
xAxis: {
type: 'category', // 类型：'value'数值|'category'类目|'time'时间|'log'对数
name: 'X轴', // 坐标轴名称
nameLocation: 'end', // 名称位置：'start'|'middle'|'end'
nameTextStyle: {}, // 名称文本样式
nameGap: 15, // 名称与轴线距离
nameRotate: 0, // 名称旋转角度
inverse: false, // 是否反向坐标轴
boundaryGap: true, // 类目轴中边界空白
min: null, // 最小值
max: null, // 最大值
scale: false, // 只在数值轴有效，是否脱离0值比例
splitNumber: 5, // 分割段数
minInterval: 0, // 最小间隔大小
maxInterval: null, // 最大间隔大小
axisLine: { // 坐标轴线
show: true, // 是否显示
onZero: true, // X轴是否在0刻度上
lineStyle: { // 线样式
color: '#333',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴刻度
show: true, // 是否显示
alignWithLabel: false, // 类目轴中与标签对齐
inside: false, // 是否朝内
length: 5, // 长度
lineStyle: {} // 线样式
},
axisLabel: { // 坐标轴标签
show: true, // 是否显示
interval: 'auto', // 标签显示间隔
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 与轴线距离
formatter: function(value, index) { // 格式化函数
return value + 'kg';
},
showMinLabel: true, // 显示最小标签
showMaxLabel: true, // 显示最大标签
color: '#666' // 文本颜色
},
splitLine: { // 分割线
show: true, // 是否显示
interval: 'auto', // 显示间隔
lineStyle: { // 线样式
color: ['#eee'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分割区域
show: false, // 是否显示
interval: 'auto', // 显示间隔
areaStyle: { // 区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
},
data: ['周一','周二','周三'] // 类目数据
}2.4.2 极坐标轴(radiusAxis/angleAxis)
radiusAxis: {
type: 'value',
polarIndex: 0, // 极坐标索引
angleAxis: { // 角度轴配置(同直角坐标系)
// 类似xAxis/yAxis配置
}
}2.5 网格(grid)
grid: {
show: false, // 是否显示直角坐标系网格
zlevel: 0, // 所有图形的zlevel值
z: 0, // 组件的所有图形的z值
left: '10%', // 位置
top: 60,
right: '10%',
bottom: 60,
width: 'auto', // 宽度
height: 'auto', // 高度
containLabel: false, // 是否包含坐标轴标签
backgroundColor: 'transparent', // 背景色
borderColor: '#ccc', // 边框颜色
borderWidth: 1, // 边框宽度
shadowBlur: 0, // 阴影模糊大小
shadowColor: 'rgba(0,0,0,0.5)', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
}系列(series)属性详解
3.1 折线图(line)
series: [{
type: 'line',
name: '系列名称',
coordinateSystem: 'cartesian2d', // 坐标系：'cartesian2d'|'polar'|...
xAxisIndex: 0, // 使用的x轴索引
yAxisIndex: 0, // 使用的y轴索引
symbol: 'circle', // 标记图形：'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'
symbolSize: 4, // 标记大小
symbolRotate: 0, // 标记旋转角度
symbolKeepAspect: true, // 保持标记长宽比
symbolOffset: [0, 0], // 标记偏移
showSymbol: true, // 是否显示标记
showAllSymbol: false, // 是否显示所有标记
hoverAnimation: true, // 是否开启鼠标hover动画
legendHoverLink: true, // 是否启用图例hover联动
stack: null, // 数据堆叠名称
cursor: 'pointer', // 鼠标悬浮样式
connectNulls: false, // 是否连接空数据
clip: true, // 是否裁剪超出坐标系部分
step: false, // 是否显示为阶梯线：'start'|'middle'|'end'|false
label: { // 图形上的文本标签
show: false,
position: 'top', // 位置：'top'|'left'|'right'|'bottom'|'inside'|...
distance: 5, // 距离图形元素的距离
rotate: 0, // 旋转角度
offset: [0, 0], // 偏移
formatter: '{c}', // 格式化文本
color: '#666', // 文本颜色
fontSize: 12,
backgroundColor: 'transparent', // 背景色
borderColor: 'transparent', // 边框颜色
borderWidth: 0, // 边框宽度
borderRadius: 0, // 边框圆角
padding: [3, 5], // 内边距
shadowColor: 'transparent', // 阴影颜色
shadowBlur: 0, // 阴影模糊大小
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
},
endLabel: { // 折线终点标签
show: false,
// 类似label配置
},
lineStyle: { // 线条样式
color: '#c23531', // 颜色
width: 2, // 线宽
type: 'solid', // 线型：'solid'|'dashed'|'dotted'
opacity: 1, // 透明度
shadowBlur: 0, // 阴影模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0, // 阴影垂直偏移
curveness: 0 // 曲率
},
areaStyle: { // 区域填充样式
color: null, // 颜色
origin: 'auto', // 填充起点：'auto'|'start'|'end'
opacity: 0.7, // 透明度
shadowBlur: 10, // 阴影模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
},
emphasis: { // 高亮状态下的样式
label: {}, // 高亮标签样式
itemStyle: { // 高亮图形样式
color: '#c23531',
borderColor: '#000',
borderWidth: 2
}
},
markPoint: { // 标注点
symbol: 'pin', // 标记图形
symbolSize: 50, // 标记大小
silent: false, // 是否不响应和触发鼠标事件
label: {}, // 标签样式
itemStyle: {}, // 图形样式
data: [ // 标注数据
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: { // 标线
silent: false, // 是否不响应和触发鼠标事件
symbol: ['none', 'none'], // 标线两端的标记类型
label: {}, // 标签样式
lineStyle: {}, // 线样式
data: [ // 标线数据
{type: 'average', name: '平均值'}
]
},
markArea: { // 标记区域
silent: false, // 是否不响应和触发鼠标事件
label: {}, // 标签样式
itemStyle: {}, // 图形样式
data: [ // 标记区域数据
[
{name: '早高峰', xAxis: '07:30'},
{xAxis: '09:30'}
]
]
},
smooth: false, // 是否平滑曲线
smoothMonotone: null, // 平滑曲线时是否保持单调性
sampling: 'none', // 采样方式：'average'|'max'|'min'|'sum'|'none'
dimensions: null, // 维度信息
encode: { // 数据到图形的映射
x: 'date', // x轴数据字段
y: 'value', // y轴数据字段
tooltip: ['date', 'value'] // 提示框显示字段
},
data: [ // 数据
['2017-10-10', 20],
['2017-10-11', 32]
],
animation: true, // 是否开启动画
animationThreshold: 2000, // 动画阈值
animationDuration: 1000, // 初始动画时长
animationEasing: 'cubicOut', // 动画缓动效果
animationDelay: 0, // 动画延迟
animationDurationUpdate: 300, // 数据更新动画时长
animationEasingUpdate: 'cubicInOut', // 数据更新动画缓动效果
animationDelayUpdate: 0 // 数据更新动画延迟
}]3.2 柱状图(bar)
series: [{
type: 'bar',
barWidth: '30%', // 柱条宽度
barMinHeight: 0, // 柱条最小高度
barMaxWidth: null, // 柱条最大宽度
barMinAngle: 0, // 最小角度(用于极坐标)
barGap: '30%', // 柱间距离
barCategoryGap: '20%', // 类目间柱形距离
large: false, // 是否开启大数据量优化
largeThreshold: 400, // 大数据量优化阈值
seriesLayoutBy: 'column', // 数据集dataset的行列映射：'column'|'row'
cursor: 'pointer', // 鼠标悬浮样式
itemStyle: { // 图形样式
color: null, // 颜色
borderColor: '#000', // 边框颜色
borderWidth: 0, // 边框宽度
borderType: 'solid', // 边框类型
borderRadius: 0, // 柱条圆角
shadowBlur: 0, // 阴影模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0, // 阴影垂直偏移
opacity: 1 // 透明度
},
// 其他配置与折线图类似
}]3.3 饼图(pie)
series: [{
type: 'pie',
center: ['50%', '50%'], // 饼图中心位置
radius: ['0%', '75%'], // 饼图半径，第一个为内半径，第二个为外半径
startAngle: 90, // 起始角度
minAngle: 0, // 最小扇区角度
clockWise: true, // 顺时针布局
roseType: false, // 玫瑰图模式：'radius'|'area'|false
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
stillShowZeroSum: true, // 是否显示总和为0的扇区
percentPrecision: 2, // 百分比精度
selectedMode: 'single', // 选中模式：'single'|'multiple'|false
selectedOffset: 10, // 选中扇区偏移量
hoverOffset: 10, // 高亮扇区偏移量
itemStyle: { // 图形样式
borderColor: '#fff', // 边框颜色
borderWidth: 1, // 边框宽度
borderType: 'solid', // 边框类型
borderRadius: 0, // 圆角
shadowBlur: 0, // 阴影模糊大小
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
},
label: { // 标签
show: true,
position: 'outside', // 位置：'outside'|'inside'|'center'
formatter: '{b}: {c} ({d}%)', // 格式化文本
color: '#666', // 文本颜色
fontSize: 12,
lineHeight: 18,
rich: { // 富文本样式
a: {color: 'red'}
}
},
labelLine: { // 标签视觉引导线
show: true, // 是否显示
length: 15, // 第一段长度
length2: 10, // 第二段长度
smooth: false, // 是否平滑
lineStyle: { // 线样式
color: '#ccc',
width: 1,
type: 'solid'
}
},
emphasis: { // 高亮状态下的样式
scale: true, // 是否放大扇区
scaleSize: 10, // 放大尺寸
itemStyle: {}, // 高亮图形样式
label: {}, // 高亮标签样式
labelLine: {} // 高亮引导线样式
},
data: [ // 数据
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'}
]
}]3.4 散点图(scatter)
series: [{
type: 'scatter',
coordinateSystem: 'cartesian2d', // 坐标系
symbol: 'circle', // 标记图形
symbolSize: 10, // 标记大小
symbolRotate: 0, // 标记旋转角度
symbolKeepAspect: true, // 保持标记长宽比
symbolOffset: [0, 0], // 标记偏移
large: false, // 是否开启大数据量优化
largeThreshold: 2000, // 大数据量优化阈值
cursor: 'pointer', // 鼠标悬浮样式
itemStyle: { // 图形样式
color: '#c23531', // 颜色
opacity: 0.8 // 透明度
},
emphasis: { // 高亮状态下的样式
itemStyle: {}, // 高亮图形样式
label: {} // 高亮标签样式
},
// 其他配置与折线图类似
}]3.5 雷达图(radar)
series: [{
type: 'radar',
radarIndex: 0, // 雷达图索引
symbol: 'circle', // 标记图形
symbolSize: 4, // 标记大小
symbolRotate: 0, // 标记旋转角度
symbolKeepAspect: true, // 保持标记长宽比
symbolOffset: [0, 0], // 标记偏移
itemStyle: { // 图形样式
color: '#c23531', // 颜色
borderWidth: 1 // 边框宽度
},
lineStyle: { // 线条样式
width: 2, // 线宽
type: 'solid' // 线型
},
areaStyle: { // 区域填充样式
color: 'rgba(194, 53, 49, 0.4)', // 颜色
opacity: 0.7 // 透明度
},
emphasis: { // 高亮状态下的样式
itemStyle: {}, // 高亮图形样式
lineStyle: {}, // 高亮线条样式
areaStyle: {} // 高亮区域样式
},
data: [ // 数据
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配'
}
]
}]高级特性
4.1 数据集(dataset)
dataset: {
source: [ // 数据源
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1]
],
dimensions: null, // 维度定义
sourceHeader: false, // 第一行是否为表头
transform: { // 数据转换配置
type: 'filter', // 转换类型：'filter'|'sort'|'ecStat:regression'
config: {field: 'product', value: 'Matcha Latte'}
}
}4.2 视觉映射(visualMap)
visualMap: {
type: 'continuous', // 类型：'continuous'连续型|'piecewise'分段型
min: 0, // 最小值
max: 100, // 最大值
range: [0, 100], // 当前选中的范围
calculable: true, // 是否显示拖拽手柄
realtime: true, // 拖拽时是否实时更新
inverse: false, // 是否反转
precision: 0, // 小数精度
itemWidth: 20, // 图形宽度
itemHeight: 140, // 图形高度
align: 'auto', // 组件对齐方式
text: ['高', '低'], // 两端的文本
textGap: 10, // 文本与图形间距
inRange: { // 定义在选中范围内的视觉元素
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
symbolSize: [10, 70]
},
outOfRange: { // 定义在选中范围外的视觉元素
color: '#999',
symbolSize: 10
},
controller: { // 控制器配置
inRange: {}, // 控制器内的视觉元素
outOfRange: {} // 控制器外的视觉元素
},
zlevel: 0, // 所有图形的zlevel值
z: 2, // 组件的所有图形的z值
left: 'right', // 位置
top: '10%',
right: '5%',
bottom: '20%',
orient: 'vertical', // 布局方向：'vertical'|'horizontal'
padding: 5, // 内边距
backgroundColor: 'rgba(0,0,0,0)', // 背景色
borderColor: '#ccc', // 边框颜色
borderWidth: 0, // 边框宽度
textStyle: {}, // 文本样式
formatter: function(value) { // 标签格式化
return value.toFixed(2);
}
}4.3 数据区域缩放(dataZoom)
dataZoom: [
{
type: 'slider', // 类型：'slider'|'inside'
xAxisIndex: 0, // 控制的x轴索引
yAxisIndex: null, // 控制的y轴索引
radiusAxisIndex: null, // 控制的极坐标半径轴索引
angleAxisIndex: null, // 控制的极坐标角度轴索引
filterMode: 'filter', // 过滤模式：'filter'|'weakFilter'|'empty'|'none'
start: 0, // 数据窗口范围的起始百分比
end: 100, // 数据窗口范围的结束百分比
startValue: null, // 数据窗口范围的起始数值
endValue: null, // 数据窗口范围的结束数值
throttle: 100, // 防抖延迟(毫秒)
zoomLock: false, // 是否锁定选择区域大小
minSpan: 10, // 最小显示范围(百分比)
maxSpan: 100, // 最大显示范围(百分比)
minValueSpan: null, // 最小显示范围(数值)
maxValueSpan: null, // 最大显示范围(数值)
orient: 'horizontal', // 布局方向：'horizontal'|'vertical'
zoomOnMouseWheel: true, // 是否支持鼠标滚轮缩放
moveOnMouseMove: true, // 是否支持鼠标拖拽平移
preventDefaultMouseMove: true, // 是否阻止默认的鼠标移动事件
fillerColor: 'rgba(167,183,204,0.4)', // 选中区域填充颜色
borderColor: '#ddd', // 边框颜色
backgroundColor: '#eee', // 背景色
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', // 手柄图标
handleSize: '80%', // 手柄大小
handleStyle: { // 手柄样式
color: '#fff',
borderColor: '#999',
borderWidth: 1,
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
labelPrecision: null, // 显示label的小数精度
labelFormatter: null, // 标签格式化函数
showDetail: true, // 是否显示detail
showDataShadow: 'auto', // 是否显示数据阴影
realtime: true, // 拖动时是否实时更新
textStyle: {}, // 文本样式
zlevel: 0, // 所有图形的zlevel值
z: 4, // 组件的所有图形的z值
left: 'center', // 位置
top: 'top',
right: 'auto',
bottom: 'auto'
}
]4.4 时间轴(timeline)
timeline: {
show: true, // 是否显示
type: 'slider', // 类型：'slider'|'number'
axisType: 'time', // 轴类型：'time'|'value'|'category'
currentIndex: 0, // 当前选中索引
autoPlay: false, // 是否自动播放
rewind: false, // 是否反向播放
loop: true, // 是否循环播放
playInterval: 2000, // 播放间隔(毫秒)
realtime: true, // 拖动时是否实时更新
controlPosition: 'left', // 控制按钮位置：'left'|'right'
zlevel: 0, // 所有图形的zlevel值
z: 2, // 组件的所有图形的z值
left: '20%', // 位置
top: 'auto',
right: '20%',
bottom: 0,
width: 'auto', // 宽度
height: 50, // 高度
padding: 5, // 内边距
orient: 'horizontal', // 布局方向：'horizontal'|'vertical'
inverse: false, // 是否反向
symbol: 'circle', // 标记图形
symbolSize: 10, // 标记大小
symbolRotate: 0, // 标记旋转角度
symbolOffset: [0, 0], // 标记偏移
lineStyle: { // 轴线样式
color: '#304654',
width: 2,
type: 'solid'
},
label: { // 标签
position: 'auto', // 位置：'auto'|'left'|'right'|'top'|'bottom'
interval: 'auto', // 显示间隔
rotate: 0, // 旋转角度
formatter: null, // 格式化函数
show: true, // 是否显示
color: '#666' // 文本颜色
},
itemStyle: { // 图形样式
color: '#304654', // 颜色
borderWidth: 1 // 边框宽度
},
checkpointStyle: { // 当前点样式
symbol: 'circle',
symbolSize: 13,
color: '#c23531',
borderWidth: 2,
borderColor: 'rgba(194,53,49,0.5)',
animation: true,
animationDuration: 300,
animationEasing: 'quinticInOut'
},
controlStyle: { // 控制按钮样式
show: true, // 是否显示
showPlayBtn: true, // 是否显示播放按钮
showPrevBtn: true, // 是否显示上一个按钮
showNextBtn: true, // 是否显示下一个按钮
itemSize: 22, // 按钮大小
itemGap: 12, // 按钮间隔
position: 'left', // 位置：'left'|'right'
playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3c0.2-0.2,0.5-0.3,0.7-0.3c0.3,0,0.5,0.1,0.7,0.3l10.4,6.1c0.2,0.2,0.3,0.4,0.3,0.7ECharts 属性详解（续）
高级图表类型配置
5.1 地图(map)
series: [{
type: 'map',
map: 'china', // 地图类型，内置'china'/'world'等，或自定义地图名称
roam: true, // 是否开启鼠标缩放和平移漫游
center: [108.38, 37.8], // 当前视角中心点
zoom: 1.2, // 当前视角缩放比例
scaleLimit: { // 缩放限制
min: 1,
max: 10
},
nameMap: { // 自定义名称映射
'China': '中国'
},
selectedMode: 'multiple', // 选中模式
label: { // 地图区域名称
show: true,
color: '#333',
fontSize: 10
},
itemStyle: { // 地图区域样式
areaColor: '#eee',
borderColor: '#aaa',
borderWidth: 0.5,
borderType: 'solid'
},
emphasis: { // 高亮状态
label: {
color: '#fff'
},
itemStyle: {
areaColor: '#c23531'
}
},
select: { // 选中状态
label: {
color: '#fff'
},
itemStyle: {
areaColor: '#c23531'
}
},
data: [ // 数据
{name: '北京', value: 100},
{name: '上海', value: 200}
]
}]5.2 热力图(heatmap)
series: [{
type: 'heatmap',
coordinateSystem: 'cartesian2d', // 坐标系
pointSize: 10, // 点大小
blurSize: 15, // 模糊大小
minOpacity: 0, // 最小透明度
maxOpacity: 1, // 最大透明度
gradientColors: [ // 颜色渐变
'blue', 'green', 'yellow', 'red'
],
data: [ // 数据格式
[12, 33, 0.3], // [x, y, value]
[24, 15, 0.7]
]
}]5.3 树图(tree)
series: [{
type: 'tree',
data: [{ // 树结构数据
name: '根节点',
children: [
{name: '子节点1'},
{name: '子节点2'}
]
}],
layout: 'orthogonal', // 布局：'orthogonal'正交|'radial'径向
orient: 'vertical', // 方向：'vertical'垂直|'horizontal'水平
symbol: 'circle', // 节点标记
symbolSize: 7, // 节点大小
expandAndCollapse: true, // 是否可折叠
initialTreeDepth: 3, // 初始展开层级
label: { // 标签
position: 'left', // 位置
verticalAlign: 'middle',
align: 'right',
fontSize: 12
},
leaves: { // 叶子节点配置
label: {
position: 'right'
}
},
emphasis: { // 高亮状态
focus: 'ancestor' // 聚焦模式：'self'|'ancestor'|'descendant'|'relative'
},
lineStyle: { // 连接线样式
color: '#ccc',
width: 1.5,
curveness: 0.5 // 曲率
}
}]5.4 桑基图(sankey)
series: [{
type: 'sankey',
layout: 'none', // 布局方式
nodeWidth: 10, // 节点宽度
nodeGap: 8, // 节点间隔
nodeAlign: 'justify', // 节点对齐方式
draggable: true, // 是否可拖拽
levels: [{ // 层级配置
depth: 0,
itemStyle: {
color: '#fbb4ae'
}
}],
data: [ // 节点数据
{name: '节点1'},
{name: '节点2'}
],
links: [ // 边数据
{source: '节点1', target: '节点2', value: 10}
],
label: { // 标签
color: '#666',
fontSize: 12
},
itemStyle: { // 节点样式
borderWidth: 1,
borderColor: '#aaa'
},
lineStyle: { // 边样式
color: 'source', // 颜色跟随源节点
curveness: 0.5, // 曲率
opacity: 0.3 // 透明度
},
emphasis: { // 高亮状态
focus: 'adjacency', // 聚焦模式：'self'|'adjacency'|'links'
lineStyle: {
opacity: 0.8
}
}
}]5.5 旭日图(sunburst)
series: [{
type: 'sunburst',
center: ['50%', '50%'], // 中心位置
radius: [0, '90%'], // 半径范围
nodeClick: 'rootToNode', // 节点点击行为
sort: 'desc', // 排序方式：'desc'|'asc'|null
levels: [{ // 层级配置
r0: '0%',
r: '40%',
itemStyle: {
color: 'red'
}
}],
data: [{ // 数据格式
name: '父节点',
children: [
{name: '子节点1', value: 10},
{name: '子节点2', value: 20}
]
}],
label: { // 标签
rotate: 'radial', // 旋转方式
fontSize: 12
},
itemStyle: { // 图形样式
borderWidth: 1,
borderColor: '#fff'
},
emphasis: { // 高亮状态
focus: 'ancestor' // 聚焦模式
}
}]交互组件
6.1 工具栏(toolbox)
toolbox: {
show: true, // 是否显示
orient: 'horizontal', // 布局方向
itemSize: 15, // 图标大小
itemGap: 10, // 图标间隔
showTitle: true, // 是否显示标题
feature: { // 各工具配置
saveAsImage: { // 保存图片
type: 'png', // 图片格式：'png'|'jpeg'
name: '图表', // 文件名
title: '保存为图片',
pixelRatio: 1 // 图片分辨率
},
restore: { // 还原
show: true,
title: '还原'
},
dataView: { // 数据视图
show: true,
title: '数据视图',
readOnly: false, // 是否只读
lang: ['数据视图', '关闭', '刷新'] // 按钮文本
},
dataZoom: { // 区域缩放
show: true,
title: {
zoom: '区域缩放',
back: '区域缩放还原'
}
},
magicType: { // 动态类型切换
show: true,
type: ['line', 'bar', 'stack'],
title: {
line: '切换为折线图',
bar: '切换为柱状图',
stack: '切换为堆叠模式'
}
},
brush: { // 选框组件
type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
title: {
rect: '矩形选择',
polygon: '圈选',
lineX: '横向选择',
lineY: '纵向选择',
keep: '保持选择',
clear: '清除选择'
}
}
},
zlevel: 0, // 所有图形的zlevel值
z: 6, // 组件的所有图形的z值
left: 'right', // 位置
top: 'top',
right: null,
bottom: null,
width: 'auto', // 宽度
height: 'auto', // 高度
backgroundColor: 'transparent', // 背景色
borderColor: '#ccc', // 边框颜色
borderWidth: 0, // 边框宽度
padding: 5, // 内边距
textStyle: {} // 文本样式
}6.2 刷选框(brush)
brush: {
id: 'brush', // 组件ID
toolbox: ['rect', 'polygon', 'keep', 'clear'], // 工具按钮
brushLink: null, // 联动系列
seriesIndex: 'all', // 控制的系列
geoIndex: null, // 控制的地理坐标系
xAxisIndex: null, // 控制的x轴
yAxisIndex: null, // 控制的y轴
brushType: 'rect', // 默认刷子类型
brushMode: 'single', // 刷选模式：'single'|'multiple'
transformable: true, // 是否可变形
brushStyle: { // 刷子样式
borderWidth: 1,
color: 'rgba(120,140,180,0.3)',
borderColor: 'rgba(120,140,180,0.8)'
},
throttleType: 'fixRate', // 防抖类型
throttleDelay: 0, // 防抖延迟
removeOnClick: true, // 点击空白处是否删除选框
inBrush: { // 刷选中的图形样式
symbolSize: 30
},
outOfBrush: { // 未被刷选的图形样式
symbolSize: 10,
color: '#ccc'
},
z: 10000 // 层级
}高级功能配置
7.1 主题与样式
// 自定义主题
var theme = {
color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'],
textStyle: {
fontFamily: 'Microsoft YaHei, sans-serif'
},
title: {
textStyle: {
fontSize: 18,
fontWeight: 'bolder'
}
},
line: {
itemStyle: {
borderWidth: 2
},
lineStyle: {
width: 3
}
}
};
// 注册主题
echarts.registerTheme('myTheme', theme);
// 使用主题
var chart = echarts.init(dom, 'myTheme');7.2 响应式配置
// 响应式配置函数
function resizeChart() {
var option = {
// 基础配置
grid: {
left: window.innerWidth < 768 ? '3%' : '8%',
right: window.innerWidth < 768 ? '3%' : '8%',
bottom: window.innerWidth < 768 ? '15%' : '10%'
},
legend: {
orient: window.innerWidth < 768 ? 'horizontal' : 'vertical',
top: window.innerWidth < 768 ? 'bottom' : 'middle'
},
series: [{
// 系列配置
}]
};
myChart.setOption(option);
}
// 监听窗口变化
window.addEventListener('resize', function() {
myChart.resize();
resizeChart();
});7.3 事件处理
// 绑定事件
myChart.on('click', function(params) {
console.log('点击事件:', params);
// params包含以下属性：
// componentType: 组件类型，如'series'
// seriesType: 系列类型，如'line'
// seriesIndex: 系列索引
// seriesName: 系列名称
// name: 数据名称
// dataIndex: 数据索引
// data: 原始数据项
// value: 当前值
// event: 原始事件对象
});
// 常用事件类型
myChart.on('mouseover', function(params) {}); // 鼠标悬停
myChart.on('mouseout', function(params) {}); // 鼠标移出
myChart.on('legendselectchanged', function(params) {}); // 图例选择变化
myChart.on('datazoom', function(params) {}); // 数据区域缩放
myChart.on('restore', function(params) {}); // 还原
myChart.on('finished', function(params) {}); // 渲染完成
// 解绑事件
myChart.off('click'); // 解绑特定事件
myChart.off(); // 解绑所有事件7.4 动画控制
// 动画配置
option = {
animation: true, // 是否开启动画
animationDuration: 1000, // 初始动画时长(毫秒)
animationEasing: 'cubicOut', // 动画缓动效果
animationDelay: 0, // 动画延迟
animationDurationUpdate: 300, // 数据更新动画时长
animationEasingUpdate: 'cubicInOut', // 数据更新动画缓动效果
animationDelayUpdate: 0, // 数据更新动画延迟
stateAnimation: { // 状态动画
duration: 300,
easing: 'cubicOut'
}
};
// 动画控制API
myChart.dispatchAction({
type: 'highlight', // 高亮
seriesIndex: 0,
dataIndex: 1
});
myChart.dispatchAction({
type: 'showTip', // 显示提示框
seriesIndex: 0,
dataIndex: 1
});
myChart.dispatchAction({
type: 'dataZoom', // 数据缩放
start: 20,
end: 80
});
// 常用action类型
// 'highlight' - 高亮
// 'downplay' - 取消高亮
// 'showTip' - 显示提示框
// 'hideTip' - 隐藏提示框
// 'dataZoom' - 数据区域缩放
// 'restore' - 还原
// 'takeGlobalCursor' - 全局光标控制性能优化
8.1 大数据量优化
series: [{
type: 'line',
large: true, // 开启大数据优化
largeThreshold: 2000, // 启用优化的阈值
progressive: 400, // 渐进式渲染时每一帧绘制数量
progressiveThreshold: 3000, // 启用渐进式渲染的阈值
data: bigData // 大数据数组
}]8.2 渲染器选择
// 初始化时选择渲染器
var chart = echarts.init(dom, null, {
renderer: 'canvas' // 可选'canvas'或'svg'
});
// 渲染器特点比较：
// Canvas:
// - 适合数据量大的场景
// - 内存占用较低
// - 不支持CSS动画
// - 不支持事件穿透
// SVG:
// - 适合元素数量少的场景
// - 支持CSS动画
// - 支持事件穿透
// - 内存占用较高8.3 按需加载
// 1. 按需引入ECharts核心模块
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 2. 注册必须的组件
echarts.use([
LineChart,
TitleComponent,
TooltipComponent,
CanvasRenderer
]);
// 3. 初始化图表
var chart = echarts.init(dom);8.4 虚拟滚动
// 对于超大数据集的折线图/柱状图
dataZoom: [{
type: 'inside',
xAxisIndex: 0,
start: 0,
end: 10 // 初始显示10%数据
}],
series: [{
type: 'line',
data: hugeData, // 超大数组
sampling: 'lttb', // 采样算法：'lttb'|'average'|'max'|'min'|'sum'
dimensions: ['date', 'value'], // 指定维度
encode: { // 数据到图形的映射
x: 'date',
y: 'value'
}
}]国际化与无障碍
9.1 多语言支持
// 注册语言包
echarts.registerLocale('EN', {
time: {
month: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
}
});
// 初始化时指定语言
var chart = echarts.init(dom, null, {
locale: 'EN'
});
// 工具提示国际化
tooltip: {
formatter: function(params) {
return params.name + ': ' + params.value;
}
}9.2 无障碍配置
option = {
aria: {
enabled: true, // 是否开启无障碍
label: { // 标签配置
description: '这是一个饼图，展示了不同类别的数据分布',
general: {
withTitle: '这是一个标题为"{title}"的图表',
withoutTitle: '这是一个图表'
},
series: {
maxCount: 5, // 最大系列描述数量
single: {
prefix: '它由{seriesCount}个系列组成。',
withName: '系列名称为{name}，数值为{value}。',
withoutName: '数值为{value}。'
},
multiple: {
prefix: '它包含{seriesCount}个系列。',
withName: '系列名称为{name}，数值为{value}。',
withoutName: '数值为{value}。',
separator: {
middle: '；',
end: '。'
}
}
},
data: {
maxCount: 5, // 最大数据描述数量
allData: '其数据为——{valueList}',
partialData: '前{displayCnt}项为——{valueList}',
withName: '{name}的数据为{value}',
withoutName: '{value}',
separator: {
middle: '，',
end: ''
}
}
}
}
};扩展与自定义
10.1 自定义系列
// 注册自定义系列
echarts.registerChart('custom', CustomChart);
// 使用自定义系列
series: [{
type: 'custom',
renderItem: function(params, api) {
// 自定义渲染逻辑
return {
type: 'group',
children: [{
type: 'circle',
shape: {
cx: api.value(0),
cy: api.value(1),
r: api.value(2)
},
style: {
fill: api.visual('color')
}
}]
};
},
data: [[10, 20, 5], [30, 40, 8]]
}]10.2 自定义组件
// 注册自定义组件
echarts.registerComponent('custom', CustomComponent);
// 使用自定义组件
option = {
custom: [{
type: 'custom',
// 自定义配置
}]
};10.3 自定义形状
// 注册自定义形状
echarts.registerShape('customShape', function() {
return {
buildPath: function(ctx, shape) {
// 绘制路径
ctx.moveTo(shape.x, shape.y);
ctx.lineTo(shape.x + shape.width, shape.y);
ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
ctx.lineTo(shape.x, shape.y + shape.height);
ctx.closePath();
}
};
});
// 使用自定义形状
series: [{
type: 'custom',
renderItem: function() {
return {
type: 'customShape',
shape: {
x: 100,
y: 100,
width: 200,
height: 100
}
};
}
}]以上是ECharts的全面属性详解，涵盖了从基础配置到高级功能的各个方面。实际使用时，可以根据具体需求选择合适的配置项进行组合。
赞助
