echarts饼图label自定义样式
生成的options
{
"tooltip": {
"trigger": "item",
"axisPointer": {
"type": "shadow"
},
"backgroundColor": "rgba(9, 24, 48, 0.5)",
"borderColor": "rgba(255,255,255,0.4)",
"textStyle": {
"color": "#fff",
"align": "left",
"textAlign": "left"
},
"borderWidth": 1,
"formatter": "{b} : {c} ({d}%)"
},
"calculable": true,
"series": [
{
"type": "pie",
"radius": "6%",
"hoverAnimation": false,
"labelLine": {
"show": false
},
"itemStyle": {
"color": "#c2d7fd"
},
"tooltip": {
"show": false
},
"data": [
0
]
},
{
"type": "pie",
"radius": [
"17%",
"18%"
],
"hoverAnimation": false,
"labelLine": {
"show": false
},
"itemStyle": {
"color": "#c2d7fd",
"opacity": 0.4
},
"tooltip": {
"show": false
},
"data": [
0
]
},
{
"type": "pie",
"radius": [
"61%",
"62%"
],
"hoverAnimation": false,
"labelLine": {
"show": false
},
"itemStyle": {
"color": "#b7cffc",
"opacity": 0.4
},
"tooltip": {
"show": false
},
"data": [
0
]
},
{
"type": "pie",
"name": "",
"radius": [
"20%",
"70%"
],
"roseType": true,
"zlevel": 10,
"label": {
"rich": {
"labelB": {
"fontSize": 12,
"color": "#eef4ff",
"lineHeight": 50
},
"labelA": {
"width": 5,
"height": 15,
"fontSize": "0px",
"backgroundColor": "rgba(0,0,0,0)"
},
"a": {
"width": 5,
"height": 14,
"fontSize": "0px",
"backgroundColor": "rgba(255,204,0,1)"
},
"b": {
"width": 5,
"height": 14,
"fontSize": "0px",
"backgroundColor": "rgba(0,203,255,1)"
},
"c": {
"width": 5,
"height": 14,
"fontSize": "0px",
"backgroundColor": "rgba(255,102,0,1)"
},
"d": {
"width": 5,
"height": 14,
"fontSize": "0px",
"backgroundColor": "rgba(40,242,230,1)"
}
},
"padding": [
0,
-30
],
"distanceToLabelLine": 0,
"alignTo": "labelLine"
},
"labelLayout": {
"verticalAlign": "bottom",
"dy": 10,
"align": "left",
"dx": -10
},
"labelLine": {
"length": 10,
"length2": 30,
"lineStyle": {
"color": "rgba(255,255,255,0.4)",
"type": "dashed"
}
},
"data": [
{
"value": 57,
"name": "数据1",
"id": "a",
"theta1": 0,
"theta2": 0.3220338983050847,
"itemStyle": {
"color": {
"type": "radial",
"x": 0,
"y": 0.6957454301984307,
"r": 1,
"colorStops": [
{
"offset": 0,
"color": "rgba(255,204,0,0)"
},
{
"offset": 0.32,
"color": "rgba(255,204,0,0)"
},
{
"offset": 0.95,
"color": "rgba(255,204,0,0.4)"
},
{
"offset": 0.95,
"color": "rgba(255,204,0,1)"
},
{
"offset": 1,
"color": "rgba(255,204,0,1)"
}
],
"globalCoord": false
}
}
},
{
"value": 34,
"name": "数据2",
"id": "b",
"theta1": 0.3220338983050847,
"theta2": 0.5141242937853108,
"itemStyle": {
"color": {
"type": "radial",
"x": 0.08971091332918937,
"y": -0.2798421763818992,
"r": 1.2798421763818992,
"colorStops": [
{
"offset": 0,
"color": "rgba(0,203,255,0)"
},
{
"offset": 0.32,
"color": "rgba(0,203,255,0)"
},
{
"offset": 0.95,
"color": "rgba(0,203,255,0.4)"
},
{
"offset": 0.95,
"color": "rgba(0,203,255,1)"
},
{
"offset": 1,
"color": "rgba(0,203,255,1)"
}
],
"globalCoord": false
}
}
},
{
"value": 46,
"name": "数据3",
"id": "c",
"theta1": 0.5141242937853108,
"theta2": 0.7740112994350283,
"itemStyle": {
"color": {
"type": "radial",
"x": 1.046369394647701,
"y": 0.13110690971762992,
"r": 1.046369394647701,
"colorStops": [
{
"offset": 0,
"color": "rgba(255,102,0,0)"
},
{
"offset": 0.32,
"color": "rgba(255,102,0,0)"
},
{
"offset": 0.95,
"color": "rgba(255,102,0,0.4)"
},
{
"offset": 0.95,
"color": "rgba(255,102,0,1)"
},
{
"offset": 1,
"color": "rgba(255,102,0,1)"
}
],
"globalCoord": false
}
}
},
{
"value": 40,
"name": "数据4",
"id": "d",
"theta1": 0.7740112994350283,
"theta2": 1,
"itemStyle": {
"color": {
"type": "radial",
"x": 1.0000000000000002,
"y": 1.081253952840029,
"r": 1.081253952840029,
"colorStops": [
{
"offset": 0,
"color": "rgba(40,242,230,0)"
},
{
"offset": 0.32,
"color": "rgba(40,242,230,0)"
},
{
"offset": 0.95,
"color": "rgba(40,242,230,0.4)"
},
{
"offset": 0.95,
"color": "rgba(40,242,230,1)"
},
{
"offset": 1,
"color": "rgba(40,242,230,1)"
}
],
"globalCoord": false
}
}
}
]
}
]
}数据工具函数
let defaultOptions = {
// backgroundColor: "#00266b",
tooltip: {
trigger: "item",
axisPointer: {
type: "shadow",
},
backgroundColor: "rgba(9, 24, 48, 0.5)",
borderColor: "rgba(255,255,255,0.4)",
textStyle: {
color: "#fff",
align: "left",
textAlign: "left",
},
borderWidth: 1,
formatter: "{b} : {c} ({d}%)",
},
calculable: true,
series: [
{
type: "pie",
radius: "6%",
hoverAnimation: false,
labelLine: { show: false },
itemStyle: { color: "#c2d7fd" },
tooltip: { show: false },
data: [0],
},
{
type: "pie",
radius: ["17%", "18%"],
hoverAnimation: false,
labelLine: { show: false },
itemStyle: { color: "#c2d7fd", opacity: 0.4 },
tooltip: { show: false },
data: [0],
},
{
type: "pie",
radius: ["61%", "62%"],
hoverAnimation: false,
labelLine: { show: false },
itemStyle: { color: "#b7cffc", opacity: 0.4 },
tooltip: { show: false },
data: [0],
},
{
type: "pie",
name: "",
radius: ["20%", "70%"],
roseType: true,
zlevel: 10,
label: {
formatter:null,
rich: null,
padding: [0, -30],
distanceToLabelLine: 0,
alignTo: "labelLine",
},
labelLayout: {
verticalAlign: "bottom",
dy: 10,
align: "left",
dx: -10,
},
labelLine: {
length: 10,
length2: 30,
lineStyle: {
color: "rgba(255,255,255,0.4)",
type: "dashed",
},
},
data:[]
},
],
};
init();
//饼图
function init(params) {
let resData = [];
resData = [
{ value: 57, name: "数据1" },
{ value: 34, name: "数据2" },
{ value: 46, name: "数据3" },
{ value: 40, name: "数据4" },
];
key.value = !key.value;
let data = getData(resData)
let color = getColor(data)
let total = data.map((v) => v.value).reduce((o, n) => o + n);
data.reduce((o, v) => {
v.theta1 = o;
v.theta2 = o + v.value / total;
return v.theta2;
}, 0);
let labelObj = {
labelB: {
fontSize: 12,
color: "#eef4ff",
lineHeight: 50,
// align: "left",
},
labelA: {
width: 5,
height: 15,
fontSize: "0px",
backgroundColor: "rgba(0,0,0,0)",
},
};
//数据生成渐变色,label的色块
data.forEach((v, i) => {
let ops = calc(v.theta1 * 2 * Math.PI, v.theta2 * 2 * Math.PI);
if (v.value)
v.itemStyle = {
color: {
type: "radial",
x: ops.center[0],
y: ops.center[1],
r: ops.radius,
colorStops: [
{
offset: 0,
color: color[i].colorStart,
},
{
offset: 0.32,
color: color[i].colorStart,
},
{
offset: 0.95,
color: color[i].colorEnd,
},
{
offset: 0.95,
color: color[i].solid,
},
{
offset: 1,
color: color[i].solid,
},
],
globalCoord: false, // 缺省为 false
},
};
labelObj[v.id] = {
width: 5,
height: 14,
fontSize: "0px",
backgroundColor: color[i].solid,
};
});
defaultOptions.series[3].data = data
defaultOptions.series[3].label.rich = labelObj
defaultOptions.series[3].label.formatter = (params) => {
let datas = data;
let target;
var total = 0;
for (let i = 0; i < datas.length; i++) {
total += datas[i].value;
if (datas[i].name == params.name) {
target = datas[i].value;
}
}
let arr = [
"{" + params.data.id + "|}",
"{labelA|}",
"{labelB|" +
params.data.name +
" " +
((target / total) * 100).toFixed(0) +
"%}",
];
return arr.join("");
},
option.value = defaultOptions
console.log(option.value)
}
//计算渐变范围给itemStyle
function calc(theta1, theta2) {
let r = 0.5;
let inner = 0.5;
let cos = Math.cos;
let sin = Math.sin;
let PI = Math.PI;
let min = Math.min;
let max = Math.max;
let bottom = 0;
let left = 2 * r;
let right = 0;
let y0 = r * (1 - cos(theta1));
let y1 = r * (1 - cos(theta2));
let _y0 = r * (1 - inner * cos(theta1));
let _y1 = r * (1 - inner * cos(theta2));
if (theta1 < PI && theta2 > PI) {
bottom = 2 * r;
}
let ymin = min(_y0, _y1, y0, y1);
let ymax = max(_y0, _y1, y0, y1, bottom);
let x0 = r * (1 + sin(theta1));
let x1 = r * (1 + sin(theta2));
let _x0 = r * (1 + inner * sin(theta1));
let _x1 = r * (1 + inner * sin(theta2));
if (theta1 < PI / 2 && theta2 > PI / 2) {
right = 2 * r;
}
if (theta1 < (PI / 2) * 3 && theta2 > (PI / 2) * 3) {
left = 0;
}
let xmin = min(_x0, _x1, x0, x1, left);
let xmax = max(_x0, _x1, x1, x0, right);
return {
center: [(r - xmin) / (xmax - xmin), (r - ymin) / (ymax - ymin)],
radius: r / min(xmax - xmin, ymax - ymin),
};
}
function getColor(data) {
let colors = ["rgba(255,204,0)","rgba(0,203,255)","rgba(255,102,0)","rgba(40,242,230)"]
let colorArr = []
data.forEach((item,index)=>{
let n = index<4?index:index%4
let color = colors[n]
let value = color.slice(0,-1)
let obj = {
colorStart:value+',0)',
colorEnd: value+",0.4)",
solid: value+",1)",
}
colorArr.push(obj)
})
return colorArr
}
//给不同饼块加id用来区分label自定义
function getData(data) {
data.forEach((item,index)=>{
item.id =String.fromCharCode(97+index)
})
return data
}