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 ...
随机推荐
- SpringCloud使用feign时的复杂参数传递(转)
Feign传参注意 最近在用SpringCloud尝试重构以前的项目,使用Feign客户端组件来调用微服务,经常出现参数传不过去变成null的问题,网上查了一下发现feign在参数上的使用还是有一定的 ...
- [CF1105E] Helping Hiaset
问题描述 你在某社交网站上面注册了一个新账号,这个账号有\(n(n\leq 10^5)\)次记录.要么就是你更改过一次ID,要么就是一个ID为\(s(|s|\leq 40)\)的朋友访问过你的空间. ...
- JavaScript分支结构Ⅱ—switch-case
㈠switch-case 使用场合 优先用于等值判断的条件中 ㈡switch-case 语句执行逻辑 switch case语句是一种特殊的分支结构,可以根据一个表达式的不同取值,从不同的程序入口 ...
- 【Python之路】特别篇--Python线程池
版本一: #!/usr/bin/env python # -*- coding:utf-8 -*- import Queue import threading class ThreadPool(obj ...
- python 文件定位
tell()方法告诉你文件内的当前位置, 换句话说,下一次的读写会发生在文件开头这么多字节之后. seek(offset [,from])方法改变当前文件的位置.Offset变量表示要移动的字节数.F ...
- Codeforces 1213F Unstable String Sort
cf题面 中文题意 求一个由最多26个.最少k个小写字母构成的,长度为n的字符串,这个字符串要满足的要求是--当其中字母按照p和q两个\(1\)~\(n\)的全排列重新排序时,新的字符串是按照升序排好 ...
- JDK_API剖析之java.io包
Java的核心库java.io提供了全面的IO接口.包括:文件读写.标准设备输出等.Java中IO是以流为基础进行输入输出的,所有数据被串行化写入输出流,或者从输入流读入. 一.接口 1.Closea ...
- Map循环/迭代/遍历效率、性能问题。
项目开发完毕,为了找点事打发一下时间,于是用findBugs插件对当前完工的项目进行扫描,发现了很多问题.其中有个关于性能的问题,在这里记录一下. 提示信息为:Inefficient use of k ...
- oracle存储过程及sql优化-(一)
本篇主要介绍存储过程的结构 先简单介绍下: oracle存储过程与函数不同,oracle函数和存储过程都可以有多个输入,但是函数一般只有一个输出,而oracle可以有多个输出且与输入 ...
- 基于Xposed hook 实时监测微信消息
本文以微信版本6.7.3为例进行分析有hook, 大部分做微信机器人的话,首先要实时抓取微信的消息,在这里展示三种方式对微信的消息进行hook: 1.基于UI层拉取加载进行监听 2.基于微信dao层调 ...