echarts饼图label自定义样式

news2024/12/29 9:38:53

 

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/982204.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python Qt学习（十）一个简易的POP3邮件客户端

Python Qt学习（十）一个简易的POP3邮件客户端

公司把126这类的邮箱网站都封了&#xff0c;正好现在无事&#xff0c;加之&#xff0c;算是一个对这俩周学习Qt的一个总结吧。遂写了这么一个简易的通过POP3协议接收126邮件的客户端。 源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from read…
阅读更多...
OpenCV图像处理——矩形（Rect）类的常用操作

OpenCV图像处理——矩形（Rect）类的常用操作

1.Rect类 创建类 Rect类成员变量x、y、width、height&#xff0c;分别为左上角点的坐标和矩形的宽和高。 创建一个Rect对象Rect,并在图像上画该矩形框。 cv::Rect rect(100, 50, 500, 500);cv::Mat cv_src cv::imread("11.JPG");cv::rectangle(cv_src, rect, cv:…
阅读更多...
每一座屎山代码背后，都藏着一堆熟读代码规范的研发

每一座屎山代码背后，都藏着一堆熟读代码规范的研发

&#x1f449;导读 韩寒在《他的国》中写道&#xff1a;“我们懂很多道理&#xff0c;却依然过不好这一生”&#xff0c;人们虽然知道很多道理&#xff0c;但并不一定能将这些道理应用到实际生活中。这种现象在生活中很常见&#xff0c;我们听了很多的成功学的道理&#xff0c;…
阅读更多...
接入 NVIDIA A100、吞吐量提高 10 倍！Milvus GPU 版本使用指南

接入 NVIDIA A100、吞吐量提高 10 倍！Milvus GPU 版本使用指南

Milvus 2.3 正式支持 NVIDIA A100&#xff01; 作为为数不多的支持 GPU 的向量数据库产品&#xff0c;Milvus 2.3 在吞吐量和低延迟方面都带来了显著的变化&#xff0c;尤其是与此前的 CPU 版本相比&#xff0c;不仅吞吐量提高了 10 倍&#xff0c;还能将延迟控制在极低的水准。…
阅读更多...
ChatGLM2-6B 部署

ChatGLM2-6B 部署

引言 这是ChatGLM2-6B 部署的阅读笔记&#xff0c;主要介绍了ChatGLM2-6B模型的部署和一些原理的简单解释。 ChatGLM-6B 它是单卡开源的对话模型。 充分的中英双语预训练 较低的部署门槛 FP16半精度下&#xff0c;需要至少13G的显存进行推理&#xff0c;甚至可以进一步降低…
阅读更多...
罕见病 对称性脂肪瘤(MSL) 马德龙病

罕见病 对称性脂肪瘤(MSL) 马德龙病

如果你体内脂肪瘤分布大致如下 而且个数不断增多 这篇文章适合你 症状 脂肪瘤个数一直增加 而且很对称 比如: 左手臂一个 右手臂一个 别名 多发性对称性脂肪增多症 Multiple symmetric lipomatosis (MSL) 多发性对称性脂肪瘤&#xff08;MSL&#xff09; 脂肪瘤 马德龙病(…
阅读更多...
大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析

大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析

大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析 大场景的倾斜摄影三维模型是指通过航空或地面摄影获取的大范围、高分辨率的地理环境数据。为了在虚拟环境中加载和渲染这些模型&#xff0c;需要对其进行OBJ格式的轻量化处理。本文将分析大场景的倾斜摄影三维模…
阅读更多...
SSRF漏洞实战

SSRF漏洞实战

文章目录 SSRF概述SSRF原理SSRF 危害PHP复现SSRF漏洞检测端口扫描内网Web应用指纹识别攻击内网应用读取本地文件 Weblogic SSRF--Getshell复现SSRF攻击Redis原理漏洞检测端口扫描复现翻车&#xff0c;请看官方复现教程注入HTTP头&#xff0c;利用Redis反弹shell SSRF防御过滤输…
阅读更多...
软路由的负载均衡设置：优化网络性能和带宽利用率

软路由的负载均衡设置：优化网络性能和带宽利用率

在现代网络环境中&#xff0c;提升网络性能和最大化带宽利用率至关重要。通过合理配置软路由IP的负载均衡设置&#xff0c;可以有效地实现这一目标&#xff0c;并提高整体稳定性与效果。本文将详细介绍如何进行软路由IP的负载均衡设置&#xff0c;从而优化网络表现、增加带宽利…
阅读更多...
软件架构设计(六) 软件架构风格-MDA(模型驱动架构)

软件架构设计(六) 软件架构风格-MDA(模型驱动架构)

