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,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
随机推荐
- lavavel 定时任务 (command的第二个参数)
之前好像没有写过,记录一下 $schedule->command()方法 第一个参数不用说,可以传纯字符串或者类::class,不过第二个参数确很少人提到 /** * Add a new Art ...
- Httpd服务入门知识-Httpd服务常见配置案例之Apache的工作做状态status页面
Httpd服务入门知识-Httpd服务常见配置案例之Apache的工作做状态status页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.status功能概述 status页 ...
- go mod开发模式设置
文章要解决的仅仅是一个问题 当你使用go get 无论如何get不到所需的包的问题 第一步就是下载goland 新手极其推荐goland,因为直接使用gland几乎没有挫败感,使用其他工具可能要折腾好 ...
- python基础知识-列表的排序问题
def main(): f=['orange','zoo','apple','internationalization','blueberry'] #python 内置的排序方式默认为升序(从小到大) ...
- Can总线上的电平及物理层仲裁
CAN总线采用差分信号传输,通常情况下只需要两根信号线(CAN-H和CAN-L)就可以进行正常的通信.在干扰比较强的场合,还需要用到屏蔽地即CAN-G(主要功能是屏蔽干扰信号),CAN协议推荐用户使用 ...
- 公司框架-关于verifyInputgbg（）方法的使用注意事项
verifyInputgbg这个方法的主要作用是:一次校验页面上的所有非空的比录项. 今天在使用这个方法的时候,遇到了这样一个问题,自己在页面上明明都录入有值,但是在还是报页面的录入信息不完整.阻断. ...
- ubuntu及Cenos国内镜像下载
打开:https://man.linuxde.net/download/ CentOS 7提供了三种ISO镜像文件的下载: DVD ISO 标准安装版,一般下载这个就可以了(推荐) Everythin ...
- 使用grok exporter 做为log 与prometheus 的桥
grok 是一个工具,可以用来解析非结构化的日志文件,可以使其结构化,同时方便查询,grok 被logstash 大量依赖 同时社区也提供了一个prometheus 的exporter 可以方便的进行 ...
- 洛谷 P3371【模板】单源最短路径（弱化版）
题面 既然是模板, 那就直接贴代码? 两种思路 1.迪杰斯特拉 #include <cstdio> #include <cstring> #include <iostre ...
- cogs 920. [東方S1] 琪露诺
二次联通门 : cogs 920. [東方S1] 琪露诺 /* cogs 920. [東方S1] 琪露诺 dp 方程为dp[i] = max (dp[i - L], dp[i - L + 1] ... ...