[本文出自天外归云的博客园]

实现：

1、饼块可点击（点击饼块跳转到百度）

2、饼块自定义标签显示（显示个数、占比）

3、自定义标签连接线样式（虚线）

前端php代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title><?php echo $title; ?></title>
  6.     <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  7.     <?php include "commonHead.php"; ?>
  8. </head>
  9. <body>
  10. <div class="container" style="margin-top: 10%">
  11.     <!-- 饼图 -->
  12.     <div id="myPie" style="width: 800px;height:600px;"></div>
  13. </div>
  14. </body>
  15. </html>
  16. <style>
  17. </style>
  18. <script type="text/javascript">
  19.     // 制作饼图上的标签
  20.     function makeLabel(labelValue, labelRate) {
  21.         var label = {
  22.             normal: {
  23.                 label: {
  24.                     show: false
  25.                 },
  26.                 labelLine: {
  27.                     show: false
  28.                 },
  29.                 formatter: [
  30.                     '{title|{b}}{abg|}',
  31.                     '  {head|}{valueHead|个数}{rateHead|占比}',
  32.                     '{hr|}',
  33.                     '  {head|}{value|' + labelValue + '}{rate|' + labelRate + '}'
  34.                 ].join('\n'),
  35.                 backgroundColor: '#eee',
  36.                 borderColor: '#777',
  37.                 borderWidth: 1,
  38.                 borderRadius: 4,
  39.                 rich: {
  40.                     title: {
  41.                         color: '#eee',
  42.                         align: 'center'
  43.                     },
  44.                     abg: {
  45.                         backgroundColor: '#333',
  46.                         width: '100%',
  47.                         align: 'right',
  48.                         height: 25,
  49.                         borderRadius: [4, 4, 0, 0]
  50.                     },
  51.                     Sunny: {
  52.                         height: 30,
  53.                         align: 'left'
  54.                     },
  55.                     head: {
  56.                         color: '#333',
  57.                         height: 24,
  58.                         align: 'left'
  59.                     },
  60.                     hr: {
  61.                         borderColor: '#777',
  62.                         width: '100%',
  63.                         borderWidth: 0.5,
  64.                         height: 0
  65.                     },
  66.                     value: {
  67.                         width: 20,
  68.                         padding: [0, 20, 0, 30],
  69.                         align: 'left'
  70.                     },
  71.                     valueHead: {
  72.                         color: '#333',
  73.                         width: 20,
  74.                         padding: [0, 20, 0, 30],
  75.                         align: 'center'
  76.                     },
  77.                     rate: {
  78.                         width: 40,
  79.                         align: 'right',
  80.                         padding: [0, 10, 0, 0]
  81.                     },
  82.                     rateHead: {
  83.                         color: '#333',
  84.                         width: 40,
  85.                         align: 'center',
  86.                         padding: [0, 10, 0, 0]
  87.                     }
  88.                 }
  89.             }
  90.         };
  91.         return label;
  92.     }
  93.  
  94.     //画label连接线
  95.     function makeLabelLine(length, length2) {
  96.         var labelLine = {
  97.             normal: {
  98.                 show: true,
  99.                 length: length,
  100.                 length2: length2,
  101.                 lineStyle: {
  102.                     type: 'dashed',
  103.                     width: 2
  104.                 }
  105.             }
  106.         };
  107.         return labelLine;
  108.         // 原文：https://blog.csdn.net/LzzMandy/article/details/84875146
  109.     }
  110.  
  111.     /*
  112.     画饼图
  113.     用到了tooltip：https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip
  114.     */
  115.     function drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays, moreThanThreeDays) {
  116.         // 基于准备好的dom，初始化echarts实例
  117.         var myPie = echarts.init(document.getElementById('myPie'));
  118.         // 开发周期饼图数据
  119.         var pieOption = {
  120.             title: {
  121.                 text: pieTitle,
  122.                 subtext: pieSubTitle,
  123.                 left: 'center'
  124.             },
  125.             tooltip: {
  126.                 trigger: 'item',
  127.                 formatter: "{a} <br/>{b} : {c} ({d}%)"
  128.             },
  129.             legend: {
  130.                 orient: 'vertical',
  131.                 left: 'left',
  132.                 data: ['1天以内', '1到2天', '2到3天', '大于3天']
  133.             },
  134.             series: [
  135.                 {
  136.                     name: '占比',
  137.                     type: 'pie',
  138.                     radius: '55%',
  139.                     center: ['50%', '60%'],
  140.                     data: [
  141.                         {
  142.                             value: innerOneDay,
  143.                             name: '1天以内',
  144.                             label: makeLabel("{c}", "{d}%"),
  145.                             labelLine: makeLabelLine(0, 50)
  146.                         },
  147.                         {
  148.                             value: oneToTwoDays,
  149.                             name: '1到2天',
  150.                             label: makeLabel("{c}", "{d}%"),
  151.                             labelLine: makeLabelLine(30, 50)
  152.                         },
  153.                         {
  154.                             value: twoToThreeDays,
  155.                             name: '2到3天',
  156.                             label: makeLabel("{c}", "{d}%"),
  157.                             labelLine: makeLabelLine(30, 50)
  158.                         },
  159.                         {
  160.                             value: moreThanThreeDays,
  161.                             name: '大于3天',
  162.                             label: makeLabel("{c}", "{d}%"),
  163.                             labelLine: makeLabelLine(90, 50)
  164.                         }
  165.                     ],
  166.                     itemStyle: {
  167.                         emphasis: {
  168.                             shadowBlur: 10,
  169.                             shadowOffsetX: 0,
  170.                             shadowColor: 'rgba(0, 0, 0, 0.5)'
  171.                         }
  172.                     }
  173.                 }
  174.             ]
  175.         };
  176.         myPie.setOption(pieOption);
  177.         myPie.on('click', 'series.pie.label', function () {
  178.             window.open("http://www.baidu.com");
  179.         });
  180.     }
  181.  
  182.     // 获取饼图数据
  183.     function getPieData(iterationId, sDate, stType, pieTitle, pieSubTitle) {
  184.         // 标准GET请求ajax写法
  185.         $.ajax({
  186.             url: "/cloud/tools/getDevOpsPieData",
  187.             type: "GET",
  188.             data: {
  189.                 "iterationId": iterationId,
  190.                 "sDate": sDate,
  191.                 "stType": stType,
  192.                 "pieTitle": pieTitle,
  193.                 "pieSubTitle": pieSubTitle
  194.             },
  195.             contentType: "application/json; charset=utf-8",
  196.             dataType: "json",
  197.             success: function (result) {
  198.                 console.log(result);
  199.                 var pieTitle = result["pieTitle"];
  200.                 var pieSubTitle = result["pieSubTitle"];
  201.                 var innerOneDay = result["innerOneDay"];
  202.                 var oneToTwoDays = result["oneToTwoDays"];
  203.                 var twoToThreeDays = result["twoToThreeDays"];
  204.                 var moreThanThreeDays = result["moreThanThreeDays"];
  205.                 drawPie(pieTitle, pieSubTitle, innerOneDay, oneToTwoDays, twoToThreeDays, moreThanThreeDays);
  206.             }
  207.         });
  208.     }
  209.  
  210.     $(function () {
  211.         var iterationId = "<?php echo $iterationId;?>";
  212.         var sDate = "<?php echo $sDate;?>";
  213.         var stType = "<?php echo $stType;?>";
  214.         var pieTitle = "<?php echo $pieTitle;?>";
  215.         var pieSubTitle = "<?php echo $pieSubTitle;?>";
  216.         getPieData(iterationId, sDate, stType, pieTitle, pieSubTitle)
  217.     });
  218. </script>

