ECharts 提示框（tooltip）

tooltip: { show: true, // 是否顯示提示框組件 trigger: 'axis', // 觸發類型（'item'，數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用；'axis'，座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用；'none'，不觸發。） axisPointer: { type: 'cross', // 指示器類型（'line' 直線指示器；'shadow' 陰影指示器；'none' 無指示器；'cross' 十字準星指示器。） snap: false, // 座標軸指示器是否自動吸附到點上。默認自動判斷。 label: { margin: 10, // label 距離軸的距離 color: '#FFF', // 文字的顏色 fontStyle: 'normal', // 文字字體的風格（'normal'，無樣式；'italic'，斜體；'oblique'，傾斜字體） fontWeight: 'normal', // 文字字體的粗細（'normal'，無樣式；'bold'，加粗；'bolder'，加粗的基礎上再加粗；'lighter'，變細；數字定義粗細也可以，取值範圍100至700） fontSize: '20', // 文字字體大小 lineHeight: '50', // 行高 padding = [5, 7, 5, 7], // 內邊距，單位px backgroundColor = 'auto', // 文本標籤的背景顏色 }, animation: true, // 是否開啓動畫 animationDuration: 1000, // 初始動畫時長 animationDurationUpdate: 200, // 數據更新動畫的時長 } showContent: true, // 是否顯示提示框浮層，默認顯示 alwaysShowContent: true, // 是否永遠顯示提示框內容，默認情況下在移出可觸發提示框區域後一定時間後隱藏 triggerOn: 'mousemove|click', // 提示框觸發的條件（'mousemove'，鼠標移動時觸發；'click'，鼠標點擊時觸發；'mousemove|click'，同時鼠標移動和點擊時觸發；'none'，不在 'mousemove' 或 'click' 時觸發） confine: true, // 是否將 tooltip 框限制在圖表的區域內 backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮層的背景顏色 padding: 5, // 提示框浮層內邊距，單位px textStyle: { color: '#FFF', // 文字的顏色 fontStyle: 'normal', // 文字字體的風格（'normal'，無樣式；'italic'，斜體；'oblique'，傾斜字體） fontWeight: 'normal', // 文字字體的粗細（'normal'，無樣式；'bold'，加粗；'bolder'，加粗的基礎上再加粗；'lighter'，變細；數字定義粗細也可以，取值範圍100至700） fontSize: '20', // 文字字體大小 lineHeight: '50', // 行高 }, formatter: function (params) { var result = '' var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;</span>' // 定義第一個數據前的圓點顏色 var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;</span>' // 定義第二個數據前的圓點顏色 result += params[0].axisValue + "</br>" + dotHtml + ' 數據名稱 ' + params[0].data + "</br>" + dotHtml2 + ' 數據名稱 ' + params[1].data; return result } }