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
}

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DQN算法概述及基于Pytorch的DQN迷宫实战代码

DQN算法概述及基于Pytorch的DQN迷宫实战代码

一. DQN算法概述 1.1 算法定义 Q-Learing是在一个表格中存储动作对应的奖励值&#xff0c;即状态-价值函数Q(s,a)&#xff0c;这种算法存在很大的局限性。在现实中很多情况下&#xff0c;强化学习任务所面临的状态空间是连续的&#xff0c;存在无穷多个状态&#xff0c;这种情…
阅读更多...
CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用. 网页布局第一准则:多个块级元素纵向排列找标准流&#xff0c;多个块级元素横向排列找浮动。 float属性用于创建浮动框&#xff0c;将其移动到一边&#xff0c;直到左边缘或右边缘触及包含块或另一个浮动框…
阅读更多...
Xilinx IDDR与ODDR原语的使用

Xilinx IDDR与ODDR原语的使用

文章目录 ODDR原语1. OPPOSITE_EDGE 模式2. SAME_EDGE 模式 ODDR原语 例化模板&#xff1a; ODDR #(.DDR_CLK_EDGE("OPPOSITE_EDGE"), // "OPPOSITE_EDGE" or "SAME_EDGE" .INIT(1b0), // Initial value of Q: 1b0 or 1b1.SRTYPE("SYNC…
阅读更多...
使用Python操作MySQL数据库

使用Python操作MySQL数据库

准备 安装Python,打开命令提示符&#xff0c;我已经安装成功了 安装Mysql我也安装成功了 我在用户的86188下利用记事本写了一个.py的python代码&#xff0c;在命令提示符中运行 Python自带的集成式开发环境,在电脑搜索框直接IDEA你也会打开 一&#xff0c;建立连接 使用Python…
阅读更多...
colab使用(基础入门)——随手记

colab使用(基础入门)——随手记

挂载到google drive 挂载目录/content/drive from google.colab import drive drive.mount(/content/drive) 图解colab读取Google Drive 文件 - 知乎 下载文件 !curl -L https://dl.fbaipublicfiles.com/imagebind/imagebind_huge.pth -o imagebind_ckpt参数&#xff1a;[-…
阅读更多...
Nginx 学习（十）高可用中间件的配置与实现

Nginx 学习（十）高可用中间件的配置与实现

一 Keepalived热备 1 概述 调度器出现单点故障&#xff0c;如何解决?Keepalived实现了高可用集群Keepalived最初是为LVS设计的&#xff0c;专门监控各服务器节点的状态Keepalived后来加入了VRRP功能&#xff0c;防止单点故障 2 运行原理 Keepalived检测每个服务器节点状…
阅读更多...
Pytest系列-快速入门和基础讲解（1）

Pytest系列-快速入门和基础讲解（1）

前言 目前有两种纯测试的测试框架&#xff0c;pytest和unittestunittest应该是广为人知&#xff0c;而且也是老框架了&#xff0c;很多人都用来做自动化&#xff0c;无论是UI还是接口pytest是基于unittest开发的另一款更高级更好用的单元测试框架 单元测试框架介绍 单元测试…
阅读更多...
【智慧工地源码】物联网和传感器技术在智慧工地的应用

【智慧工地源码】物联网和传感器技术在智慧工地的应用

物联网&#xff08;IoT&#xff09;和传感器技术在智慧工地中扮演着至关重要的角色。这些技术的应用&#xff0c;使得智慧工地能够实现对施工过程的精确监控、数据收集和分析&#xff0c;以及设备互联&#xff0c;从而提高工程效率、减少成本并改善工人的工作环境。 一、物联网…
阅读更多...
微信小程序navigateTo进入页面后返回原来的页面需要携带数据回来

微信小程序navigateTo进入页面后返回原来的页面需要携带数据回来

需求 如图&#xff1a;点击评论后会通过wx.navigateTo进入到评论页面&#xff0c;评论完返回count给原页面&#xff0c;重新赋值实现数量动态变化&#xff0c;不然要刷新这个页面才会更新最新的评论数量。 实现方式&#xff1a; 在评论页面通过wx.setStorageSync(‘data’…
阅读更多...
在Android和iOS上设置手机ip详细教程

在Android和iOS上设置手机ip详细教程

大家好&#xff01;今天我们将分享一个关于如何在Android和iOS设备上设置手机ip&#xff08;Layer 2 Tunneling Protocol&#xff09;的简易教程。如果你想要通过安全且可靠的方式连接到远程网络&#xff0c;那么跟着本文一起学习吧&#xff01;无需复杂操作&#xff0c;让我们…
阅读更多...
jmeter调试错误大全

jmeter调试错误大全

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题&#xff0c;但是无从下手&#xff0c;不知道从哪里开始找起&#xff0c;对于初学者而言这是一个非常头痛的事情。这里结合笔者的经验&#xff0c;总结出以下方法。 二、通过查看运行日志调试问题 写好…
阅读更多...
web端调用本地摄像头麦克风+WebRTC腾讯云，实现直播功能

web端调用本地摄像头麦克风+WebRTC腾讯云，实现直播功能

目录 关于直播直播流程直播视频格式封装推流和拉流 获取摄像头和麦克风权限navigator.getUserMedia()MediaDevices.getUserMedia() WebRTC腾讯云快直播 关于直播 视频直播技术大全、直播架构、技术原理和实现思路方案整理 直播流程 视频采集端&#xff1a; 1、视频采集&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023