首先需要在初始化图表的方法中过滤一下数据 ,将你需要的 名称  所占百分比 所占数量  筛选出来

let dataFilter = [
{ value: 20, name: "未知", percent: "10%" },
{ value: 10, name: "工作", percent: "10%" },
{ value: 40, name: "待机", percent: "10%" },
{ value: 30, name: "停机", percent: "10%" },
{ value: 20, name: "故障", percent: "10%" },
{ value: 8, name: "调试中种子", percent: "10%" }
];

 对legend进行配置

 legend: {
formatter: function(name) {
let pieLegendVale = {};
dataFilter.filter((item,index) => {
if (item.name == name) {
pieLegendVale = item;
}
});
if(pieLegendVale.name.length == ){
return pieLegendVale.name + " " + pieLegendVale.percent +" " + pieLegendVale.value + "项" ;
}else{
return pieLegendVale.name + " " + pieLegendVale.percent +" " + pieLegendVale.value + "项" ;
} },
itemGap: , // 设置legend的间距
itemWidth: , // 设置宽度
itemHeight: , // 设置高度
orient: "vertical", //垂直显示还是水平显示
right: , //legend相对位置
bottom: , //legend相对位置
textStyle: { fontSize: "" }, //legend字体大小
data: ["未知", "工作", "待机", "停机", "故障", "调试中种子"]
},

效果如上图!!!!!!!

echarts 饼图-->如何修改legend模板?的更多相关文章

  1. echarts饼图默认状态高亮显示

    需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...

  2. webapi修改tt模板给字段添加JsonIgnore特性解决转换json循环引用问题

    0.问题描述 EF生成的model带有导航属性,则json序列化会报循环引用错误,尝试如下 protected void Application_Start() { GlobalConfigurati ...

  3. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  4. JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 一.http协议回顾: 在上一篇文章中:JavaW ...

  5. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  6. dede修改templets模板文件夹后,出现“无法在这个位置找到: ”错误的解决办法

    修改templets模板文件夹的方法: 首先找到系统配置文件common.inc.php,此文件存放在Include目录下,打开common.inc.php来修改默认模板目录templets, 查找: ...

  7. (转)JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 一.http协议回顾: 在上一篇文章中:JavaW ...

  8. myeclipse中如何修改Servlet模板_day01

    参考网址:https://jingyan.baidu.com/article/0eb457e536d5a503f1a90593.html 如果你在web项目下创建一个Servlet类,那么它会自带很多 ...

  9. IDEA 官方背景与修改jsp模板以及字体大小

    一.官方背景切换 方法一:先打开file找到Settings  如图: 也可以用快捷方式打开:Ctrl+alt+s  打开 找到Editor点击进入 ,再然后找Color Scheme 可以看到如下图 ...

随机推荐

  1. 微信里关闭窗口 js

    需要在微信中关闭页面窗口,不过window.close()不管用,问过群里才知道微信有自带的方法能关闭窗口,记录一下(这个只针对微信有效哦): WeixinJSBridge.call('closeWi ...

  2. 前端js之BOM和DOM操作

    目录 引入 BOM操作 window对象 history对象 location对象(重点) 弹出框 定时器 计时器相关 DOM 查找标签 直接查找 间接查找 节点操作 创建节点及添加节点 删除节点 替 ...

  3. k8b部署prometheus+grafana

    来源: https://juejin.im/post/5c36054251882525a50bbdf0 https://github.com/redhatxl/k8s-prometheus-grafa ...

  4. dockerfile:python-cuda-nvidia-cudnn

    centos7 FROM centos:7 MAINTAINER yon@DataExa.com RUN yum -y install make wget \ && wget -O / ...

  5. CF 680D 堆塔

    D. Bear and Tower of Cubes time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  6. Springboot 系列(十七)迅速使用 Spring Boot Admin 监控你的 Spring Boot 程序,支持异常邮件通知

    1. Spring Boot Admin 是什么 Spring Boot Admin 是由 codecentric 组织开发的开源项目,使用 Spring Boot Admin 可以管理和监控你的 S ...

  7. Spring Boot教程(二十七)整合Spring Security

    在这一节,我们将对/hello页面进行权限控制,必须是授权用户才能访问.当没有权限的用户访问后,跳转到登录页面. 添加依赖 在pom.xml中添加如下配置,引入对Spring Security的依赖. ...

  8. 【转】Diamond -- 分布式配置中心

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  9. Mysql 中需不需要commit

    摘自:https://blog.csdn.net/zzyly1/article/details/81003122 mysql在进行增删改操作的时候需不需要commit,这得看你的存储引擎, 如果是不支 ...

  10. PHP 设置Cookie值注意项

    Cookie 中的value值只能添加设置为String类型的字符串数据,但我们需要添加如数组,json串等其他类型的数据时,我们就要先对数据进行转换,再存入Cookie里了. Cookie 存储数组 ...