tooltip:提示框組件,用於配置鼠標滑過或點擊圖表時的顯示框。
tooltip: {
show: true, // 是否顯示
trigger: 'axis', // 觸發類型 'item'圖形觸發:散點圖,餅圖等無類目軸的圖表中使用; 'axis'座標軸觸發;'none':什麼都不觸發。
axisPointer: { // 座標軸指示器配置項。
type: 'shadow', // 'line' 直線指示器 'shadow' 陰影指示器 'none' 無指示器 'cross' 十字準星指示器。
axis: 'auto', // 指示器的座標軸。
snap: true, // 座標軸指示器是否自動吸附到點上
},
// showContent: true, //是否顯示提示框浮層,默認顯示。
// triggerOn: 'mouseover', // 觸發時機 'mouseover'鼠標移動時觸發。 'click'鼠標點擊時觸發。 'mousemove|click'同時鼠標移動和點擊時觸發。
// enterable: false, // 鼠標是否可進入提示框浮層中,默認爲false,如需詳情內交互,如添加連接,按鈕,可設置爲 true。
renderMode: 'html', // 浮層的渲染模式,默認以 'html 即額外的 DOM 節點展現 tooltip;
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮層的背景顏色。
borderColor: '#333', // 提示框浮層的邊框顏色。
borderWidth: 0, // 提示框浮層的邊框寬。
padding: 5, // 提示框浮層內邊距,
textStyle: { // 提示框浮層的文本樣式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 14,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 額外附加到浮層的 css 樣式
confine: false, // 是否將 tooltip 框限制在圖表的區域內。
// formatter: '{b} 的成績是 {c}'
formatter: function(arg) {
return arg[0].name + '的分數是:' + arg[0].data
}
},css