ECharts饼图自定义
[本文出自天外归云的博客园]
实现：
1、饼块可点击（点击饼块跳转到百度）
2、饼块自定义标签显示（显示个数、占比）
3、自定义标签连接线样式（虚线）
前端php代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<?php include "commonHead.php"; ?>
</head>
<body>
<div class="container" style="margin-top: 10%">
<!-- 饼图 -->
<div id="myPie" style="width: 800px;height:600px;"></div>
</div>
</body>
</html>
<style>
</style>
<script type="text/javascript">
// 制作饼图上的标签
function makeLabel(labelValue, labelRate) {
var label = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
formatter: [
'{title|{b}}{abg|}',
' {head|}{valueHead|个数}{rateHead|占比}',
'{hr|}',
' {head|}{value|' + labelValue + '}{rate|' + labelRate + '}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left'
},
head: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
};
return label;
} //画label连接线
function makeLabelLine(length, length2) {
var labelLine = {
normal: {
show: true,
length: length,
length2: length2,
lineStyle: {
type: 'dashed',
width: 2
}
}
};
return labelLine;
// 原文：https://blog.csdn.net/LzzMandy/article/details/84875146
} /*
画饼图
用到了tooltip：https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip
*/
function drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays, moreThanThreeDays) {
// 基于准备好的dom，初始化echarts实例
var myPie = echarts.init(document.getElementById('myPie'));
// 开发周期饼图数据
var pieOption = {
title: {
text: pieTitle,
subtext: pieSubTitle,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['1天以内', '1到2天', '2到3天', '大于3天']
},
series: [
{
name: '占比',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{
value: innerOneDay,
name: '1天以内',
label: makeLabel("{c}", "{d}%"),
labelLine: makeLabelLine(0, 50)
},
{
value: oneToTwoDays,
name: '1到2天',
label: makeLabel("{c}", "{d}%"),
labelLine: makeLabelLine(30, 50)
},
{
value: twoToThreeDays,
name: '2到3天',
label: makeLabel("{c}", "{d}%"),
labelLine: makeLabelLine(30, 50)
},
{
value: moreThanThreeDays,
name: '大于3天',
label: makeLabel("{c}", "{d}%"),
labelLine: makeLabelLine(90, 50)
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myPie.setOption(pieOption);
myPie.on('click', 'series.pie.label', function () {
window.open("http://www.baidu.com");
});
} // 获取饼图数据
function getPieData(iterationId, sDate, stType, pieTitle, pieSubTitle) {
// 标准GET请求ajax写法
$.ajax({
url: "/cloud/tools/getDevOpsPieData",
type: "GET",
data: {
"iterationId": iterationId,
"sDate": sDate,
"stType": stType,
"pieTitle": pieTitle,
"pieSubTitle": pieSubTitle
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result);
var pieTitle = result["pieTitle"];
var pieSubTitle = result["pieSubTitle"];
var innerOneDay = result["innerOneDay"];
var oneToTwoDays = result["oneToTwoDays"];
var twoToThreeDays = result["twoToThreeDays"];
var moreThanThreeDays = result["moreThanThreeDays"];
drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays, moreThanThreeDays);
}
});
} $(function () {
var iterationId = "<?php echo $iterationId;?>";
var sDate = "<?php echo $sDate;?>";
var stType = "<?php echo $stType;?>";
var pieTitle = "<?php echo $pieTitle;?>";
var pieSubTitle = "<?php echo $pieSubTitle;?>";
getPieData(iterationId, sDate, stType, pieTitle, pieSubTitle)
});
</script>
参考文章：
ECharts饼图自定义的更多相关文章
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- ECharts饼图制作分析
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
- echarts 饼图 + 全屏显示
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- echarts饼图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
随机推荐
- Ansible入门笔记（2）之常用模块
目录 Ansible常用模块 1.1.Ansible Ad-hoc 1.2.Ansible的基础命令 1.3.常用模块 Ansible常用模块 1.1.Ansible Ad-hoc 什么事ad-hoc ...
- 李代数E8 的根系 python绘图
安装前需安装依赖:(针对Centos7) yum install -y cairo pip install cairocffi 源代码:https://github.com/neozhaoliang/ ...
- Linux必知必会--vmstat
视野.格局.胸怀.魄力 ---无 参考资料:https://man.linuxde.net/vmstat http://www.ha97.com/4512.html vmstat命令的含义为显示虚拟内 ...
- HashMap中的putIfAbsent使用示例
原文:https://blog.csdn.net/k3108001263/article/details/83720445 如果不存在key,则添加到HashMap中,跟put方法相似 如果存在key ...
- SpringCloud2.0 Eureka Server 服务中心 基础教程(二)
1.创建[服务中心],即 Eureka Server 1.1.新建 Spring Boot 工程,工程名称: springcloud-eureka-server 1.2.工程 pom.xml 文件添加 ...
- python的sort和sorted
sort 只适用于列表,返回列表类型. sorted 可适用于字典,元组和列表. 使用方法 sort的使用方法是list.sort(cmp=None, key=None, reverse=False) ...
- vue-router有哪几种导航钩子？（具体怎么用的）
三种,第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截.第二种:组件内的钩子第三种:单独路由独享组件 .
- Spring Boot 日志管理
Spring Boot 日志管理 网址 Spring Boot 日志管理 http://blog.didispace.com/springbootlog/ Spring Boot快速入门(四)--日志 ...
- 题解：[HAOI2008]下落的圆盘
时空限制:1000ms / 128MB 原题链接: 洛谷 bzoj Description 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红 色线条的 ...
- CodeForces - 666E: Forensic Examination (广义SAM 线段树合并)
题意:给定字符串S,然后M个字符串T.Q次询问,每次给出(L,R,l,r),问S[l,r]在L到R这些T字符串中,在哪个串出现最多,以及次数. 思路:把所有串建立SAM,然后可以通过倍增走到[l,r] ...