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,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
随机推荐
- backtrace() returns only one stack frame
参考: 在Linux中如何利用backtrace信息解决程序崩溃的问题 linux 打印堆栈方法 https://devtalk.nvidia.com/default/topic/987279/jet ...
- Mac原型动画设计软件Drama创建3D图层的注意事项，你知道吗？
Drama创建3D图层的注意事项:要跨层保留3D空间,可以使用组.它们具有保留子图层和嵌套组的3D空间的特殊功能. Drama支持通过在三维空间中定位和旋转2D图层来创建3D内容.要在3D空间中定位图 ...
- HTML那些标签已废弃，被代替
表单:cellpadding,cellspacing属性:已废弃, 替代者: table { border-collapse:collapse; } table, td, th { border:1p ...
- Ueditor 自动设置上传图片的宽度或高度
Uedior在上传图片的生活,需要自动设置上传图片的宽度或高度属性.该方法只能用于多图上传组件,单图上传无法使用. 该方法基于 ueditor 1.4.3 版本制作: 1.添加属性字段,在config ...
- 纯数据结构Java实现(11/11)(散列)
欢迎访问我的自建博客: CH-YK Blog.
- 计算机 KB,MB,GB,TB,PB,EB 计算
ASCII码:一个英文字母(不分大小写)占一个字节的空间.一个二进制数字序列,在计算机中作为一个数字单元,一般为8位二进制数.换算为十进制,最小值-128,最大值127.如一个ASCII码就是一个字节 ...
- 浅谈JS之Error对象
[前言] 本文主要介绍下JS的Error name相关属性. 当 JS 引擎执行 JS代码时,会发生各种错误. ①语法错误,通常是程序员造成的编码错误或错别字: ②拼写错误或语言中缺少的功能(可能 ...
- Spring Boot 2实现分布式锁——这才是实现分布式锁的正确姿势！
参考资料 网址 Spring Boot 2实现分布式锁--这才是实现分布式锁的正确姿势! http://www.spring4all.com/article/6892
- 第一个python&selenium自动化测试实战项目
说明:本项目采用流程控制思想,未引用unittest&pytest等单元测试框架 一.项目介绍 目的 测试某官方网站登录功能模块可以正常使用 用例 1.输入格式正确的用户名和正确的密码,验证是 ...
- OpenGL是什么?GPU是什么？
一.GPU与CPU CPU是处理基本算数运算的单元:它处理的数据是数:整型.浮点型.bool等等: GPU是处理图形运算的单元:它处理的数据是图形的数据矩阵: GPU的输入是一个和多个图形,输出是 ...