遇到一个需求,在环形图中央空白部分显示总数量。

    let data = {
        totalNum: "",
        data: [
          { value: 335, name: "待接单" },
          { value: 310, name: "已完成" },
          { value: 234, name: "进行中" }
        ]
      };
      let n = 0;
      orderData.data.forEach(item => {
        n += Number(item.value);
      });
      orderData.totalNum = n;

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--》饼图 如何在环形中央设置 文字?的更多相关文章

  1. iOS设置文字过长时的显示格式

    以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...

  2. css设置文字不换行,超过的部分用“...”代替

    设置文字不换行,超过的部分用“...”代替 overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: /*so ...

  3. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  4. CSS设置文字不能被选中

    /*设置文字不能被选中     以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; us ...

  5. 可以简易设置文字内边距的EdgeInsetsLabel

    可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...

  6. 用rem设置文字大小

    一.px与em 用px设置文字大小是再正常不过的事情,比如 html {font-size: 12px;} 随处可见的在设置width.height使用px,这也是细致稳妥的设置方法,这样做的缺点在于 ...

  7. css3-11 如何设置文字的阴影

    css3-11 如何设置文字的阴影 一.总结 一句话总结:text-shadow属性.text-shadow:3px 3px 3px #f0f; 1.text-shadow属性的参数依次是什么意思? ...

  8. 【css】CSS设置文字不能被选中

    CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...

  9. C# Excel 中设置文字对齐方式、方向和换行

    在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...

随机推荐

  1. 吴恩达+neural-networks-deep-learning+第二周作业

    Logistic Regression with a Neural Network mindset v4 简单用logistic实现了猫的识别,logistic可以被看做一个简单的神经网络结构,下面是 ...

  2. Java-Shiro(五):Shiro Realm讲解(二)IniRealm的用法、JdbcRelam的用法、自定义Realm

    引入 上一篇在讲解Realm简介时,介绍过Realm包含大概4类缺省的Realm,本章主要讲解: 1)IniRealm的用法: 2)JdbcRealm基于mysql   默认表及查询语句实现认证.授权 ...

  3. c语言 - 关键字const的作用

    const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. 1.const char * p1;              //表示p1指向了的字符串不可更改 2.char const ...

  4. [笔记]MongoDB 二(Linux下MongoDB API C++编程)

    一.连接类 DBClientConnection,派生自DBClientBase.DBClientBase类是实现query, update, insert, remove等功能. 构造函数:DBCl ...

  5. [洛谷P1501] [国家集训队]Tree II(LCT模板)

    传送门 这是一道LCT的板子题,说白了就是在LCT上支持线段树2的操作. 所以我只是来存一个板子,并不会讲什么(再说我也不会,只能误人子弟2333). 不过代码里的注释可以参考一下. Code #in ...

  6. VS2015 ASP.NET MVC5 EntityFramework6 Oracle 环境篇

    //来源:https://www.cnblogs.com/lauer0246/articles/9576940.html Asp.Net MVC EF各版本区别 2009年發行ASP.NET MVC ...

  7. Java程序,JVM之间的关系

    java程序是跑在JVM上的,严格来讲,是跑在JVM实例上的.一个JVM实例其实就是JVM跑起来的进程,二者合起来称之为一个JAVA进程.各个JVM实例之间是相互隔离的. 每个java程序都运行于某个 ...

  8. Zookeeper 选举过程

    Zookeeper 选举过程 问题 选举过程 服务器之间是怎么通信的? 答:QuorumCnxManager使用TCP-socket实现选举过程中的连接通信 Leader的选举过程在什么时候实现? L ...

  9. 关于Hibernate中Java实体类加载出现序列化异常

    晚上跟着教程敲网上商城项目的时候(ssh框架写的),碰到了一个问题,就是如题所示的序列化异常问题,这个问题纠结了很久,最后发现了一个解决方法,虽然这篇文章可能几乎不会被人访问到,但是还是要写出来! 其 ...

  10. 使用KFold进行训练集和验证集的拆分,使用准确率和召回率来挑选合适的阈值(threshold) 1.KFold(进行交叉验证) 2.np.logical_and(两bool数组都是正即为正) 3.np.logical_not(bool数组为正即为反,为反即为正)

    ---恢复内容开始--- 1. k_fold = KFold(n_split, shuffle) 构造KFold的索引切割器 k_fold.split(indices) 对索引进行切割. 参数说明:n ...