概念 模型驱动架构MDA, 全称叫做Model Driven Architecture。 Model：表示客观事物的抽象表示Architecture：表示构成系统的部件，连接件及其约束的规约Model Driven: 使用模型完成软件的分析，设计，构建，部署和维护等 开发活动MDA起源于分离系统规约和平台实现的思想。之前…
阅读更多...
Python入门学习13（面向对象）

Python入门学习13（面向对象）

一、类的定义和使用 类的使用语法&#xff1a; 创建类对象的语法&#xff1a; ​​​​​​​ class Student:name None #学生的名字age None #学生的年龄def say_hi(self):print(f"Hi大家好&#xff0c;我是{self.name}")stu Student() stu.name &q…
阅读更多...
软件系统平台验收测试报告

软件系统平台验收测试报告

验收测试 一、验收测试 软件项目验收测试依据招投标文件以及相关行业标准、国家标准、法律法规等对软件的功能性、易用性、可靠性、兼容性、维护性、可移植性和用户文档等进行检测&#xff0c;对软件项目的质量进行科学的评价&#xff0c;为项目验收提供依据。 1、服务内容 …
阅读更多...
成功解决OSError: [WinError 1455] 页面文件太小，无法完成操作

成功解决OSError: [WinError 1455] 页面文件太小，无法完成操作

最近写了个训练文件&#xff0c;昨天在运行的时候都是好好的&#xff0c;今天一运行就报错了&#xff0c;不得不说&#xff0c;有点点奇怪。 OSError: [WinError 1455] 页面文件太小&#xff0c;无法完成操作。 Error loading "D:\AI\Anaconda\anaconda3\envs\torch1.8\li…
阅读更多...
嵌入式学习笔记（16）反汇编工具objdump

嵌入式学习笔记（16）反汇编工具objdump

2.4.1反汇编的原理&为什么要用反汇编 arm-linux-objdump -D led.elf > led_elf.dis objdump是gcc工具链中的反汇编工具&#xff0c;作用是由编译链接好的elf格式的可执行程序反过来得到汇编源代码 -D表示反汇编 > 左边的是elf可执行程序&#xff08;反汇编的源&am…
阅读更多...
Linux RPM JDK升级

Linux RPM JDK升级

以JDK1.8升级JDK17为例 上传jdk17安装包到linux服务器 检查jdk版本 rpm -qa|grep jdk 删除查询到的jdk rpm -e --nodeps jdk1.8-1.8.0_201-fcs.x86_64 删除完毕后安装新的jdk rpm -ivh jdk-17_linux-x64_bin.rpm 检查jdk版本 java -version
阅读更多...
Matlab信号处理3：fft(快速傅里叶变换)标准使用方式

Matlab信号处理3：fft(快速傅里叶变换)标准使用方式

Fs 1000; % 采样频率 T 1/Fs; % 采样周期&#xff1a;0.001s L 1500; % 信号长度 t (0:L-1)*T; % 时间向量. 时间向量从0开始递增&#xff0c;0s~1.499sS 0.7*sin(2*pi*50*t) sin(2*pi*120*t); % 模拟原信号 X S 2*randn(size(t)); …
阅读更多...
jenkins快速跑通helloworld任务

jenkins快速跑通helloworld任务

jenkins新建helloworld示例 左上角“新建任务” 输入名称&#xff0c;选择第一个创建&#xff1a; 可以选择众多执行脚本&#xff0c;这里选择shell&#xff1a; 随后弹出一个窗口&#xff0c;将下面脚本填入&#xff1a; #!/bin/bashecho start... for i in {1..10}doecho $i…
阅读更多...
什么是混合项目管理模式，以及价值

什么是混合项目管理模式，以及价值

随着工作环境的不断变化&#xff0c;传统的项目管理方法&#xff08;如瀑布模型&#xff09;已经不能满足当前的需要&#xff0c;这也引发了对敏捷和瀑布式两种方法论之间优劣的新一轮讨论。瀑布模型是一种较为传统和结构化的项目管理方法&#xff0c;主要用于项目管理和软件开…
阅读更多...
CH06_第一组重构（上）

CH06_第一组重构（上）

提取函数&#xff08;Extract Function |106&#xff09; 曾用名&#xff1a;提炼函数&#xff08;Extract Function&#xff09; 反向重构&#xff1a;内联函数&#xff08;115&#xff09; 示例代码 function printOwing(invoice) {printBanner();let outstanding calcul…
阅读更多...
git撤销还未push的的提交

git撤销还未push的的提交

怎样撤销掉上图中的提交呢 使用以下代码即可提交 git reset --soft HEAD^
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023