前端echarts tooltip展示多項(xiàng)自定義數(shù)據(jù)代碼示例
效果如圖
鼠標(biāo)滑動(dòng)到某一個(gè)柱子的時(shí)候,出現(xiàn)這一項(xiàng)數(shù)據(jù)的多個(gè)自定義數(shù)據(jù),外加自己的模板樣式渲染。

希望能展示每一列中的多個(gè)自定義數(shù)據(jù)
代碼部分
主要是在data中,value就是實(shí)際展示的主數(shù)據(jù),其他字段名為自定義的數(shù)據(jù)。
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function(params) {
// params 是一個(gè)數(shù)組,包含了每個(gè)數(shù)據(jù)項(xiàng)的信息
var result = `<div style="width: 402px;font-family: PingFang SC, PingFang SC-Regular;backdrop-filter: blur(20px);">
<div class="top" style="margin-top:14px;margin-left:20px">
<div class="tl" style="width: 50px;font-size: 18px;margin-bottom: 4px;margin-right: 200px;">里程:${params[0].data.b}(km)</div>
<div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.a}(km/h)</div>
<div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">速度:${params[0].data.value}(km/h)</div>
</div>
</div>`;
return result;
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
],
series: [
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
{value:44, a:2, b:3},{value:33, a:2, b:3},{value:22, a:2, b:3},{value:66, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3},{value:23, a:2, b:3}
],
},
]
};總結(jié)
到此這篇關(guān)于前端echarts tooltip展示多項(xiàng)自定義數(shù)據(jù)的文章就介紹到這了,更多相關(guān)echarts tooltip多項(xiàng)自定義數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
這篇文章主要介紹了詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
JS中new?Blob()詳解及blob轉(zhuǎn)file示例
這篇文章主要給大家介紹了關(guān)于JS中new?Blob()詳解及blob轉(zhuǎn)file的相關(guān)資料,Blob?Blob(Binary?Large?Object)表示二進(jìn)制類型的大對(duì)象,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
JavaScript實(shí)現(xiàn)圖像壓縮的方法
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上,然后使用 toDataURL() 方法將圖像轉(zhuǎn)換為 Data URL 形式,這篇文章主要介紹了JavaScript 圖像壓縮的相關(guān)資料,需要的朋友可以參考下2023-01-01
js分解url參數(shù)(面向?qū)ο?極簡(jiǎn)主義法應(yīng)用)
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡(jiǎn)主義法)和一個(gè)分解url參數(shù)面試題,我作了一下修改,記錄下來2012-08-08
微信小程序轉(zhuǎn)盤抽獎(jiǎng)的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了微信小程序轉(zhuǎn)盤抽獎(jiǎng)的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07

