Echarts：環狀圖

阿新 • • 發佈：2018-11-26

效果圖：
這裡寫圖片描述
灰色為佔比部分，藍色未佔比
原始碼如下：
需引入jquery.min.js和echarts.min.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Echarts-環狀百分比圖</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" 
>
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div style="width: 500px;height:280px;" id="pie1">

    </div>
</body>
<script>
    PercentPie.prototype.init = function () {
        var 
 _that = this;
        var option = {
            backgroundColor: _that.backgroundColor,
            color: _that.color,
            series: [{
                name: '來源',
                type: 'pie',
                radius: ['60%', '75%'],
                avoidLabelOverlap: false,
                hoverAnimation: false 
,
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        textStyle: {
                            fontSize: _that.fontSize,
                            fontWeight: 'bold'
                        },
                        formatter: '{b}\n{c}%'
                    }
                },
                data: [{
                        value: _that.value,
                        name: _that.name,
                        label: {
                            normal: {
                                show: true
                            }
                        }
                    },
                    {
                        value: 100 - _that.value,
                        name: ''
                    }
                ]
            }]
        };
        echarts.init(_that.domEle).setOption(option);
    };

    /* 全省蓄水佔比 */
    var option1 = {
            value: 20, //百分比,必填
            name: '', //必填
            title: '',
            backgroundColor: null,
            color: ['#EAEAEA', '#6CAEE8'],
            fontSize: 16,
            domEle: document.getElementById("pie1") //必填
        },
        percentPie1 = new PercentPie(option1);
    percentPie1.init();

    function PercentPie(option) {
        this.backgroundColor = option.backgroundColor || '#fff';
        this.color = option.color || ['#EAEAEA', '#6CAEE8'];
        this.fontSize = option.fontSize || 12;
        this.domEle = option.domEle;
        this.value = option.value;
        this.name = option.name;
    }
</script>

</html>

Echarts：環狀圖

效果圖：灰色為佔比部分，藍色未佔比原始碼如下：需引入jquery.min.js和echarts.min.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g

Echarts 簡單報表系列二：折線圖

pic mage ems utf value ott fun nbsp return <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Echarts報表：折線圖

參考：官方教程配置項最近使用折線圖和餅圖居多，使用時一般要修改其預設格式 ECharts 3 開始不再強制使用 AMD 的方式按需引入，程式碼裡也不再內建 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 scr

項目期復習總結1：背景圖合並，hack，瀏覽器內核前綴，偽類after before

標準 after 不同 fixed cli 條件人員 tle ble 文件夾： 1、背景圖合並和CSS Spirit 2、PS基本快捷鍵 3、hack技術基本書寫，為什麽不用？ 4、內核前綴 5、偽類afterbefore 1、背景

讓數據更精準，神器標配：熱圖

uem 用戶體驗你是否還在因為無法通過大數據精準分析需求而煩惱？你是否還在因為無法直觀呈現用戶的行為而頭大？你是否還在因為怎麽優化頁面布局而愁眉苦臉？正所謂“一圖勝千言”，一張色彩繽紛的圖片甚至可以給人帶來意想不到的收獲，作為監控利器，其新功能“熱圖”可以為您解決這些麻煩!一、掌握用戶習慣，優化界面

Pro Android學習筆記 ActionBar（1）：Home圖標區

ces tom 新的方便 find rac vertica lba manifest ?? Pro Android學習筆記（四八）：ActionBar（1）：Home圖標區 2013年03月10日 ? 綜合 ? 共 3256字 ? 字號小中大 ? 評論關閉

如何實現echarts組織結構圖節點的收縮

點名 3.0 不讓信息修改 conf strong 值引用 option echarts本身沒有組織結構圖的節點收縮功能，因為項目需求要用到此功能。引入的echarts必須是2版本的，因為3.0取消了對組織結構圖的支持。下載2版本的源碼，找到關於onclick事件那部

