目录
一、基本使用
Echarts官方文档：快速上手 - Handbook - Apache ECharts
配置项的写法与位置：
位置不同：有的属性可以在option中全局配置，也可以局部配置。
写法不同：配置项可以是对象，可以是数组，也可以是函数。
下面以color为例演示一下：
1. 全局配置color且为数组类型
option = {
/这就是颜色的全局配置，但是如果不配置颜色echart有默认颜色这里不详解就是理解概念/
color: ['red', 'green'] // 配置颜色会把默认颜色覆盖
}2. 局部配置color
option = {
title: {
textStyle: {
color: 'red' // 这里代表字体颜色是红色
}
}
}3. 对象格式color
color: { /这里是线性渐变颜色/
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(240,47,194,0.7)'// 0%处的颜色
}, {
offset: 1,
color: 'rgba(149,111,212,0.7)' // 100%处的颜色
}]
}二、各个配置项属性
option = {
title: {}, //标题组件，包含主标题和副标题，如有副标题可以写成数组
color: [], //颜色
backgroundColor: '', //背景色
darkMode: '', //是否是暗黑模式
dataZoom: [], //
dataset: [{}], //数据集合
toolbox: {}, //工具栏组件
tooltip: {}, //提示框组件
grid: {}, //图表上下左右距离盒子的距离
xAxis: {}, //x轴组件
yAxis: {}, //y轴组件
series: [{
type: '' //graph关系图，line折线图，bar柱形图，boxplot箱体图等
}],
graphic: [],
baseOption: {},
legend: {}, //控制图例组件
calculable: '',
options: [],
brush: {},
animation: true, //是否开启动画，布尔值
animationThreshold: 2000, //是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画
animationDuration: 1000, //初始动画时长
animationEasing: 'cubicOut', //初始动画缓动效果
animationDelay: 0, //初始动画的延迟，毫秒，支持回调函数
animationDurationUpdate: 300, //数据更新动画的时长，毫秒，支持回调函数
animationEasingUpdate: 'cubicInOut', //数据更新动画的缓动效果
animationDelayUpdate: 0, //数据更新动画的延迟，毫秒，支持回调函数
blendMode: '', //图形的混合模式，默认为source-over，支持每个系列单独设置。
hoverLayerThreshold: 3000, //图形数量阈值
useUTC: false, //是否使用UTC时间
options: '',
]}；三、title配置项
title就是图表标题，可以控制它的属性，如颜色、位置等。
title: {
show: true, // 是否显示标题组件,（true/false）
text: '', // 主标题文本，支持使用\n换行
textAlign:'auto', //整体水平对齐（包括text和subtext）
textVerticalAlign:'auto', //整体的垂直对齐（包括text和subtext）
padding:0, // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
left:'auto', // title组件离容器左侧距离，写法如'5'||'5%'
right:'auto', //'title组件离容器右侧距离
top:'auto', // title组件离容器上侧距离
bottom:'auto', // title组件离容器下侧距离
borderColor: '', // 标题边框颜色
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
color: '', //字体颜色
fontStyle: '', //字体风格
fontSize: 14, //字体大小
fontWeight: 400, //字体粗细
fontFamily: '', //文字字体
lineHeight: '' //字体行高
align:'center', //文字水平对齐方式（left/right）
verticalAlign:'middle', //文字垂直对齐方式（top/bottom）
},
subtext: '', // 副标题
subtextStyle: { // 副标题样式
color: '#ccc',
fontStyle:'normal',
fontWeight:'normal',
fontFamily:'sans-serif',
fontSize:18,
lineHeight:18,
}
}当有副标题的时候title有两种写法，可以写为数组或对象。
title: [
{ // 标题
text: '标题',
left: 'center'
},
{ // 副标题
text: '副标题', // '/n'换行
borderColor: '#999',
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
fontSize: 14
},
left: '10%', // 位置
top: '90%' // 位置
}
],四、X轴（xAxis）与 Y轴（yAxis）配置项
xAxis与yAxis中配置项有很多，下面以xAxis进行详解，yAxis参考xAxis即可：
-
axisLine：坐标轴轴线相关设置。
-
axisTick：坐标轴刻度相关设置。
-
axisLabel：坐标轴刻度标签的相关设置。
-
splitLine： 坐标轴在 grid 区域中的分隔线设置。
-
splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。
xAxis: {
show: true, // 是否显示x轴
position: 'top', // x轴的位置（top/bottom）
type: 'category', // 坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
nameRotate: 10, // 坐标轴名字旋转，角度值
inverse: false, // 是否是反向坐标轴
boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略，也可以使用布尔值，true居中
splitNumber: 5, // 坐标轴的分割段数（预估值）
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#333', // 坐标轴线线的颜色
width: '5', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
inside: true, // 坐标轴刻度是否朝内，默认朝外
length: 5, // 坐标轴刻度的长度
lineStyle: {
color: '#FFF', // 刻度线的颜色
width: 10, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisLabel: {
show: true, // 是否显示刻度标签
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
inside: true, // 刻度标签是否朝内，默认朝外
rotate: 90, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
margin: 10, // 刻度标签与轴线之间的距离
// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
color: '#FFF', // 刻度标签文字的颜色
fontStyle: 'normal', // 字体的风格（normal无样式；italic斜体；oblique倾斜字体）
// 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontWeight: 'normal',
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom)
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
},
splitLine: {
show: true, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
// color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
color: ['#ccc'],
width: 3, // 分隔线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
splitArea: {
show: true, // 是否显示分隔区域
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
areaStyle: {
// color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）
// 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
fontWeight: 'normal',
fontSize: '20', // 文字字体大小
align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom）
lineHeight: '50', // 行高
backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
},
},
}五、颜色color配置项
1. color的全局与局部配置
调色盘颜色列表。如果没有设置全局颜色，则会依次循环从该列表中取颜色作为系列颜色。 默认为：
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']全局color配置代码如下：
option = {
/这里的color是全局配置，下面给的颜色会覆盖上述-调色盘颜色列表-中的颜色，数据会循环红色与绿色/
color: ['red', 'green'],
title: {}
}2. color的多种数据类型
a. 不透明度
color: 'red'-
十六进制格式
color: '#ccc'-
rgb格式
color: 'rgb(128, 128, 128)'b. 透明度
color: 'rgb(128, 128, 128, .5)'3. 线性渐变
color: [ //仪表盘背景颜色渐变
[1,new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0.1,
color: "#fd2100"
}, {
offset: 0.6,
color: "#d09f00"
}, {
offset: 1,
color: "#26fd00"
}]);
]
]-
线性渐变linear
/前四个参数分别是x0,y0,x2,y2，范围从0-1，相当于在图形包围盒中的百分比，若globalCoord为true，则该四个值是绝对的像素位置/
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}4. 径向渐变
color:new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}])-
径向渐变radial
/前三个参数分别是圆心x,y和半径，取值同线性渐变/
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0%处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}5. 扇形渐变
color: [
[0.1, 'red'],
[0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'red'
}, {
offset: 0.8,
color: 'rgb(235,205,6)'
}]
)],
[0.7, 'rgb(235,205,6)'],
[0.9, new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgb(13,211,97)'
}, {
offset: 0.6,
color: 'rgb(235,205,6)'
}]
)],
[1, 'rgb(13,211,97)']
],6. 纹理填充
color: {
//支持为HTMLImageElement, HTMLCanvasElement，不支持路径字符串
image: document.getElementById('bg_img'),
repeat: 'repeat' // 是否平铺，可以是'repeat-x','repeat-y','no-repeat'
}<img src="bg.png" id="bg_img" style="display:none" />六、legend图例组件配置项
-
itemStyle：图形样式
-
lineStyle：图例图形中线的样式
-
textStyle：图例图形中文字的样式
-
tooltip：图例的tooltip配置，配置项同tooltip。默认不显示。
-
data：图例数据数组，若data没有被指定，会自动从当前系列中获取。多数系列会取自series.name或者series.encode的 seriesName所指定的维度
legend: {
type: 'plain', //图例类型，plain/scroll
show: true, //是否显示x轴，布尔值
zlevel: 2, //控制图形的前后顺序
z: 2, //控制图形的前后顺序
left: '', //图例离容器左侧的距离，20/'20%'/'left'/'atuo'等
top: '',
right: '',
bottom: '',
width: 'auto', //宽度，默认自适应
height: 'auto', //高度，默认自适应
orient: 'horizontal', //布局朝向，horizontal/vertical
align: 'auto', //图例标记和文本的对齐，默认自动，auto/left/right
padding: 5, //内边距，默认各方向内边距为5px
itemGap: 10, //图例间隔。横向时为水平间隔，纵向时为纵向间隔
itemWidth: 25, //图形宽度
itemHeight: 14, //图形高度
itemStyle: {
color: '', //颜色，参考下面的文章
borderColor: '', //描边颜色，支持格式同color，不支持回调函数
borderWidth: auto, //描边宽度，可以为数字默认单位为px
borderType: solid, //描边类型，值：solid默认/dashed/dotted/number/array
borderDashOffset: 0,//虚线偏移量，搭配borderType指定dashed、array实现灵活的虚线效果
borderCap: round //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
},
lineStyle: {
color: '', //颜色，参考下面的文章
width: auto, //线宽
type: solid, //线的类型，solid默认/dashed/dotted/number/array
dashOffset: 0, //虚线的偏移量，type指定dashed、array实现灵活的虚线效果
cap: round, //指定线段末端的绘制方式，参考上面的'borderCap'
join: auto, //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
miterLimit: 10, //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
//阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowBlur: 10,
shadowColor: '', //阴影颜色，格式同color
shadowOffsetX: 0, //阴影水平方向上偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: auto //透明度，支持从 0 到 1 的数字，为 0 时不绘制该图形
},
symbolRotate: inherit, //旋转角度，类型为number|inherit。若为inherit，表示取系列symbolRotate
formatter: 'Legend {name}', //用来格式化图例文本，支持字符串模板和回调函数两种形式，name为图例名称
selectedMode: true, //图例选择模式，true/false/single/multiple
inactiveColor: '#ccc', //图例关闭时的颜色
inactiveBorderColor: '#ccc', //图例关闭时的描边颜色
inactiveBorderWidth: 'auto', //关闭时的描边粗细，属性值：auto取2/不存在描边取0/inherit始终取系列描边粗细
selected: {
'系列1': true, // 选中'系列1'
'系列2': false // 不选中'系列2'
},
textStyle: {
color: #333, //文字颜色
fontStyle: '', //字体风格
fontWeight: '', //字体粗细
fontFamily: '', //字体系列
fontSize: 12, //字体大小
lineHeight: 16, //行高
backgroundColor: '', //背景色，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
borderColor: '', //边框颜色
borderWidth: 0, //边框宽度
borderType: 'solid', //边框描边类型，属性值：solid/dashed/dotted/number/array
borderDashOffset: 0, //虚线偏移量，可搭配borderType指定dashed/array实现灵活的虚线效果
borderRadius: 0, //文字块圆角
padding: 0, //文字块内边距
shadowColor: 'transparent', //文字块背景阴影颜色
shadowBlur: 0, //文字块背景阴影长度
shadowOffsetX: 0, //文字块背景阴影 X 偏移
shadowOffsetY: 0, //文字块背景阴影 Y 偏移
width: 0, //文本显示宽度
height: 0, //文本显示高度
textBorderColor: '', //文字本身描边颜色
textBorderWidth: '', //文字本身描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0,//虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身阴影长度
textShadowOffsetX: 0, //文字本身阴影 X 偏移
textShadowOffsetY: 0, //文字本身阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时，该属性配置末尾显示文本
rich: {}, //自定义富文本样式
},
tooltip: { //配置项同tooltip。默认不显示
show: true
},
//图例项icon，用来修改默认的图形样式
icon: '', //属性值：circle/rect/roundRect/triangle/diamond/pin/arrow/none/'image:'/'path:'
data: [{
name: '',
//图例项的icon
icon: 'circle',
itemStyle: { //图例项的图形样式
color: 'red',
borderColor: ''
borderWidth: auto,
borderType: '',
borderDashOffset: 0,
borderCap: inherit,
borderJoin: inherit,
borderMiterLimit: inherit,
shadowBlur: 0,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: inherit,
decal: inherit
},
lineStyle: {}, //同上面的itemStyle
symbolRotate: 'inherit', //图形旋转角度
textStyle: {} //图例项的文本样式
}],
backgroundColor: 'transparent', //图例背景色，默认透明
borderColor: '#ccc', //边框颜色
borderWidth: 1, //边框线宽
borderRadius: 0, //圆角半径，单位px，支持传入数组分别指定 4 个圆角半径
//图形阴影的模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowBlur: 10,
shadowColor: '', //阴影颜色。支持的格式同color
shadowOffsetX: 0,
shadowOffsetY: 0,
scrollDataIndex: 0, //type为'scroll'时有效，图例当前最左上显示项的dataIndex
pageButtonItemGap: 5, //type为'scroll'时有效，图例控制块中，按钮和页信息之间的间隔
pageButtonGap: '', //type为'scroll'时有效，图例控制块和图例项之间的间隔
pageButtonPosition: 'end', //type为'scroll'时有效，图例控制块的位置
pageFormatter: '{current}/{total}', //type为'scroll'时有效，图例控制块中，页信息的显示格式
pageIcons: { //type为'scroll'时有效，图例控制块的图标
horizontal: '',
vertical: ''
},
pageIconColor: '#2f4554', //type为'scroll'时有效，翻页按钮的颜色
pageIconInactiveColor: '#aaa', //type为'scroll'时有效，翻页按钮不激活时（即翻页到头时）的颜色
pageIconSize: 15, //type为'scroll'时有效，翻页按钮的大小
pageTextStyle: {}, //type为'scroll'时有效，图例页信息的文字样式，属性值参考textStyle写法
animation: true, //图例翻页是否使用动画
animationDurationUpdate: 800, //图例翻页时动画时长
emphasis: {
selectorLabel: {} //内容参考textStyle
},
selector: false, //图例组件中选择器按钮，默认不显示
selectorLabel: {}, //选择器按钮的文本标签样式，内容参考textStyle
selectorPosition: 'auto', //选择器位置
selectorItemGap: 7, //选择器按钮之间间隔
selectorButtonGap: 10 //选择器按钮与图例组件之间间隔
}七、 tooltip提示框组件配置项
-
axisPointer：坐标轴指示器配置项
-
label：坐标轴指示器的文本标签
-
lineStyle：
axisPointer.type为line时有效
-
shadowStyle：
axisPointer.type为shadow时有效 -
crossStyle：
axisPointer.type为cross时有效。 -
textStyle：提示框浮层的文本样式
tooltip: {
show: true, //是否显示提示框组件
trigger: 'item', //触发类型，属性值：item数据项触发/axis坐标轴触发/none不触发
axisPointer: {
type: 'line', //指示器类型，属性值：line直线/shadow阴影/none/cross十字准星
axis: 'auto', //指示器坐标轴，属性值：x/y/radius/angle
snap: true, //坐标轴指示器是否自动吸附到点上。默认自动判断，布尔值
z: 0, //坐标轴指示器z值，控制图形的前后顺序，属性值：number
label: {
show: false, //是否显示文本标签
precision: 'auto', //文本标签中数值小数点精度。默认根据当前轴的值自动判断
formatter: {}, //文本标签文字格式化器
margin: 3, //label距离轴的距离
color: '#fff', //颜色，文章链接如下 Echart图表之颜色color配置项大全
fontStyle: '',
fontWeight: '',
fontFamily: '',
fontSize: 12,
lineHeigh: 20,
width: 20,
height: 100,
textBorderColor: '', //文字本身描边颜色
textBorderWidth: , //文字本身描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0, //虚线偏移量，搭配textBorderType指定dashed/array实现虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身的阴影长度
textShadowOffsetX: 0, //文字本身的阴影 X 偏移
textShadowOffsetY: 0, //文字本身的阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或换行,配置width时有效,truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
padding: 0,
backgroundColor: 'auto', //背景颜色，默认是和axis.axisLine.lineStyle.color 相同
borderColor: '', //文本标签的边框颜色
borderWidth: 0, //文本标签的边框宽度
shadowBlur: 3, //图形阴影模糊大小，配合shadowColor,shadowOffsetX,shadowOffsetY设置阴影效果
shadowColor: #aaa, //阴影颜色，支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0 //阴影垂直方向上的偏移距离
},
lineStyle: {
color: #555, //颜色，文章链接如下 Echart图表之颜色color配置项大全
width: 1, //线宽
type: solid, //线的类型，属性值：solid/dashed/dotted/number/array
dashOffset: 0, //虚线偏移量，搭配type指定dashed/array实现虚线效果
cap: 'butt', //线段末端的绘制，butt方形/round圆形/square也是方形效果与butt不同
join: 'bevel', //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性，bevel默认/round/miter
miterLimit: 10, //设置斜接面限制比例，只有当join为miter才有效，属性值：10默认值/number
shadowBlur: 10, //阴影模糊大小，该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: '', //阴影颜色，支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
},
shadowStyle: {
color: '#fff', //颜色，文章链接如下 Echart图表之颜色color配置项大全
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
crossStyle: {
color: '#fff', //颜色，文章链接如下 Echart图表之颜色color配置项大全
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
animation: line, //是否开启动画
animationThreshold: 2000, //是否开启动画的阈值
animationDuration: 1000, //初始动画的时长，支持回调函数
animationEasing: 'cubicOut', //初始动画的缓动效果
animationDelay: 0, //初始动画的延迟，支持回调函数
animationDurationUpdate: 200, //数据更新动画的时长，支持回调函数
animationEasingUpdate: exponentialOut, //数据更新动画的缓动效果
},
showContent: true, //是否显示提示框浮层，默认显示
alwaysShowContent: false, //是否永远显示提示框内容
triggerOn: 'mousemove|click', //提示框触发条件，mousemove/click/mousemove|click/none。none时可通过action.tooltip.showTip和action.tooltip.hideTip来手动触发和隐藏。也可通过axisPointer.handle来触发或隐藏
showDelay: 0, //浮层显示的延迟，默认0ms
hideDelay: 100, //浮层隐藏的延迟
enterable: false, //鼠标是否可进入提示框浮层中，默认为false
renderMode: 'html', //浮层的渲染模式，html默认/richText富文本形式
confine: false, //是否将 tooltip 框限制在图表的区域内
appendToBody: false, //是否将组件DOM节点添加为HTML的<body>子节点。只有当renderMode为html有意义
className: 'echarts-tooltip echarts-tooltip-dark', //指定tooltip的DOM节点CSS类，只在html模式下生效
transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是s
position: [], //提示框浮层的位置
formatter: ()=>{}, //提示框浮层内容格式器，用这个可以修改提示框默认内容
valueFormatter: (value: number | string) => string, //数值显示部分的格式化回调函数
backgroundColor: '', //背景颜色，格式同color
borderColor: '', //提示框浮层边框颜色，格式同color
borderWidth: 0, //提示框浮层的边框宽
padding: 5,
textStyle: {
color: '#fff', //颜色，文章链接如下 Echart图表之颜色color配置项大全
fontStyle: '',
fontWeight: '',
fontFamily: '',
fontSize: 14,
lineHeight : 20,
width: 220,
height: 20,
textBorderColor: '', //文字本身的描边颜色
textBorderWidth: '', //文字本身的描边宽度
textBorderType: 'solid', //文字本身描边类型，属性值：solid/dashed/dotted/number/array
textBorderDashOffset: 0, //虚线偏移量，可搭配textBorderType指定dashed/array实现灵活的虚线效果
textShadowColor: 'transparent', //文字本身阴影颜色
textShadowBlur: 0, //文字本身阴影长度
textShadowOffsetX: 0, //文字本身阴影 X 偏移
textShadowOffsetY: 0, //文字本身阴影 Y 偏移
overflow: 'none', //文字超出宽度是否截断或者换行，配置width时有效，属性值：truncate/break/breakAll
ellipsis: '', //在overflow配置为'truncate'的时，该属性配置末尾显示文本
rich: {}, //自定义富文本样式
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', //额外附加到浮层的 css 样式
order: 'seriesAsc' //多系列提示框浮层排列顺序，seriesAsc默认/seriesDesc/valueAsc/valueDesc
}八、series基本使用与配置项
-
type：图表类型
-
itemStyle：样式
-
itemStyle.decal：图形的贴花图案
-
emphasis：高亮样式
-
blur：淡出时的图形样式和标签样式
-
select：数据选中时的图形样式和标签样式
-
data：数据
-
markPoint：图表标注
-
markLine：图表标线
-
markArea：图表标域，常用于标记图表中某个范围的数据
-
universalTransition：全局过渡动画相关的配置
-
tooltip：本系列特定的 tooltip 设定
{
type: 'line', //line表示折线图，bar表示柱状图，pie表示饼图，scatter表示散点图
name: '数据系列1', //名称，用于tooltip的显示，legend的图例筛选等
data: [1, 2, 3, 4, 5], //数据，可以是数组，也可以是函数，详见下面的data配置项
itemStyle: { // 样式配置，如颜色、线条粗细、图形类型等
color: '#ff4c4c', //线条颜色
borderWidth: 2, //线条粗细
borderType: 'solid', //线条类型
borderColor: '#fff', //线条颜色
lineStyle: {
type: 'solid', //线条类型
width: 2, //线条粗细
color: '#ff4c4c' //线条颜色
},
areaStyle: {
color: '#ff4c4c' //填充颜色
},
symbol: 'circle', //点的形状
symbolSize: 10 //点的大小
},
label: { //标签配置，如显示文本、文本位置、文本样式等
show: true, //是否显示标签
position: 'top', //标签位置，如'top'、'bottom'、'left'、'right'等
formatter: '{c}', //标签文本格式化字符串，支持'{a}'、'{b}'、'{c}'等变量
color: '#666', //标签颜色
fontWeight: 'bold', //标签字体粗细
fontFamily: 'Arial', //标签字体
fontSize: 16 //标签字号
},
markPoint: { //标记配置，如显示点、点的样式、点的大小等
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbol: 'circle', //点的形状
symbolSize: 10, //点的大小
label: {
show: true, //是否显示标签
color: '#666', //标签颜色
fontWeight: 'bold', //标签字体粗细
fontFamily: 'Arial', //标签字体
fontSize: 16 //标签字号
}
},
animation: { //动画配置，如动画类型、动画时长、动画延迟等
type: 'scale', //动画类型，如'scale'、'fadeIn'、'explode'等
duration: 1000, //动画时长，单位为ms
delay: 0, //动画延迟，单位为ms
easing: 'cubicOut' //动画缓动函数，如'linear'、'easeIn'、'cubicOut'等
},
smooth: false, //是否开启平滑曲线
gradient: { //是否开启渐变色
type: 'linear', //渐变类型，如'linear'、'radial'等
colorStops: [{ offset: 0, color: '#ff4c4c' }, { offset: 1, color: '#fff' }], // 渐变颜色
global: false //是否全局开启渐变色
}
}
type的图表类型：
- line：折线图、面积图，可用于直角坐标系和极坐标系。设置 areaStyle 后可以绘制面积图。
- bar：柱状图、条形图。
- pie：饼图，主要用于表现不同类目的数据在总和中的占比。也可以通过配置 roseType 显示成南丁格尔图。
- scatter：散点图、气泡图。可用于直角坐标系、极坐标希、地理坐标系。
- effectScatter：带有涟漪特效动画的散点图，利用动画特效可以将某些想要突出的数据进行视觉突出
- radar：雷达图，主要用于表现多变量的数据，例如属性分析。
- tree：数图、主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树和右子树
- treemap：是一种常见的表达层级数据、树状数据的可视化形式
- sunburst：旭日图，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。
- boxplot：箱型图、箱线图，是一种用作显示一组数据分散情况资料的统计图。能够显示出一组数据的最大值、最小值、中位数、下四分位数、上四分位数
- candlestick：K线图
- heatmap：热力图，主要通过颜色取表现数值的大小，必须配合visualMap组件使用
- map：地图
- parallel：平行坐标系的系列
- lines：路径图，用于带有起点和终点信息的线数据的绘制，主要用于航线、路线可视化
- graph：关系图，用于展现节点与节点之间的关系数据
- sankey：桑基图，是一种特殊的流图（可以看作是有向无环图）。 它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态。
- funnel：漏斗图
- gauge：仪表盘
- pictorialBar：象形柱图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。
- themeRiver：主题河流，是一种特殊的流图, 它主要用来表示事件或主题等在一段时间内的变化。
- custom：自定义系列，自定义系列可以自定义系列中的图形元素渲染，从而能扩展出不同的图表。
4851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
