Echarts如何自定義label標簽的樣式(formatter,rich,添加圖標等操作)
前言
最近公司項目中在使用 Echarts 繪制圖表時，由于默認的 label 標簽不能滿足設計稿需求，所以研究了對 label標簽進行格式化的方案，了解到可以使用 formatter 內容格式器對標簽內容進行調整， formatter 支持字符串模板和回調函數兩種形式，下面以餅圖為例對 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) 樣式代碼如下
這里使用字符串模板進行設置，其中模板變量有{a}, , {c}, vvxyksv9kd，在不同圖表類型下代表含義分別為
折線圖、柱狀圖、K線圖：{a} (系列名稱)、(類目值)，{c}(數值)，vvxyksv9kd（無）
散點圖（氣泡）圖 : {a}（系列名稱），（數據名稱），{c}（數值數組）, vvxyksv9kd（無）
地圖 : {a}（系列名稱），（區(qū)域名稱），{c}（合并數值）, vvxyksv9kd（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），（數據項名稱），{c}（數值）, vvxyksv9kd（百分比）
series: [
{
name: "占比",
type: "pie",
radius: ["30%", "55%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
label: {
show: true,
formatter: "{d|vvxyksv9kd%} \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、使用富文本標簽樣式
此方法可參考官網api： https://echarts.apache.org/zh/option.html#series-pie.label.formatter
3.1）雖然 label 無法設置 html 文本，echarts 提供了豐富的文本標簽配置項進行樣式設置，效果圖如下：
3.2) 樣例代碼如下：
echarts 提供了豐富的文本標簽配置項，包括：
字體基本樣式設置：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
文本塊的位置和旋轉：position、distance、rotate
label: {
formatter: '{a|{a}}\n{hr|}\n {b|：}{c} {per|vvxyksv9kd%} ',
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、使用回調函數進行內容格式化
4.1）通過回調函數方式可以對格式化內容進行更自由的設置，比如下面樣例只有“直接訪問”這個區(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, //外層邊框寬度
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'
},
}
}
總結
到此這篇關于Echarts如何自定義label標簽的樣式的文章就介紹到這了,更多相關Echarts自定義label標簽樣式內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要是對JS將數字轉換成三位逗號分隔的樣式(示例代碼)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JavaScript 語言在 ES6 規(guī)范中引入了 Symbol 類型,它是一種原始數據類型,用于創(chuàng)建唯一的標識符,本文將介紹 Symbol 類型的所有靜態(tài)屬性,并舉例說明它們的用途和使用場景,希望對大家有所幫助2023-12-12
這篇文章主要為大家詳細介紹了用純JS實現二級菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
contenteditable可編輯區(qū)域設置換行實現技巧實例
這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設置換行實現技巧實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-01-01
本篇文章主要介紹了微信小程序模擬 cookie的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
操作元素定位元素，大家會想到使用js來實現，下面有個不錯的示例，大家可以看看2014-10-10
Three.js是通過對WebGL接口的封裝與簡化而形成的一個易用的圖形庫,下面這篇文章主要給大家介紹了關于uniapp小程序和h5如何使用three.js的相關資料,需要的朋友可以參考下2022-12-12
關于賦值、淺拷貝、深拷貝，以前也思考良久，很多時候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學2019-11-11
在線編碼查詢工具,編碼查詢,HTML編碼2010-10-10
下面小編就為大家?guī)硪黄鷍s獲取left值和top值的三種方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08