echats--》饼图 如何在环形中央设置 文字?
遇到一个需求,在环形图中央空白部分显示总数量。
let option = {
title: {
text: "报单总数",
x: "center",
y: "center",
top: "",
textStyle: {
fontSize: ,
fontWeight: "",
color: "#6e6e6e"
}
},
color: ["#f04864", "#facc14", "#3aa0ff"], //饼状图颜色数组
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
style: {
textAlign: "left"
}
},
legend: { //设置legend模板 序列化
formatter: function(name) {
let pieLegendVale = {};
data.data.filter((item, index) => {
if (item.name == name) {
pieLegendVale = item;
}
});
return pieLegendVale.value + "\n" + pieLegendVale.name;
},
itemGap: , // 设置legend的间距
itemWidth: , // 设置宽度
itemHeight: , // 设置高度
orient: "horizontal", //垂直显示还是水平显示
right: , //legend相对位置
bottom: , //legend相对位置
textStyle: { fontSize: "" }, //legend字体大小
data: ["待接单", "已完成", "进行中"]
},
graphic: [
{
//环形图中间添加文字
type: "text", //通过不同top值可以设置上下显示
left: "center",
top: "43%",
style: {
text: data.totalNum,
textAlign: "center",
fill: "black", //文字的颜色
width: ,
height: ,
fontSize: ,
fontFamily: "Microsoft YaHei"
}
}
],
series: [
{
name: "工单完成率",
type: "pie",
radius: ["60%", "87%"],
avoidLabelOverlap: false,
data: data.data,
label: {
normal: {
show: false,
position: "center"
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
};
效果如图:

echats--》饼图 如何在环形中央设置 文字?的更多相关文章
- iOS设置文字过长时的显示格式
以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...
- css设置文字不换行,超过的部分用“...”代替
设置文字不换行,超过的部分用“...”代替 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: /*so ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- CSS设置文字不能被选中
/*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; us ...
- 可以简易设置文字内边距的EdgeInsetsLabel
可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...
- 用rem设置文字大小
一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...
- css3-11 如何设置文字的阴影
css3-11 如何设置文字的阴影 一.总结 一句话总结:text-shadow属性.text-shadow:3px 3px 3px #f0f; 1.text-shadow属性的参数依次是什么意思? ...
- 【css】CSS设置文字不能被选中
CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...
- C# Excel 中设置文字对齐方式、方向和换行
在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...
随机推荐
- Win10 搭建IIS服务
IIS服务器,俗称:Web服务器又或者叫做网站服务器. IIS详解: https://baike.baidu.com/item/iis/99720?fr=aladdin 开始搭建: 1. 打开控制面板 ...
- Mysql中几种sql的常见用法
如何使用非默认的排序.例如使用213之类的排序 可以使用如下方法 SELECT DISTINCT pg.part_grp_id, pg.part_grp_name, pg.equip_category ...
- Java中 DecimalFormat 用法详解
我们经常要将数字进行格式化,比如取2位小数,这是最常见的.Java 提供DecimalFormat类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: import java.text.D ...
- [转] Linux环境变量配置文件以及启动顺序
转自:https://blog.csdn.net/bjnihao/article/details/51775854 一.环境变量配置文件: 对所有用户都起作用 /etc/profile /etc/pr ...
- hdu 1051 wooden sticks (贪心+巧妙转化)
#include <iostream>#include<stdio.h>#include<cmath>#include<algorithm>using ...
- HGOI20190809 省常中互测2
Problem A 时之终结 构造一个含有$n$个节点的无重边无自环的有向图, 使得从$1$出发,每一次经过一条$(u,v) (u < v)$的边到达节点$n$的方案恰好有$y$种. 对于$10 ...
- confluence 附件docx文件 乱码处理
服务器安装字体库 Fontconfig是一个用于配置和自定义字体访问的库 yum -y install fontconfig 拷贝需要的字体文件 fonts.zip(或自己电脑中的字体文件c:/Win ...
- AcWing:105. 七夕祭(前缀和 + 中位数 + 分治 + 贪心)
七夕节因牛郎织女的传说而被扣上了「情人节」的帽子. 于是TYVJ今年举办了一次线下七夕祭. Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. TYVJ七夕祭和11 ...
- Android_(游戏)打飞机03:控制玩家飞机
(游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹 传送门 (游戏)打飞机05:处理子弹, ...
- linux下安装R
下载 版本:R3.2.2 下载地址:http://cran.rstudio.com/src/base/R-3/R-3.2.2.tar.gz 安装步骤: 解压 tar -zxvf R-3.2.2.tar ...