Echarts常用参数
一些以后应该能用到的参数
option = {
title:{ //图表的标题配置
text: '主标题文本',
subtext: '副标题文本',
show: true //是否展示标题
},
tooltip: { // 提示框配置
trigger: 'item', // 触发类型，可选值：'item'(数据项触发), 'axis'(坐标轴触发), 'none'(不触发)
axisPointer: {...}, // 坐标轴指示器配置，用于 axis 类型的触发器
showContent: true, // 是否显示提示框浮层， 默认为true
alwaysShowContent: false, // 鼠标移出图形区域后是否一直显示提示框内容
triggerOn: 'mousemove', // 提示框触发的条件，可选：'mousemove', 'click', 'mousemove|click', 'none'
confine: false, // 是否将 tooltip 框限制在图表的区域内
formatter: function(params) {...}, // 提示框内容格式化器，支持回调函数自定义提示框内
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
borderColor: '#333', // 提示框浮层的边框颜色
borderWidth: 0, // 提示框浮层的边框宽度
padding: 5, // 提示框浮层的内边距
textStyle: {...}, // 提示框文本的样式
position: function(pos, params, dom, rect, size) {...}, // 提示框的位置，支持回调函数自定义位置
extraCssText: 'width: 100px;'// 额外的 CSS 样式文本，可用于自定义样式// ... 其他配置
},
legend: { // 图例配置
show: true, // 是否显示图例，默认为true
type: 'plain', // 图例的类型，可选值：'plain'（普通图例），'scroll'（可滚动翻页的图例）
left: 'center', // 图例的水平对齐方式，可选值：'left'、'center'、'right'
top: 'top', // 图例的垂直对齐方式，可选值：'top'、'middle'、'bottom'
orient: 'horizontal', // 图例的布局方向，可选值：'horizontal'（水平布局），'vertical'（垂直布局）
align: 'auto', // 图例标记和文本的对齐方式，可选值：'auto'、'left'、'right'
padding: 5, // 图例内边距
itemGap: 10, // 图例每项之间的间隔
itemWidth: 25, // 图例标记的宽度
itemHeight: 14, // 图例标记的高度
selectedMode: true, // 图例的选中模式，可选值：'single'（单选），'multiple'（多选），'false'（不可选）
selected: {...}, // 初始选中状态设置
inactiveColor: '#ccc', // 未选中图例标记的颜色
textStyle: {...}, // 图例文本的样式
tooltip: {...}, // 图例的提示框配置，用于鼠标悬停在图例项上时显示提示信息
data: [ // 图例的数据项数组
{ name: '系列1', icon: 'circle' },
{ name: '系列2', icon: 'rect' },
// ...
]
}
grid: { // 图表离容器的距离
show: false, // 是否显示绘制区域，默认为false
left: '10%', // 绘制区域的左边距
top: '60', // 绘制区域的上边距right: '10%', // 绘制区域的右边距
bottom: '20%', // 绘制区域的下边距
containLabel: false, // 是否包含坐标轴标签，默认为false，如果设置为true，会将坐标轴标签算入绘制区域，常用于防止标签溢出
backgroundColor: '', // 绘制区域的背景色
borderColor: '#ccc', // 绘制区域的边框颜色
borderWidth: 0, // 绘制区域的边框宽度
shadowBlur: 0, // 绘制区域的阴影模糊大小
shadowColor: '', // 绘制区域的阴影颜色
shadowOffsetX: 0, // 绘制区域的阴影水平偏移
shadowOffsetY: 0// 绘制区域的阴影垂直偏移
},
xAxis: { // x 轴配置
show: true, // 是否显示 X 轴，默认为true
type: 'category', // X 轴类型，可选值有 'category'（类目轴）、'value'（数值轴）、'time'（时间轴）、'log'（对数轴）
data: [], // X 轴数据，通常为一个数组，每个元素对应一个刻度
name: '', // X 轴名称
nameLocation: 'end', // X 轴名称位置，可选值有 'start'、'middle'、'end'
nameGap: 15, // X 轴名称与轴线之间的距离
nameTextStyle: {}, // X 轴名称的样式
axisLabel: {}, // 刻度标签的样式
axisTick: {}, // 刻度线的样式
axisLine: {}, // 轴线的样式
splitLine: {}, // 分隔线的样式
splitArea: {}, // 分隔区域的样式
inverse: false, // 是否反转 X 轴（从右到左排列）
boundaryGap: true, // 坐标轴两边留白策略，可选值为 true、false、[min, max]
min: null, // X 轴的最小值
max: null, // X 轴的最大值
interval: 'auto', // 刻度的间隔，'auto' 表示自动计算
axisPointer: {}, // 坐标轴指示器的配置，用于显示 tooltip 时的辅助线
triggerEvent: false// 是否触发事件，比如鼠标悬停时的 tooltip，默认为false
},
yAxis: { // y 轴配置
//与x轴类似
},
series: [ // 系列列表，每个系列对应一个图表
{
type: 'bar', // 系列类型，比如柱状图、折线图等
name: '', // 系列名称
data: [], // 系列数据，通常为一个数组，每个元素对应一个数据点
xAxisIndex: 0, // X 轴索引，用于指定数据与哪个 X 轴对应
yAxisIndex: 0, // Y 轴索引，用于指定数据与哪个 Y 轴对应
symbolSize: 10, // 图形的大小
symbol: 'circle', // 标记的图形，比如 'circle'、'rect'、'triangle' 等
label: {}, // 标签的样式
itemStyle: {}, // 数据项的样式
lineStyle: {}, // 折线图线条的样式
barWidth: 'auto', // 柱状图的宽度，可以设置成数字或百分比
barGap: '30%', // 柱状图之间的间隔
barCategoryGap: '20%', // 不同系列的柱状图之间的间隔
smooth: false, // 是否平滑曲线，仅对折线图有效
step: false, // 是否使用阶梯线，仅对折线图有效
showSymbol: true, // 是否显示数据点的标记
animation: true, // 是否开启动画效果
animationDuration: 1000, // 动画时长，单位为毫秒
animationEasing: 'linear', // 动画缓动效果
tooltip: {}, // 提示框的样式和内容
emphasis: {} // 高亮状态下的样式
},
{...}
],
toolbox: {...}, // 工具箱配置，可添加下载、刷新、数据视图等功能
dataZoom: [{...}, {...}], // 数据区域缩放配置，可以支持x轴、y轴的缩放
visualMap: {...}, // 视觉映射组件配置，用于颜色、大小等数据的映射
polar: {...}, // 极坐标系配置
radiusAxis: {...}, // 极坐标系的径向轴配置
angleAxis: {...}, // 极坐标系的角度轴配置
radar: {...}, // 雷达图配置
brush: {...}, // 刷选组件配置，用于选取特定区域进行联动
geo: {...}, // 地理坐标系配置
parallel: {...}, // 平行坐标系配置
parallelAxis: {...}, // 平行坐标系的坐标轴配置
singleAxis: {...}, // 单轴配置
timeline: {...}, // 时间线配置，用于展示不同时间段的数据
graphic: {...}, // 自定义图形元素配置
calendar: {...}, // 日历坐标系配置
dataset: {...}, // 数据集配置，用于在多个系列之间共享数据
aria: {...}, // 无障碍配置
animation: {...}, // 动画配置
seriesLayoutBy: 'row', // 数据在图表中的布局方式，可选值：'column'、'row'
blendMode: 'source-over', // 图表绘制时的混合模式，可控制系列之间的叠加效果
... // 其他自定义配置
}
