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 ...
随机推荐
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- jdk1.8环境变量配置
JAVA_HOME=/usr/java/jdk1.8.0_45PATH=$JAVA_HOME/bin:$PATHCLASSPATH=.:$JAVA_HOME/jre/lib/ext:$JAVA_HOM ...
- CSS3动画实现高亮光弧效果,文字和图片(一闪而过)
前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...
- SessionFactory的openSession与getCurrentSession区别
SessionFactory 1 用来产生和管理sesssion 2 通常情况下,每个应用只需要一个SessionFactory,除非要访问多个数据库的情况 3 openSession()与openS ...
- json的值键对,对象,数组,逻辑值
详细说一下有关json的相关知识: ㈠json与xml的异同 ★与 XML 相同之处 ⑴JSON 是纯文本 ⑵JSON 具有"自我描述性"(人类可读) ⑶JSON 具有层级结构(值 ...
- CF1213D Equalizing by Division
easy version hard version 问题分析 直接从hard version入手.不难发现从一个数\(x\)能得到的数个数是\(O(\log x)\)的.这样总共有\(O(n\log ...
- js下拉框选择图片
二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...
- 剑指offer:关于复制构造函数
1:首先参看代码: #include "stdafx.h" #include "iostream" using namespace std; class A { ...
- Java缓存技术有哪些
我们用ehcache在本地,分布式用redis和memcache,各有各的好处,现在企业都是应用很多种中间件供俺们码农选择.
- 【Spark机器学习速成宝典】模型篇03线性回归【LR】(Python版)
目录 线性回归原理 线性回归代码(Spark Python) 线性回归原理 详见博文:http://www.cnblogs.com/itmorn/p/7873083.html 返回目录 线性回归代码( ...