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 = datadefaultOptions.series[3].label.rich = labelObjdefaultOptions.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 = defaultOptionsconsole.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
}