修改tooltip默認(rèn)樣式
在可視化開發(fā)中我們通常會遇到修改tooltip樣式問題，下面分享給大家代碼片段和最終呈現(xiàn)效果
tooltip: {
//鼠標(biāo)懸浮框的提示文字
trigger: "axis",
axisPointer: {
// 坐標(biāo)軸指示器配置項。
type: "none", // 'line' 直線指示器 'shadow' 陰影指示器 'none' 無指示器 'cross' 十字準(zhǔn)星指示器。
axis: "auto", // 指示器的坐標(biāo)軸。
snap: true, // 坐標(biāo)軸指示器是否自動吸附到點上
},
borderColor: "#5cdbd3",//設(shè)置自定義邊框顏色
borderWidth: 1,//設(shè)置自定義邊框?qū)挾?/span>
backgroundColor: "rgba(0, 44, 140, 0.50)",//設(shè)置自定義背景
confine: true,//是否將tooltip框限制在圖表的區(qū)域內(nèi)，默認(rèn)為false
extraCssText:
//額外附加到浮層的css樣式，此處為為浮層添加陰影及padding
"box-shadow: 0 0 5px rgba(181, 245, 236, 0.5);padding:5px 15px",
formatter: function (param) {
let domName = `<span style="color: #e6f4ff;">${param[0].name}</span>`;
let domValue = `<span style="color: #5cdbd3;">${param[0].value} 個</span>`;
return domName + "<br>" + domValue;
},//格式化懸浮框文字格式
},
文章來源：http://www.zghlxwxcb.cn/news/detail-407626.html
配置項
- trigger 觸發(fā)類型
- axis：坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
- item：數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。
- none：什么都不觸發(fā)
- axisPointer 坐標(biāo)軸指示器配置項
- type：指示器類型
- line 直線指示器
- shadow 陰影指示器
- none 無指示器
- cross 十字準(zhǔn)星指示器
- axis： 指示器的坐標(biāo)軸。
- snap：對于數(shù)值軸、時間軸，如果開啟了 snap，則 axisPointer 會自動吸附到最近的點上。
- type：指示器類型
- triggerOn:：觸發(fā)時機
- mouseover鼠標(biāo)移動時觸發(fā)
- click鼠標(biāo)點擊時觸發(fā)
- mousemove|click 同時鼠標(biāo)移動和點擊時觸發(fā)。
- textStyle：設(shè)置文本樣式
- color
- fontStyle
- fontWeight
- fontSize
- …
修改tooltip樣式在可視化開發(fā)中十分常見，希望這篇筆記能分享給大家一些經(jīng)驗哦~文章來源地址http://www.zghlxwxcb.cn/news/detail-407626.html
到了這里，關(guān)于【可視化開發(fā)】echarts配置項——修改tooltip默認(rèn)樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
