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 ...
随机推荐
- Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器
[文章作者:张宴 本文版本:v6.3 最后修改:2010.07.26 转载请注明原文链接:http://blog.zyan.cc/nginx_php_v6/] 前言:本文是我撰写的关于搭建“Nginx ...
- 【Winform-获取ListView选中行】Winform如何获取ListView选中行数据 ?
=========这是Winform================== 1.设计窗体 一个ListView listView1 一个textBox txbSelected 2.listV ...
- 【Python之路】特别篇--Python线程池
版本一: #!/usr/bin/env python # -*- coding:utf-8 -*- import Queue import threading class ThreadPool(obj ...
- [CF1223G/1240E]Wooden Raft 题解
前言 上午一场模拟赛(发布前很久,因为这题题解太长了),发现T3特别珂怕,打开题解,发现一行字: 不要再问了,再问就是CF 1240E 当场去世.jpg. 在下文中,我们记 \(A\) 为 \(a\) ...
- OCWA提高组模拟赛一 Solution
Problem A RecMin 给出一个$n \times m$的矩阵,其中$1 \leq n,m \leq 3\ times 10^3$ 给出整数$a,b$,求出在矩阵中所有$a\ times b ...
- create-react-app 构建的项目使用 css module 方式来书写 css
先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...
- Sonar页面Author页面展示
文主要记录通过Jenkins集成git .svn .sonarqube,获取源码后自动构建进行sonar scanner代码审查,并分析在sonar能够展示Author的原因. 一.Sonar通过je ...
- python爬取智联招聘职位信息(单进程)
我们先通过百度搜索智联招聘,进入智联招聘官网,一看,傻眼了,需要登录才能查看招聘信息 没办法,用账号登录进去,登录后的网页如下: 输入职位名称点击搜索,显示如下网页: 把这个URL:https://s ...
- [EOJ Monthly2019.11][T4]安全带
以下是题干 D. 安全带 单点时限: 1.0 sec 内存限制: 256 MB (前面题干是一堆废话,我把它删了) 简单来说:初始给出一个 n 个点顺次连接而成的环,点有点权,边权是两个端点的点权乘积 ...
- [CSP-S模拟测试]:硬币(博弈论+DP+拓展域并查集)
题目传送门(内部题135) 输入格式 第一行包含一个整数$T$,表示数据组数. 对于每组数据,第一行两个整数$h,w$,表示棋盘大小. 接下来$h$行,每行一个长度为$w$的字符串,每个位置由为$o, ...