新聞中心
ECharts 中提示框組件可以在多種地方使用,如:

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,沭陽企業(yè)網(wǎng)站建設,沭陽品牌網(wǎng)站建設,網(wǎng)站定制,沭陽網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,沭陽網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
- 可以設置在全局,即 tooltip
- 可以設置在坐標系中,即 grid.tooltip、polar.tooltip、single.tooltip
- 可以設置在系列中,即 series.tooltip
- 可以設置在系列的每個數(shù)據(jù)項中,即 series.data.tooltip
singleAxis.tooltip | *
用于設置 ECharts 單軸的特定的 tooltip 設置。
singleAxis.tooltip.show | boolean
[ default: true ]
是否顯示提示框組件,包括提示框浮層和 axisPointer。
singleAxis.tooltip.trigger | string
[ default: 'item' ]
觸發(fā)類型。
可選:
- 'item'數(shù)據(jù)項圖形觸發(fā),主要在散點圖,餅圖等無類目軸的圖表中使用。
- 'axis'坐標軸觸發(fā),主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。在 ECharts 2.x 中只支持類目軸上使用 axis trigger,在 ECharts 3 中支持在直角坐標系和極坐標系上的所有類型的軸。并且可以通過 axisPointer.axis 指定坐標軸。
- 'none'什么都不觸發(fā)。
singleAxis.tooltip.position | string, Array, Function
提示框浮層的位置,默認不設置時位置會跟隨鼠標的位置。
可選:
- Array
通過數(shù)組表示提示框浮層的位置,支持數(shù)字設置絕對位置,百分比設置相對位置。
示例:// 絕對位置,相對于容器左側(cè) 10px, 上側(cè) 10 px position: [10, 10] // 相對位置,放置在容器正中間 position: ['50%', '50%'] - Function
回調(diào)函數(shù),格式如下:(point: Array, params: Object|Array.參數(shù):
point: 鼠標位置,如 [20, 40]。
params: 同 formatter 的參數(shù)相同。
dom: tooltip 的 dom 對象。
rect: 只有鼠標在圖形上時有效,是一個用x, y, width, height四個屬性表達的圖形包圍盒。
size: 包括 dom 的尺寸和 echarts 容器的當前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。
返回值:可以是一個表示 tooltip 位置的數(shù)組,數(shù)組值可以是絕對的像素值,也可以是相 百分比。
也可以是一個對象,如:{left: 10, top: 30},或者 {right: '20%', bottom: 40}。
如下示例:position: function (point, params, dom, rect, size) { // 固定在頂部 return [point[0], '10%']; }或者:
position: function (pos, params, dom, rect, size) { // 鼠標在左側(cè)時 tooltip 顯示到右側(cè),鼠標在右側(cè)時 tooltip 顯示到左側(cè)。 var obj = {top: 60}; obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5; return obj; }
- 'inside'
鼠標所在圖形的內(nèi)部中心位置,只在 trigger 為'item'的時候有效。 - 'top'
鼠標所在圖形上側(cè),只在 trigger 為'item'的時候有效。 - 'left'
鼠標所在圖形左側(cè),只在 trigger 為'item'的時候有效。 - 'right'
鼠標所在圖形右側(cè),只在 trigger 為'item'的時候有效。 - 'bottom'
鼠標所在圖形底側(cè),只在 trigger 為'item'的時候有效。
singleAxis.tooltip.formatter | string, Function
提示框浮層內(nèi)容格式器,支持字符串模板和回調(diào)函數(shù)兩種形式。
- 字符串模板
模板變量有 {a}, ,{c},vbb75nf,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 'axis' 的時候,會有多個系列的數(shù)據(jù),此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},vbb75nf 含義不一樣。 其中變量{a}, , {c}, vbb75nf在不同圖表類型下代表數(shù)據(jù)含義為:
- 折線(區(qū)域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),(類目值),{c}(數(shù)值), vbb75nf(無)
- 散點圖(氣泡)圖 : {a}(系列名稱),(數(shù)據(jù)名稱),{c}(數(shù)值數(shù)組), vbb75nf(無)
- 地圖 : {a}(系列名稱),(區(qū)域名稱),{c}(合并數(shù)值), vbb75nf(無)
- 餅圖、儀表盤、漏斗圖: {a}(系列名稱),(數(shù)據(jù)項名稱),{c}(數(shù)值), vbb75nf(百分比)
更多其它圖表模板變量的含義可以見相應的圖表的 label.normal.formatter 配置項。
示例:
formatter: '{b0}: {c0}
{b1}: {c1}' - 回調(diào)函數(shù)
回調(diào)函數(shù)格式:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string第一個參數(shù) params 是 formatter 需要的數(shù)據(jù)集。格式如下:
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
// 餅圖的百分比
percent: number,
//
galleryViewPath: ,
//
galleryEditorPath: ,
//
imagePath: ,
//
gl: ,
}在 trigger 為 'axis' 的時候,或者 tooltip 被 axisPointer 觸發(fā)的時候,params 是多個系列的數(shù)據(jù)數(shù)組。其中每項內(nèi)容格式同上,并且,
{
componentType: 'series',
// 系列類型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱
seriesName: string,
// 數(shù)據(jù)名,類目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
}
注: ECharts 2.x 使用數(shù)組表示各參數(shù)的方式不再支持。第二個參數(shù) ticket 是異步回調(diào)標識,配合第三個參數(shù) callback 使用。 第三個參數(shù) callback 是異步回調(diào),在提示框浮層內(nèi)容是異步獲取的時候,可以通過 callback 傳入上述的 ticket 和 html 更新提示框浮層內(nèi)容。
示例:
formatter: function (params, ticket, callback) {
$.get('detail?name=' + params.name, function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}
singleAxis.tooltip.backgroundColor | Color
[ default: 'rgba(50,50,50,0.7)' ]
提示框浮層的背景顏色。
singleAxis.tooltip.borderColor | Color
[ default: '#333' ]
提示框浮層的邊框顏色。
singleAxis.tooltip.borderWidth | number
[ default: 0 ]
提示框浮層的邊框?qū)挕?/p>
singleAxis.tooltip.padding | number
[ default: 5 ]
提示框浮層內(nèi)邊距,單位px,默認各方向內(nèi)邊距為5,接受數(shù)組分別設定上右下左邊距。
使用示例:
// 設置內(nèi)邊距為 5
padding: 5
// 設置上下的內(nèi)邊距為 5,左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設置四個方向的內(nèi)邊距
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
]
singleAxis.tooltip.extraCssText | string
額外附加到浮層的 css 樣式。如下為浮層添加陰影的示例:
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' 新聞名稱:創(chuàng)新互聯(lián)ECharts教程:ECharts單軸中tooltip如何設置
標題網(wǎng)址:http://fisionsoft.com.cn/article/cogicoi.html


咨詢
建站咨詢
