Echart圖表 之 tooltip提示框組件配置項大全 : http://ww.qdxiaochuan.com/?id=572
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
}