echarts label加边框_玩转ECharts之实现“动态颜色的Label”
前言
玩轉ECharts系列，主要為大家講解我們基于ECharts如何實現企業級大屏項目中較為常用的各種奇奇怪怪的圖表，接下來我們將通過幾篇文章從基礎圖表開始為大家詳細講解實現這些圖表樣式的一些“小心機”。
導讀閱讀完此文，你會了解基于ECharts：
1、如何實現在Label上顯示數據項的值
2、如何實現動態顏色的Label
3、如何實現自定義的Label裝飾
4、如何實現餅圖Label標簽的左右對稱
背景
觀察以上默認餅圖我們會發現：通常默認的Label顏色是跟隨數據項的，且僅顯示數據項的名稱。這時會帶來一些問題：讀者只能獲取大致比例，無法獲取精確的數據。
增加數據顯示后數據值和名稱顏色無區分，讀者獲取數據不夠快速，不夠精確。
為了解決這些問題，我們提供一些解決方案：在顯示數據項目名稱的同時顯示具體的百分比。
為了快速區分數據項目名稱和百分比，給數據項名稱和百分比賦予不同顏色。
可以增加一些裝飾性的元素去標注具體的名稱或百分比(由于有些場景是僅顯示數據項名稱、有些場景是同時顯示數據項名稱和百分比，所以這里我們采用的是標注數據項名稱)。
接下來我們來嘗試一步一步實現我們的解決方案，看他到底是否有效。如圖所示，采用新的方案優化了常用的餅圖，為了快速獲取餅圖各項數值，我們分別顯示了數據名稱和百分比并用不同的顏色區分、增加裝飾性邊框來標注數據項名稱增加區分度。注意：為了突label本文中示例圖片特意相對縮小了餅圖的半徑，實際業務中如非必要請勿如此。
知識點
在rich里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果。
formatter是一個字符串，可以定義label的整體結構并且支持字符串模板。rich為一個對象，定義具體的元素樣式。
字符串模板
字符串模板 模板變量有：{a}：系列名。
{b}：數據名。
{c}：數據值。
ozvdkddzhkzd：百分比。
{@xxx}：數據中名為'xxx'的維度的值，如{@product}表示名為'product'的維度的值。
{@[n]}：數據中維度n的值，如{@[3]}` 表示維度 3 的值，從 0 開始計數。
我們來看一個案例：這是一個完整的echarts option配置項，其中要實現解決方案中的效果，核心代碼為label部分。為了節省篇幅，下文中如未特殊說明，將僅提供核心代碼。
option = {
backgroundColor: '#000',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} (ozvdkddzhkzd%)'
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
color: ["#1576d2", "#d14a82", "#26c1f2", "#a166ff", "#1271cc", "#272f67", "rgba(156, 43, 182, 1)"],
data: [
{value: 80, name: '華為'},
{value: 98, name: '蘋果'},
{value: 10, name: '三星'},
{value: 80, name: '小米'},
{value: 35, name: '其他'}
].sort(function (a, b) { return a.value - b.value; }),
label: {
// 這里定義了文本 百分比 是'value'樣式的 formatter: '{b}: {value|ozvdkddzhkzd}',
rich: {
// 這個'value'樣式表示文字顏色為白色 value: {
color: '#fff',
}
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
}
]
};
核心代碼
label: {
// 這里定義了文本 百分比 是'value'樣式的
formatter: '{b}: {value|ozvdkddzhkzd}',
rich: {
// 這個'value'樣式表示文字顏色為白色
value: {
color: '#fff',
}
}
}
說明
利用formatter定義了同時顯示名稱和百分比、利用rich定義了百分比的顯示顏色為白色。
效果
實現顯示百分比
這里我們來應用formatter。實現顯示百分比。
核心代碼
label: {
formatter: '{b} ozvdkddzhkzd',
}
說明
只需要定義 formatter為'{b} ozvdkddzhkzd'就可以實現同時顯示數據名和百分比
效果
實現動態顏色
這里我們來應用formatter和rich。實現label的動態顏色。
核心代碼
label: {
// 這樣就實現了動態顏色，數據名固定為白色，百分比跟隨數據項顏色
formatter: '{name|{b}} ozvdkddzhkzd',
rich: {
name: {
color: '#fff',
}
}
}
說明
formatter定義了名稱是name樣式的，利用rich定義了name的顯示顏色為白色。
效果
實現自定義裝飾
這里我們來嘗試一下formatter和rich的高級應用。給數據名創建一個邊框和標識點。
核心代碼
label: {
"formatter": '{rect|}{name|{b}}: ozvdkddzhkzd',
"rich": {
"name": {
"color": '#fff',
// 這里給name字段定義了邊框顏色和邊框寬度
"borderColor": '#264884',
"borderWidth": 1,
"padding": [10, 15],
},
"rect":{
// 這里給標識點定義了大小和顏色
"height": 12,
"width": 8,
"backgroundColor": "#264884"
}
}
}
說明
這里我們定義了一個 rect 作為作為一個標識點，給了標識點一個大小和顏色。
效果
對稱標簽樣式
從上圖可見，我們實現出來的效果與預期略有差異，問題出在標簽樣式未對稱，接下來我們來實現它。
核心代碼
label: {
"formatter":function formatterFunc(params) {
const values = params.data; // 內容
const formatter = [`{rect|}{name|${values.name}} ${values.value}%`, `${values.value}% {name|${values.name}}{rect|}`];
const midAngle = (values._startArc + values._endArc) / 2;
if (midAngle <= Math.PI) {
return formatter[0];
} else {
return formatter[1];
}
},
"rich": {
"name": {
"color": '#fff',
"borderColor": '#264884',
"borderWidth": 1,
"padding": [10, 15],
},
"rect":{
"height": 12,
"width": 8,
"backgroundColor": "#264884"
}
}
}
說明初始化數據的時候計算開始角度，結束角度，并寫入數據項的data屬性。
分別定義了左右兩種情況的formatter值，根據數值的左右分別取用。
由formatter中默認傳入的params參數中獲取數據。
從數據中拿到開始角度和結束角度。
取開始角度和中間角度的中間值判斷是否<= Math.PI 來區分左右，分別取用上述定義的formatter
效果
實例展示
這里有一些我們在實際應用中使用的的效果，拋磚引玉，為大家設計時提供一個思路。
往期回顧ling310：玩轉ECharts之實現“頂端裝飾”?zhuanlan.zhihu.com
總結
以上是生活随笔為你收集整理的echarts label加边框_玩转ECharts之实现“动态颜色的Label”的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git 冲突覆盖_git pull冲突解
- 下一篇： 订单生产计划表范本_生产计划管理与物料控