echarts之tooltip 提示框組件配置


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
}
},


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM