Echarts如何自定義label標(biāo)簽的樣式(formatter,rich,添加圖標(biāo)等操作)
前言
最近公司項(xiàng)目中在使用 Echarts 繪制圖表時，由于默認(rèn)的 label 標(biāo)簽不能滿足設(shè)計(jì)稿需求，所以研究了對 label標(biāo)簽進(jìn)行格式化的方案，了解到可以使用 formatter 內(nèi)容格式器對標(biāo)簽內(nèi)容進(jìn)行調(diào)整， formatter 支持字符串模板和回調(diào)函數(shù)兩種形式，下面以餅圖為例對 formatter 格式化標(biāo)簽 label標(biāo)簽遇到的情況記錄如下
1、默認(rèn)效果
1.1) 默認(rèn)label 如下
1.2）默認(rèn)樣式代碼如下
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
2、使用字符串模板進(jìn)行格式化
2.1) 通過 formatter 進(jìn)行文本的格式化，效果如下
2.2) 樣式代碼如下
這里使用字符串模板進(jìn)行設(shè)置，其中模板變量有{a}, , {c}, ublnpf9mb，在不同圖表類型下代表含義分別為
折線圖、柱狀圖、K線圖：{a} (系列名稱)、(類目值)，{c}(數(shù)值)，ublnpf9mb（無）
散點(diǎn)圖（氣泡）圖 : {a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）, ublnpf9mb（無）
地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）, ublnpf9mb（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, ublnpf9mb（百分比）
series: [
{
name: "占比",
type: "pie",
radius: ["30%", "55%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: true,
formatter: "{d|ublnpf9mb%} \n {b|}",
rich: {
d: {
color: '#fff',
fontSize: 16,
lineHeight: 24,
height: 24
},
b: {
color: "#D3EBFF",
fontSize: 14,
lineHeight: 20,
align: 'left',
}
},
textStyle: {
color: "#fff",
align: "right",
fontSize: 14,
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
data: this.seriesData,
},
],
};
3、使用富文本標(biāo)簽樣式
此方法可參考官網(wǎng)api： https://echarts.apache.org/zh/option.html#series-pie.label.formatter
3.1）雖然 label 無法設(shè)置 html 文本，echarts 提供了豐富的文本標(biāo)簽配置項(xiàng)進(jìn)行樣式設(shè)置，效果圖如下：
3.2) 樣例代碼如下：
echarts 提供了豐富的文本標(biāo)簽配置項(xiàng)，包括：
字體基本樣式設(shè)置：fontStyle、fontWeight、fontSize、fontFamily
文字顏色：color
文字描邊：textBorderColor、textBorderWidth
文字陰影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
文本塊或文本片段大小：lineHeight、width、height、padding
文本塊或文本片段的對齊：align、verticalAlign
文本塊或文本片段的邊框、背景（顏色或圖片）：backgroundColor、borderColor、borderWidth、borderRadius
文本塊或文本片段的陰影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY
文本塊的位置和旋轉(zhuǎn)：position、distance、rotate
label: {
formatter: '{a|{a}}\n{hr|}\n {b|：}{c} {per|ublnpf9mb%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
4、使用回調(diào)函數(shù)進(jìn)行內(nèi)容格式化
4.1）通過回調(diào)函數(shù)方式可以對格式化內(nèi)容進(jìn)行更自由的設(shè)置，比如下面樣例只有“直接訪問”這個區(qū)塊使用大標(biāo)簽，其他都是用小標(biāo)簽：
4.2) 樣式代碼如下：
label: {
normal: {
formatter: (params) => {
console.log(params);
//只有“直接訪問”使用大標(biāo)簽，其他都使用小標(biāo)簽
if(params.data.name == '直接訪問') {
return '{title|' + params.seriesName +'}{abg|}\n{bTitle|來源：}{bValue|'
+ params.data.name + '}\n{hr|}\n{leftGap|}{cIcon|}{cValue|'
+ params.data.value + '}\n{leftGap|}{dIcon|}{cValue|'
+ params.percent + '%}';
} else {
return '{bTitle|來源：}{bValue|' + params.data.name + '}';
}
},
backgroundColor: '#eee', //標(biāo)簽背景顏色
borderColor: '#777', //外層邊框顏色
borderWidth: 1, //外層邊框?qū)挾?
borderRadius: 4, //外層邊框圓角
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
bTitle: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'left'
},
bValue: {
color: '#333',
height: 24,
padding: [0, 5, 0, 5],
align: 'right'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
leftGap: {
width:5,
align: 'left',
},
cIcon: {
height: 15,
align: 'left',
margin: [0, 5, 0, 5],
backgroundColor: {
image: '/static/countIcon.png'
}
},
cValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
dIcon: {
height: 15,
align: 'left',
backgroundColor: {
image: '/static/percentIcon.png'
}
},
dValue: {
height: 25,
padding: [0, 10, 0, 30],
align: 'right'
},
}
}
總結(jié)
到此這篇關(guān)于Echarts如何自定義label標(biāo)簽的樣式的文章就介紹到這了,更多相關(guān)Echarts自定義label標(biāo)簽樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)
本篇文章主要是對JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JavaScript 語言在 ES6 規(guī)范中引入了 Symbol 類型,它是一種原始數(shù)據(jù)類型,用于創(chuàng)建唯一的標(biāo)識符,本文將介紹 Symbol 類型的所有靜態(tài)屬性,并舉例說明它們的用途和使用場景,希望對大家有所幫助2023-12-12
這篇文章主要為大家詳細(xì)介紹了用純JS實(shí)現(xiàn)二級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例
這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01
本篇文章主要介紹了微信小程序模擬 cookie的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
操作元素定位元素，大家會想到使用js來實(shí)現(xiàn)，下面有個不錯的示例，大家可以看看2014-10-10
Three.js是通過對WebGL接口的封裝與簡化而形成的一個易用的圖形庫,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序和h5如何使用three.js的相關(guān)資料,需要的朋友可以參考下2022-12-12
javascript 關(guān)于賦值、淺拷貝、深拷貝的個人理解
關(guān)于賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學(xué)習(xí)這個東西的同學(xué)2019-11-11
在線編碼查詢工具,編碼查詢,HTML編碼2010-10-10
下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08