echarts饼图label自定义样式

 echarts饼图label自定义样式_第1张图片

 生成的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
}

你可能感兴趣的:(python,前端,javascript)