Echart圖表 之 tooltip提示框組件配置項大全 : http://ww.qdxiaochuan.com/?id=572
axisPointer:坐標軸指示器配置項
label:坐標軸指示器的文本標簽
lineStyle:axisPointer.type為line時有效
shadowStyle:axisPointer.type為shadow時有效
crossStyle:axisPointer.type為cross時有效。
textStyle:提示框浮層的文本樣式
其中也會含有很多屬性,具體使用請參考一下內(nèi)容
tooltip: {
show: true, //是否顯示提示框組件
trigger: 'item', //觸發(fā)類型,屬性值:item數(shù)據(jù)項觸發(fā)/axis坐標軸觸發(fā)/none不觸發(fā)
axisPointer: {
type: 'line', //指示器類型,屬性值:line直線/shadow陰影/none/cross十字準星
axis: 'auto', //指示器坐標軸,屬性值:x/y/radius/angle
snap: true, //坐標軸指示器是否自動吸附到點上。默認自動判斷,布爾值
z: 0, //坐標軸指示器z值,控制圖形的前后順序,屬性值:number
label: {
show: false, //是否顯示文本標簽
precision: 'auto', //文本標簽中數(shù)值小數(shù)點精度。默認根據(jù)當(dāng)前軸的值自動判斷
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實現(xiàn)虛線效果
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, //文本標簽的邊框?qū)挾? shadowBlur: 3, //圖形陰影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY設(shè)置陰影效果
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實現(xiàn)虛線效果
cap: 'butt', //線段末端的繪制,butt方形/round圓形/square也是方形效果與butt不同
join: 'bevel', //設(shè)置2個長度不為0的相連部分(線段,圓弧,曲線)如何連接在一起的屬性,bevel默認/round/miter
miterLimit: 10, //設(shè)置斜接面限制比例,只有當(dāng)join為miter才有效,屬性值:10默認值/number
shadowBlur: 10, //陰影模糊大小,該屬性配合shadowColor/shadowOffsetX/shadowOffsetY一起設(shè)置圖形的陰影效果
shadowColor: '', //陰影顏色,支持的格式同color
shadowOffsetX: 0, //陰影水平方向上的偏移距離
shadowOffsetY: 0, //陰影垂直方向上的偏移距離
opacity: 1 //圖形透明度。支持從 0 到 1 的數(shù)字,為 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, //初始動畫的時長,支持回調(diào)函數(shù)
animationEasing: 'cubicOut', //初始動畫的緩動效果
animationDelay: 0, //初始動畫的延遲,支持回調(diào)函數(shù)
animationDurationUpdate: 200, //數(shù)據(jù)更新動畫的時長,支持回調(diào)函數(shù)
animationEasingUpdate: exponentialOut, //數(shù)據(jù)更新動畫的緩動效果
},
showContent: true, //是否顯示提示框浮層,默認顯示
alwaysShowContent: false, //是否永遠顯示提示框內(nèi)容
triggerOn: 'mousemove|click', //提示框觸發(fā)條件,mousemove/click/mousemove|click/none。none時可通過action.tooltip.showTip和action.tooltip.hideTip來手動觸發(fā)和隱藏。也可通過axisPointer.handle來觸發(fā)或隱藏
showDelay: 0, //浮層顯示的延遲,默認0ms
hideDelay: 100, //浮層隱藏的延遲
enterable: false, //鼠標是否可進入提示框浮層中,默認為false
renderMode: 'html', //浮層的渲染模式,html默認/richText富文本形式
confine: false, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
appendToBody: false, //是否將組件DOM節(jié)點添加為HTML的<body>子節(jié)點。只有當(dāng)renderMode為html有意義
className: 'echarts-tooltip echarts-tooltip-dark', //指定tooltip的DOM節(jié)點CSS類,只在html模式下生效
transitionDuration: 0.4, //提示框浮層的移動動畫過渡時間,單位是s
position: [], //提示框浮層的位置
formatter: ()=>{}, /提示框浮層內(nèi)容格式器,用這個可以修改提示框默認內(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配置項大全/
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實現(xiàn)靈活的虛線效果
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
}