ECharts餅圖自定義

時間 2019-11-06
標籤 echarts 餅圖自定義简体版
原文原文鏈接
[本文出自天外歸雲的博客園]javascript
實現：php
一、餅塊可點擊（點擊餅塊跳轉到百度）css
二、餅塊自定義標籤顯示（顯示個數、佔比）html
三、自定義標籤鏈接線樣式（虛線）前端
前端php代碼以下：java
<!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>
參考文章：ajax
一、Echars餅圖如何給label綁定點擊事件？json
二、自定義餅圖中間文字和 labelsegmentfault
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。