参考文章：

1、Echars饼图如何给label绑定点击事件？

2、自定义饼图中间文字和 label

ECharts饼图自定义的更多相关文章

  1. ECharts饼图试玩

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

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

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

  3. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  4. ECharts饼图制作分析

    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...

  5. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  7. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  8. echarts饼图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

随机推荐

  1. MAC安装配置maven环境变量

    1.下载maven包: 下载链接:

  2. layui 自定义字体图标 扩展

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...

  3. python笔记--------二

    tolist()方法: 列表可通过array()转换为数组或mat()转为矩阵 而tolist()可把数组对象或矩阵对象转为列表 数组对象: array([[1, 2, 3], [1, 2, 3]]) ...

  4. 服务器安装python3环境

    服务器安装python3环境 先安装相关包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel re ...

  5. k8s如何访问pod

    1. 通过 Service 访问 Pod 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 control ...

  6. JVM垃圾回收器理论分析与详解【纯理论】

    继续上次[https://www.cnblogs.com/webor2006/p/10740084.html]的理论继续..有点吐血的感觉,都不知道学了这么一大堆理论有何实际意义,本身JVM就是个理论 ...

  7. Mincut 最小割 (BZOJ1797+最小割+tarjan)

    题目链接 传送门 思路 根据题目给定的边跑一边最大流,然后再在残留网络上跑\(tarjan\). 对于每一条边有: 如果它是非满边,那么它一定不是最小割集里面的边: 如果\(c[u[i]] \not= ...

  8. Beta冲刺(6/7)——2019.5.27

    所属课程 软件工程1916|W(福州大学) 作业要求 Beta冲刺(6/7)--2019.5.27 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪万里 ...

  9. Excel——读取——导出目录

    /** * 导出Excel文件到具体的目录 * <一句话功能简述> * <功能详细描述> * @param fileName 导出的文件名 * @param sheetName ...

  10. HTTP1.0、HTTP1.1、HTTP2.0的关系和区别

    一.汇总对比 HTTP1.0 无状态.无连接HTTP1.1 持久连接请求管道化增加缓存处理(新的字段如cache-control)增加Host字段.支持断点传输等(把文件分成几部分)HTTP2.0 二 ...