Echart圖表 之 tooltip提示框組件配置項(xiàng)大全 : http://ww.qdxiaochuan.com/?id=572
axisPointer:坐標(biāo)軸指示器配置項(xiàng)
label:坐標(biāo)軸指示器的文本標(biāo)簽
lineStyle:axisPointer.type為line時(shí)有效
shadowStyle:axisPointer.type為shadow時(shí)有效
crossStyle:axisPointer.type為cross時(shí)有效。
textStyle:提示框浮層的文本樣式
其中也會(huì)含有很多屬性,具體使用請(qǐng)參考一下內(nèi)容
tooltip: {
show: true, //是否顯示提示框組件
trigger: 'item', //觸發(fā)類型,屬性值:item數(shù)據(jù)項(xiàng)觸發(fā)/axis坐標(biāo)軸觸發(fā)/none不觸發(fā)
axisPointer: {
type: 'line', //指示器類型,屬性值:line直線/shadow陰影/none/cross十字準(zhǔn)星
axis: 'auto', //指示器坐標(biāo)軸,屬性值:x/y/radius/angle
snap: true, //坐標(biāo)軸指示器是否自動(dòng)吸附到點(diǎn)上。默認(rèn)自動(dòng)判斷,布爾值
z: 0, //坐標(biāo)軸指示器z值,控制圖形的前后順序,屬性值:number
label: {
show: false, //是否顯示文本標(biāo)簽
precision: 'auto', //文本標(biāo)簽中數(shù)值小數(shù)點(diǎn)精度。默認(rèn)根據(jù)當(dāng)前軸的值自動(dòng)判斷
formatter: {}, //文本標(biāo)簽文字格式化器
margin: 3, //label距離軸的距離
color: '#fff', /顏色,文章鏈接如下 Echart圖表之顏色color配置項(xiàng)大全/
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實(shí)現(xiàn)虛線效果
textShadowColor: 'transparent', //文字本身陰影顏色
textShadowBlur: 0, //文字本身的陰影長度
textShadowOffsetX: 0, //文字本身的陰影 X 偏移
textShadowOffsetY: 0, //文字本身的陰影 Y 偏移
overflow: 'none', //文字超出寬度是否截?cái)嗷驌Q行,配置width時(shí)有效,truncate/break/breakAll
ellipsis: '', //在overflow配置為'truncate'的時(shí)候,可以通過該屬性配置末尾顯示的文本
padding: 0,
backgroundColor: 'auto', //背景顏色,默認(rèn)是和axis.axisLine.lineStyle.color 相同
borderColor: '', //文本標(biāo)簽的邊框顏色
borderWidth: 0, //文本標(biāo)簽的邊框?qū)挾? shadowBlur: 3, //圖形陰影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY設(shè)置陰影效果
shadowColor: #aaa, //陰影顏色,支持的格式同color
shadowOffsetX: 0, //陰影水平方向上的偏移距離
shadowOffsetY: 0 //陰影垂直方向上的偏移距離
},
lineStyle: {
color: #555, /顏色,文章鏈接如下 Echart圖表之顏色color配置項(xiàng)大全/
width: 1, //線寬
type: solid, //線的類型,屬性值:solid/dashed/dotted/number/array
dashOffset: 0, //虛線偏移量,搭配type指定dashed/array實(shí)現(xiàn)虛線效果
cap: 'butt', //線段末端的繪制,butt方形/round圓形/square也是方形效果與butt不同
join: 'bevel', //設(shè)置2個(gè)長度不為0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性,bevel默認(rèn)/round/miter
miterLimit: 10, //設(shè)置斜接面限制比例,只有當(dāng)join為miter才有效,屬性值:10默認(rèn)值/number
shadowBlur: 10, //陰影模糊大小,該屬性配合shadowColor/shadowOffsetX/shadowOffsetY一起設(shè)置圖形的陰影效果
shadowColor: '', //陰影顏色,支持的格式同color
shadowOffsetX: 0, //陰影水平方向上的偏移距離
shadowOffsetY: 0, //陰影垂直方向上的偏移距離
opacity: 1 //圖形透明度。支持從 0 到 1 的數(shù)字,為 0 時(shí)不繪制該圖形
},
shadowStyle: {
color: '#fff', /顏色,文章鏈接如下 Echart圖表之顏色color配置項(xiàng)大全/
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
crossStyle: {
color: '#fff', /顏色,文章鏈接如下 Echart圖表之顏色color配置項(xiàng)大全/
shadowBlur: 10,
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
},
animation: line, //是否開啟動(dòng)畫
animationThreshold: 2000, //是否開啟動(dòng)畫的閾值
animationDuration: 1000, //初始動(dòng)畫的時(shí)長,支持回調(diào)函數(shù)
animationEasing: 'cubicOut', //初始動(dòng)畫的緩動(dòng)效果
animationDelay: 0, //初始動(dòng)畫的延遲,支持回調(diào)函數(shù)
animationDurationUpdate: 200, //數(shù)據(jù)更新動(dòng)畫的時(shí)長,支持回調(diào)函數(shù)
animationEasingUpdate: exponentialOut, //數(shù)據(jù)更新動(dòng)畫的緩動(dòng)效果
},
showContent: true, //是否顯示提示框浮層,默認(rèn)顯示
alwaysShowContent: false, //是否永遠(yuǎn)顯示提示框內(nèi)容
triggerOn: 'mousemove|click', //提示框觸發(fā)條件,mousemove/click/mousemove|click/none。none時(shí)可通過action.tooltip.showTip和action.tooltip.hideTip來手動(dòng)觸發(fā)和隱藏。也可通過axisPointer.handle來觸發(fā)或隱藏
showDelay: 0, //浮層顯示的延遲,默認(rèn)0ms
hideDelay: 100, //浮層隱藏的延遲
enterable: false, //鼠標(biāo)是否可進(jìn)入提示框浮層中,默認(rèn)為false
renderMode: 'html', //浮層的渲染模式,html默認(rèn)/richText富文本形式
confine: false, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
appendToBody: false, //是否將組件DOM節(jié)點(diǎn)添加為HTML的<body>子節(jié)點(diǎn)。只有當(dāng)renderMode為html有意義
className: 'echarts-tooltip echarts-tooltip-dark', //指定tooltip的DOM節(jié)點(diǎn)CSS類,只在html模式下生效
transitionDuration: 0.4, //提示框浮層的移動(dòng)動(dòng)畫過渡時(shí)間,單位是s
position: [], //提示框浮層的位置
formatter: ()=>{}, /提示框浮層內(nèi)容格式器,用這個(gè)可以修改提示框默認(rèn)內(nèi)容/
valueFormatter: (value: number | string) => string, //數(shù)值顯示部分的格式化回調(diào)函數(shù)
backgroundColor: '', //背景顏色,格式同color
borderColor: '', //提示框浮層邊框顏色,格式同color
borderWidth: 0, //提示框浮層的邊框?qū)? padding: 5,
textStyle: {
color: '#fff', /顏色,文章鏈接如下 Echart圖表之顏色color配置項(xiàng)大全/
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實(shí)現(xiàn)靈活的虛線效果
textShadowColor: 'transparent', //文字本身陰影顏色
textShadowBlur: 0, //文字本身陰影長度
textShadowOffsetX: 0, //文字本身陰影 X 偏移
textShadowOffsetY: 0, //文字本身陰影 Y 偏移
overflow: 'none', //文字超出寬度是否截?cái)嗷蛘邠Q行,配置width時(shí)有效,屬性值:truncate/break/breakAll
ellipsis: '', //在overflow配置為'truncate'的時(shí),該屬性配置末尾顯示文本
rich: {}, //自定義富文本樣式
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', //額外附加到浮層的 css 樣式
order: 'seriesAsc' //多系列提示框浮層排列順序,seriesAsc默認(rèn)/seriesDesc/valueAsc/valueDesc
}