Echarts如何自定義label標簽的樣式(formatter,rich,添加圖標等操作)
前言
最近公司項目中在使用 Echarts 繪制圖表時，由于默認的 label 標簽不能滿足設(shè)計稿需求，所以研究了對 label標簽進行格式化的方案，了解到可以使用 formatter 內(nèi)容格式器對標簽內(nèi)容進行調(diào)整， formatter 支持字符串模板和回調(diào)函數(shù)兩種形式，下面以餅圖為例對 formatter 格式化標簽 label標簽遇到的情況記錄如下
1、默認效果
1.1) 默認label 如下
1.2）默認樣式代碼如下
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、使用字符串模板進行格式化
2.1) 通過 formatter 進行文本的格式化，效果如下
2.2) 樣式代碼如下
這里使用字符串模板進行設(shè)置，其中模板變量有{a}, , {c}, tidrx1g，在不同圖表類型下代表含義分別為
折線圖、柱狀圖、K線圖：{a} (系列名稱)、(類目值)，{c}(數(shù)值)，s6h1s16（無）
散點圖（氣泡）圖 : {a}（系列名稱），（數(shù)據(jù)名稱），{c}（數(shù)值數(shù)組）, 0f166xx（無）
地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數(shù)值）, b1rnx6n（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數(shù)據(jù)項名稱），{c}（數(shù)值）, lwc6kjp（百分比）
series: [
{
name: "占比",
type: "pie",
radius: ["30%", "55%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: true,
formatter: "{d|edy6jes%} \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、使用富文本標簽樣式
此方法可參考官網(wǎng)api： https://echarts.apache.org/zh/option.html#series-pie.label.formatter
3.1）雖然 label 無法設(shè)置 html 文本，echarts 提供了豐富的文本標簽配置項進行樣式設(shè)置，效果圖如下：
3.2) 樣例代碼如下：
echarts 提供了豐富的文本標簽配置項，包括：
字體基本樣式設(shè)置：fontStyle、fontWeight、fontSize、fontFamily
文字顏色：color
文字描邊：textBorderColor、textBorderWidth
文字陰影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY
文本塊或文本片段大?。簂ineHeight、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|jea1d91%} ',
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ù)進行內(nèi)容格式化
4.1）通過回調(diào)函數(shù)方式可以對格式化內(nèi)容進行更自由的設(shè)置，比如下面樣例只有“直接訪問”這個區(qū)塊使用大標簽，其他都是用小標簽：
4.2) 樣式代碼如下：
label: {
normal: {
formatter: (params) => {
console.log(params);
//只有“直接訪問”使用大標簽，其他都使用小標簽
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', //標簽背景顏色
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標簽的樣式的文章就介紹到這了,更多相關(guān)Echarts自定義label標簽樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
設(shè)置checkbox為只讀(readOnly)的兩種方式
設(shè)置checkbox為只讀的方法有很多，在本文為大家詳細介紹下兩種比較實用的方法，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了js數(shù)組中如何隨機取出一個值,需要的朋友可以參考下2014-06-06
12個非常有創(chuàng)意的JavaScript小游戲
JavaScript 在Web開發(fā)過程中已經(jīng)是必不可少的重要分子，他推動著Web的交互性往越來越高的層次發(fā)展，現(xiàn)在的很多Web游戲也基于這類語言開發(fā)。2010-03-03
js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法
在本篇文章里小編給大家整理了關(guān)于js生成1到100的隨機數(shù)最簡單的實現(xiàn)方法，有需要的朋友們可以學(xué)習(xí)下。2020-02-02
JavaScript中關(guān)于for循環(huán)刪除數(shù)組元素內(nèi)容時出現(xiàn)的問題
昨天在用for循環(huán)進行數(shù)組去重的時候出現(xiàn)的問題小結(jié)，怎么解決這個問題呢，今天小編通過本文給大家講解下js循環(huán)刪除數(shù)組元素的方法，一起看看吧2016-11-11
這篇文章主要介紹了微信小程序點擊item使之滾動到屏幕中間位置,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
靜態(tài)的動態(tài)續(xù)篇之來點XML...2006-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)公告欄上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
在javascript前端開發(fā)階段經(jīng)常會遇到this，閉包，原型鏈知識，那么大家對這三種的基本知識理解嗎？今天小編就帶領(lǐng)大家一起學(xué)習(xí)this，閉包，原型鏈的知識，感興趣的朋友一起看看吧2016-09-09
從數(shù)據(jù)結(jié)構(gòu)的角度分析 for each in 比 for in 快的多
今天仔細琢磨了會，從數(shù)據(jù)結(jié)構(gòu)的角度分析了下，覺得for in和for each in效率上有著本質(zhì)的區(qū)別，無論是JS還是AS2013-07-07