在Echarts 柱形圖的單擊事件中寫入自定義的參數

cnblogs img ges == innerhtml .com echart 通過 code

echarts 柱狀圖

點擊 tooltip orm var mar txt param java tom $(document).ready(function () { var myChart = echarts.init(document.getElementById(

ECHARTS柱形圖和餅圖數值顯示

echartsECHARTS柱形圖和餅圖數值顯示，官方文檔寫的很不錯，這裏自己單獨梳理一下，以後可能會用的到。1、柱形圖數值顯示在option添加： label:{ normal:{ show: true, position: ‘to

python—networkx：依據圖的權重繪圖

大小 san ons 繪圖 add usr mil auth sni 首先輸入邊和邊的權重，隨後畫出節點位置。依據權重大小劃分實邊和虛邊 #coding:utf-8 #!/usr/bin/env python """ An exa

Halcon學習之三：有關圖像通道的函數

spa com detail too pan targe 個數 word pop 黑白攝像機會返回每個像素所對應的能量采用結果，這些結果組成了一幅單通道灰度值圖像，而對於RGB彩色攝像機，它將返回每個像素所對應的三個采樣結果，也就是一幅三通道圖像。下面這些是與圖像通道有關的

八連塊問題：統計圖中相相連黑色區域的個數

oba 表白 class glob name python實現檢查 check ntb 一個n*n個方塊的圖，每個方塊是白色或者黑色。統計出相連的黑色塊區域有多少個相連：兩個黑色塊有公共頂點或者公共邊輸入0代表白色 1代表黑色測試用例： 1 0 0

小工具：截圖&簡單圖像處理

math rgb 最大值 3-9 width work 小工具 case int 一、程序運行截圖二、獲取屏幕截圖的方法首先知道我們可以通過Screen.PrimaryScreen.Bounds獲取到當前整個屏幕，再利用Bitmap和Graphics就可

echarts柱狀圖修改背景線為網格線、去掉刻度標簽、鼠標懸停在柱條上時變色、柱條圓角弧度、

false show 變色 with echarts animation dash das split option = { color: [‘red‘],//修改柱條顏色 tooltip : { triggerOn:‘mousemove‘ }, grid: { left:

數據庫面試系列之二：視圖

名稱獨立建立數據庫有用圖的定義適合場景多個視圖的定義：視圖是一個或者多個基本表（或者視圖）導出的表。視圖是一張虛表，視圖的數據並不實際存儲視圖的優點： 1.視圖可以簡化用戶的操作 2.視圖可以讓用戶從多個角度來看待同一數據 3.視圖提供一定的數據邏輯獨

BZOJ 1191 [HNOI2006]超級英雄Hero：二分圖匹配匈牙利算法

als pre edge ont com def false tar fin 題目鏈接：http://www.lydsy.com/JudgeOnline/problem.php?id=1191 題意：　　有m道題，每答對一題才能接著回答下一個問題。　　你一道題都不會，但

模板：二分圖染色+判定

vector 二分圖判定一次二分 color nbsp logs 如果 int 1 //鄰接表dfs二分圖判定 2 vector <int> G[N]; 3 int col[N]; 4 5 //頂點染色c,-c 6 bool df

Tarjan算法：求解圖的割點與橋（割邊）

none 特殊說明 align 定義兩個 bsp tom 還需要簡介：割邊和割點的定義僅限於無向圖中。我們可以通過定義以蠻力方式求解出無向圖的所有割點和割邊,但這樣的求解方式效率低。Tarjan提出了一種快速求解的方式，通過一次DFS就求解出圖中所有的割點和割邊。

odoo10學習筆記十一：視圖綜述

當前存在 ren name屬性簡寫 ann idg 重寫 ogre 原文地址：http://www.cnblogs.com/ygj0930/p/7150983.html 一：視圖標簽等公共結構 name (必選) 用於通過名字查找標簽 model：與view相關聯的

Echarts：環狀圖

相關推薦