echarts 饼图-->如何修改legend模板?
首先需要在初始化图表的方法中过滤一下数据 ,将你需要的 名称 所占百分比 所占数量 筛选出来
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模板?的更多相关文章
- echarts饼图默认状态高亮显示
需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...
- webapi修改tt模板给字段添加JsonIgnore特性解决转换json循环引用问题
0.问题描述 EF生成的model带有导航属性,则json序列化会报循环引用错误,尝试如下 protected void Application_Start() { GlobalConfigurati ...
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 一.http协议回顾: 在上一篇文章中:JavaW ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- dede修改templets模板文件夹后,出现“无法在这个位置找到: ”错误的解决办法
修改templets模板文件夹的方法: 首先找到系统配置文件common.inc.php,此文件存放在Include目录下,打开common.inc.php来修改默认模板目录templets, 查找: ...
- (转)JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 一.http协议回顾: 在上一篇文章中:JavaW ...
- myeclipse中如何修改Servlet模板_day01
参考网址:https://jingyan.baidu.com/article/0eb457e536d5a503f1a90593.html 如果你在web项目下创建一个Servlet类,那么它会自带很多 ...
- IDEA 官方背景与修改jsp模板以及字体大小
一.官方背景切换 方法一:先打开file找到Settings 如图: 也可以用快捷方式打开:Ctrl+alt+s 打开 找到Editor点击进入 ,再然后找Color Scheme 可以看到如下图 ...
随机推荐
- fedora29 下一款截图工具shutter的安装和调试
运行命令安装shutter sudo yum install shutter 如果使用过程中出现花屏 sudo vim /etc/gdm/custom.conf 把 #WaylandEnabled=f ...
- Django 文件配置、pycharm及django连接数据库、表的增删改查 总结
静态文件配置 1.你在浏览器中输入网址能够有响应的资源返回给你 是因为后端已经提前给你开设该资源的接口,也就意味着你所能 访问到的资源 都是人家事先定义好的 2.django如何给用户开设资源接口呢? ...
- matplotlib 模块
目录 matplotlib 模块 1.条形图 2.直方图 3.折线图 4.散点图+直线图 5.饼图 6. plot 函数参数 7.图像标注参数 matplotlib 模块 1.条形图 import m ...
- 《Python3 标准库》作者 道格.赫尔曼
Doug Hellmann目前是Racemi公司的一位高级开发人员,也是Python Software Foundation的信息交流主管.从1.4版开始他就一直在做Python编程,曾在大量UNIX ...
- centos7安装dockers
安装Docker我是虚拟机装的Centos7,linux 3.10 内核,docker官方说至少3.8以上,建议3.10以上(ubuntu下要linux内核3.8以上, RHEL/Centos 的内核 ...
- windows和linux开机自启动设置
Windows 1,启动快捷方式 开始>程序>启动 文件夹中拷贝进去需要开机启动的程序快捷方法,此方法需要相应用户登录系统2,注册为服务,设置启动方式为自动 a, sc命令 ...
- node 的path
1.文档:http://nodejs.cn/api/path.html 2.path.normalize() 规范化给定的 path,解析 '..' 和 '.' 片段. 当路径不规范时,用来返回一 ...
- datetime模块的常用总结
datetime模块 datetime模块提供了一些处理日期和时间的标准库.常用的有 datetime timedelta timezone 构造一个datetime对象 datetime() dat ...
- 局域网 ARP 欺骗原理详解
局域网 ARP 欺骗原理详解 ARP 欺骗是一种以 ARP 地址解析协议为基础的一种网络攻击方式, 那么什么是 ARP 地址解析协议: 首先我们要知道, 一台电脑主机要把以太网数据帧发送到同一局域网的 ...
- CentOS6.5卸载自带的Mysql软件
现想要在这家的服务器上安装Mysql集群,发现之前安装操作系统的时候顺便把MySql默认安装,所以需要将它先卸载掉. 1,查找已安装的mysql版本 [root@leader ~]# rpm -qa| ...