ECharts餅圖自定義

阿新 • • 發佈：2019-05-16

準備 ner include nbsp 餅圖分享圖片 success bte ava

[本文出自天外歸雲的博客園]

實現：

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>

參考文章：

1、Echars餅圖如何給label綁定點擊事件？

2、自定義餅圖中間文字和 label

ECharts餅圖自定義

準備 ner include nbsp 餅圖分享圖片 success bte ava [本文出自天外歸雲的博客園] 實現： 1、餅塊可點擊（點擊餅塊跳轉到百度） 2、餅塊自定義標簽顯示（顯示個數、占比） 3、自定義標簽連接線樣式（虛線）前端php代碼如下：

echarts折線圖、條形圖、餅圖自定義顏色

一.設定顏色程式碼 series : [ { name: '收入(單位：萬元)', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[

微信小程式-多層餅圖/包含關係餅圖/自定義餅圖關係模式

效果圖如下 WXML <view class='chart_wrapper'> <view class='chart_wrapper'> <view class='chart_mark'> <view class

echarts 折線圖自定義顏色與修改legend顏色

fff none split slab art 自定義顏色 series name har option4 = { title : { text: ‘‘, subtext: ‘‘ }, color:[‘#2db7f5‘,‘#ff

利用echarts highcharts 實現自定義地圖關系圖效果側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c

Echarts餅圖中間顯示自定義內容及解決柱狀圖橫座標文字過多顯示不全的問題

1.Echarts餅狀圖中間自定義顯示內容（文字、圖片）實現這種效果主要是通過graphic中的物件屬性type和style實現，type設定為‘text’，則style中可以設定文字內容，type設定為‘image’,則style中可以設定圖片內容，以下是完整程式碼：

echart 餅狀圖自定義樣式

name nbsp ini data get ems char echarts blur echarts.init(document.getElementById(‘WaterCategoryStatistics‘)).setOption({ 　　legend: { 　　

Android 圓圈統計圖自定義控制元件(支付寶餅圖)

1.控制元件效果圖 2.知識點（1）圖形（2）動畫：（1）圓餅填充動畫（2）圓點放大動畫（3）折線繪製動畫（3）上部字型延折線移動動畫（4）下部字型從下移動至上動畫以上動畫實現都是用ValueAnimator，在Valu

Echarts餅圖更改顏色、顯示數據且換行

gen val tex png es2017 trigge nbsp charts 代碼 var option = { title : { text: ‘數據來源‘, x:‘center‘ }, tooltip : { tri

解決echarts餅圖顯示百分比，和顯示內容字體及大小

fonts mat 好的 pan har tle title log option // 基於準備好的dom，初始化echarts實例 var pieEchart = echarts.init(document.getElementById(‘pi

解決echarts餅圖不顯示資料為0的資料

如圖所示餅圖資料為0但是還是會顯示lableline和lable 解決方法 var echartData = [{ value: data_arry[0]==0?null:data_arry[0], name: '常駐人口' }] 傳資料時判斷資料是否為空，如果為空的話就填入null

自動輪播圖+自定義小圓點

//佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/

【程式碼】用Python玩轉微信，echarts餅圖，WordCloud雲圖，自動回覆訊息，好友地區熱圖

參考用Python玩轉微信（一），做了一些修改 import re import os import time import itchat from echarts import Echart, Legend, Pie import wordcloud from wordcloud im

.net圖表之ECharts隨筆07-自定義系列(多邊形)

搞了一天多，才勉強搞出了一個不緊湊的六邊形統計圖，是真的菜。這裡ECharts的用法與06說的同一種，直接使用帶all的js 先上個效果圖，用面積來表示人數的多少 1. 引數option的tooltip和title還是一樣設定 2. 還有一個grid，這是用來設定y軸的實際長度的

echarts餅圖

1、引入js <script src="echarts.min.js"></script> 2、js <div id="main" style="width: 600px;height: 400px;background: #F2F2F2;"&g

echarts餅圖角度起始角度位置和生長方向

想改變餅圖生長起始角度，用startAngle屬性，但是找不到餅圖的起始位置和生長方向，研究半天終於找到了舉個栗子資料： series: [{ name:‘專案’, type:‘pie’, radius: [‘32%’, ‘50%’], minAngle:

echarts餅圖如何設定懸浮提示框在中間顯示?

http://www.echartsjs.com/option.html#tooltip.position tooltip.position string, Array, Function 提示框浮層的位置，預設不設定時位置會跟隨滑鼠的位置。可選：

echarts 餅圖結合thinkphp 的使用

首先看看echars官網上餅圖用法的例項（如下圖）：然後來說說這個餅圖結合Thinkphp的用法。思路是這樣的： 1.控制器先查詢出要的資料包括：legend裡data的資料，series裡data的資料。 2.把得到的資料處理成json資料，分配到檢視。 3.利用分

echarts餅圖不顯示資料為0的資料

首先闡述下為什麼會有這個需求，這個和echarts自身的顯示效果有關。如果你選擇的展示圖形為餅圖，然後你的資料裡有一條資料為0，那麼展示的資料就為一條直線，看上去效果並不好，會很突兀。當然如果你的業務需求就算是直線的話也要展示出來，那麼下面的文章你可以略過了，對你畫圖

Echarts餅圖柱形圖調整文字大小（java程式碼）

1.餅圖： Pie pie = new Pie(); pie.center("50%", "50%").radius(100); ItemStyle style = new ItemStyle(); Normal nor

ECharts餅圖自定義

相關推薦