2. 程式人生 > 其它 >07-詞雲、樹圖、矩形樹圖、關係圖

07-詞雲、樹圖、矩形樹圖、關係圖

阿新 • • 發佈：2022-05-31
目錄

1. 詞雲worldcloud

1. 案例1

參考連結：https://www.isqqw.com/echartsdetail?id=20718
報錯：Component series.wordCloud not exists. Load it first.
原因：是echarts版本的問題，worldcloud只支援3.0版本，官網上都是4.0版本。
解決：下載echarts-wordcloud.min.js並引入。
下載連結：

<script src="https://www.guanacossj.com/static/js/echarts-wordcloud.min.js"></script>
<script src="https://www.guanacossj.com/static/echarts-3/echarts.js"></script>

版權宣告：本文為CSDN博主「渣渣林」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/qq_48736958/article/details/114281746

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>詞雲圖</title>
</head>

<body>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
    <div id="box" style="height: 600px;width: 1200px"></div>
    <script>
        var myChart = echarts.init(document.getElementById('box'));
        let datas = [{
            name: "雨傘",
            value: 30
        },
        {
            name: "晴天",
            value: 28
        },
        {
            name: "電話",
            value: 24
        },
        {
            name: "手機",
            value: 23
        },
        {
            name: "下雨",
            value: 22
        },
        {
            name: "暴雨",
            value: 21
        },
        {
            name: "多雲",
            value: 20
        },
        {
            name: "雨衣",
            value: 29
        },
        {
            name: "屋簷",
            value: 28
        },
        {
            name: "大風",
            value: 27
        },
        {
            name: "颱風",
            value: 26
        },
        {
            name: "下雪",
            value: 25
        },
        {
            name: "打雷",
            value: 24
        },
        {
            name: "小雨",
            value: 30
        },
        {
            name: "中雨",
            value: 18
        },
        {
            name: "大雨",
            value: 14
        },
        {
            name: "雷陣雨",
            value: 13
        },
        {
            name: "下雪",
            value: 12
        },
        {
            name: "小雪",
            value: 11
        },
        {
            name: "中雪",
            value: 10
        },
        {
            name: "大雪",
            value: 9
        },
        {
            name: "暴雪",
            value: 8
        },
        {
            name: "東風",
            value: 7
        },
        {
            name: "南風",
            value: 6
        },
        {
            name: "西北風",
            value: 5
        },
        {
            name: "北風",
            value: 4
        },
        {
            name: "閃電",
            value: 3
        }
        ];

        var option = {
            tooltip: {
                show: true,
                position: 'top',
                textStyle: {
                    fontSize: 30
                }
            },
            series: [{
                type: "wordCloud",
                // 網格大小，各項之間間距
                gridSize: 60,
                // 形狀 circle 圓，cardioid  心， diamond 菱形，
                // triangle-forward 、triangle 三角，star五角星
                shape: 'circle',
                // 字型大小範圍
                sizeRange: [20, 70],
                // 文字旋轉角度範圍
                rotationRange: [0, 0],
                // 旋轉步值
                // rotationStep: 90,
                // 自定義圖形
                // maskImage: maskImage,
                left: 'center',
                top: 'center',
                right: null,
                bottom: null,
                // 畫布寬
                width: '90%',
                // 畫布高
                height: '80%',
                // 是否渲染超出畫布的文字
                drawOutOfBound: false,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 200 + 55)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#2ac'
                    }
                },
                data: datas
            }]
        };
        myChart.setOption(option);

    </script>
</body>

</html>

執行結果：

2. 案例2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 檔案 -->
    <script src="js/echarts.js"></script>
    <script src="js/echarts-wordcloud.min.js"></script>
</head>

<body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        let datas = [
            { value: '3793', name: '寶玉' },
            { value: '1297', name: '賈母' },
            { value: '1142', name: '鳳姐' },
            { value: '1061', name: '王夫人' },
            { value: '978', name: '老太太' },
            { value: '688', name: '賈璉' },
            { value: '620', name: '黛玉' },
            { value: '602', name: '平兒' },
            { value: '597', name: '寶釵' },
            { value: '587', name: '襲人' }

        ];



        option = {
            tooltip: {
                show: true,
                position: 'top',
                textStyle: {
                    fontSize: 30
                }
            },
            series: [{
                type: "wordCloud",
                // 網格大小，各項之間間距
                gridSize: 60,
                // 形狀 circle 圓，cardioid  心， diamond 菱形，
                // triangle-forward 、triangle 三角，star五角星
                shape: 'circle',
                // 字型大小範圍
                sizeRange: [20, 70],
                // 文字旋轉角度範圍
                rotationRange: [0, 0],
                // 旋轉步值
                // rotationStep: 90,
                // 自定義圖形
                // maskImage: maskImage,
                left: 'center',
                top: 'center',
                right: null,
                bottom: null,
                // 畫布寬
                width: '90%',
                // 畫布高
                height: '80%',
                // 是否渲染超出畫布的文字
                drawOutOfBound: false,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 200 + 55),
                                Math.round(Math.random() * 200 + 55)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#2ac'
                    }
                },
                data: datas
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

執行結果：

2. 在柱狀圖的柱子中間顯示數值

注意：是在series的label中。

series: [
            {
                name: '2011年',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230],
                // 修改第一組柱子為圓角的
                itemStyle: {
                    barBorderRadius: 20
                },
                // 修改柱子間的距離
                barCategoryGap: 80,
                // 修改柱子的寬度
                barWidth: 10,
                // label可以顯示圖形上的文字標籤  如：在柱狀圖上顯示62%
                //顯示柱子內的文字
                label: {
                    show: true,
                    //  在柱子內部顯示inside
                    position: "inside",
                    //文字的顯示形式 {c}會自動地解析為 資料 data裡面的資料
                    formatter: "{c}%"
                }

            },
            {
                name: '2012年',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]

3. 樹圖

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 檔案 -->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        var data = { //節點資料資訊
            "name": "某某大學",
            "children": [
                {
                    "name": "地理與資訊工程學院",
                    "children": [
                        {
                            "name": "地理資訊系統"
                        },
                        {
                            "name": "測繪工程",
                            "value": 3322
                        }
                    ]
                },
                {
                    "name": "計算機與資訊工程學院",
                    "children": [
                        { "name": "物聯網工程", "value": 8833 },
                        { "name": "網路工程", "value": 1732 },
                        { "name": "電腦科學與技術", "value": 3623 }
                    ]
                },
                {
                    "name": "經管學院",
                    "children": [
                        { "name": "財務管理", "value": 4116 }
                    ]
                }
            ]
        };

        option = {
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: '2%',//圖例距離上部百分比
                left: '3%',//圖例距離左端百分比
                data: [{
                    name: 'tree1',
                    icon: 'rectangle'//圖例的圖示形狀為矩形
                }],
            },
            series: [
                {
                    type: 'tree',//樹圖型別
                    name: 'tree1',//樹的名稱
                    data: [data],//樹的資料來源於之前定義的data
                    top: '5%',//樹距離上部的百分比距離
                    left: '7%',//樹距離左部的百分比距離
                    bottom: '2%',//樹距離底部的百分比距離
                    right: '20%',//樹距離右部的百分比距離
                    symbolSize: 20,//節點的大小
                    label: {
                        position: 'top',//非葉子節點的標籤在上部
                        align: 'left'//左對齊
                    },
                    leaves: {
                        label: {
                            position: 'right',//葉子節點的標籤在節點右邊
                            align: 'left'
                        }
                    }
                }
            ]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>
</body>

</html>

執行結果：

4. 矩形樹圖

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 檔案 -->
    <script src="js/echarts.js"></script>
  </head>
  <body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基於準備好的dom，初始化echarts例項
      var myChart = echarts.init(document.getElementById('main'));
    option = {
    series: [{
        type: 'treemap',
        data: [{
            name: 'A',
            value: 10,
            children: [{
                name: 'A1',
                value: 4
            }, {
                name: 'A2',
                value: 6,
                children: [{
                    name: 'A21',
                    value: 2
                },{
                    name: 'A22',
                    value: 4 ,
                    children: [{
                        name: 'A221',
                        value: 3
                    },{
                        name: 'A222',
                        value: 1
                    }]
                }]
            }]
        }, {
            name: 'B',
            value: 20,
            children: [{
                name: 'B1',
                value: 20,
                children: [{
                    name: 'B11',
                    value: 12
                },{
                    name: 'B12',
                    value: 8
                }]
            }]
        }]
    }]
};

      // 使用剛指定的配置項和資料顯示圖表。
      myChart.setOption(option);
    </script>
  </body>
</html>

執行結果：

5. 關係圖

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 檔案 -->
    <script src="js/echarts.js"></script>
  </head>
  <body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基於準備好的dom，初始化echarts例項
      var myChart = echarts.init(document.getElementById('main'));
     var option = {
    title: {
        text: '關係圖',
        top: '12%',
        left: 'center'
    },
    label: {
        normal: {
            show: true
        }
    },
    legend: {
        x: "right",
        show: true,
        top: '20%',
        data: ["男性", "女性"]
    },
    series: [
        {
            type: 'graph',//關係圖
            layout: 'force',//力導向圖的佈局
            symbolSize: 50,//節點大小
            focusNodeAdjacency: true,//滑鼠懸停在節點上時，會隱藏和當前節點非直接連線的節點
            categories: [{ //節點類別
                name: '男性',
                itemStyle: {
                    normal: {
                        color: "#009800",
                    }
                }
            }, {
                name: '女性',
                itemStyle: {
                    normal: {
                        color: "#4592FF",
                    }
                }
            }],
            label: { //節點名稱
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 20 //節點名稱顯示大小
                    },
                }
            },
            force: {
                repulsion: 1000 //節點之間的排斥力
            },
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: "{c}"
                }
            },
            data: [{
                name: 'A',//節點名稱
                category: 0,//節點型別
                draggable: true,//節點是否可拖動
            }, {
                name: 'B',
                category: 1,
                draggable: true,
            }, {
                name: 'C',
                category: 0,
                draggable: true,
            }, {
                name: 'D',
                category: 1,
                draggable: true,
            }, {
                name: 'E',
                category: 0,
                draggable: true,
            }, {
                name: 'F',
                category: 1,
                draggable: true,
            }, {
                name: 'G',
                category: 1,
                draggable: true,
            },{
                name: 'H',
                category: 1,
                draggable: true,
            }],
            links: [{
                source: 0,//關係的起點
                target: 1,//關係的終點
                value: '夫妻'//關係型別
            },{
                source: 0,
                target: 3,
                value: '父子'
            }, {
                source: 0,
                target: 5,
                value: '朋友'
            }, {
                source: 4,
                target: 5,
                value: '同事'
            }, {
                source: 2,
                target: 7,
                value: '夫妻'
            }, {
                source: 1,
                target: 7,
                value: '朋友'
            }, {
                source: 1,
                target: 4,
                value: '朋友'
            }, {
                source: 1,
                target: 6,
                value: '朋友'
            }
            ],
            lineStyle: { //關係連線線的樣式設定
                normal: {
                    opacity: 0.9,//關係連線線的不透明度為0.9
                    width: 3,//關係連線線的寬度
                    curveness: 0//關係連線線的彎曲程度
                }
            }
        }
    ]
};

      // 使用剛指定的配置項和資料顯示圖表。
      myChart.setOption(option);
    </script>
  </body>
</html>

執行結果：

相關推薦

07-詞雲、樹圖、矩形樹圖、關係圖

目錄 1. 詞雲worldcloud 1. 案例1 2. 案例2 2. 在柱狀圖的柱子中間顯示數值 3. 樹圖 4. 矩形樹圖

Tableau學習筆記——（3）基本表、樹形圖、氣泡圖、詞雲

上一小節連結. 目錄 1、基本表1.1 基本表的使用1.2 凸顯表的使用 2、樹形圖2.1 不同型別電影數量與票房

python視覺化大屏-疫情監控圖（4）詞雲、標題、大屏

最終結果 詞雲 資料準備 匯入的庫 from pyecharts import options as opts from pyecharts.charts import Geo

樹圖、矩形樹圖

資料視覺化實驗二 實驗要求 截圖給出的表格資料構建一個樹結構的資料，使用pyecharts繪製一個樹圖和一個矩形樹圖(板塊層級圖)，並對生成的結果圖表進行分析

【12月DW打卡】joyful-pandas - 07 - pandas缺失資料 （缺失值的統計刪除、填充插值、KNN的簡單使用） + 腦圖大綱

缺失資料 腦圖大綱 小結 原文指路：(joyful-pandas)[https://datawhalechina.github.io/joyful-pandas/build/html/目錄/ch7.html#id6]

資料結構-圖程式設計知識詳細總結C++（圖建立、圖遍歷、最短路徑、拓撲排序、關鍵路徑）

一、圖的儲存 鄰接矩陣，適用於節點數不超過1000個的情況： const int MAXV = 1000;

樹的最小支配集、最小點覆蓋、最大獨立集

最小支配集 定義：對於圖 \\(G=(V,E)\\) ，最小支配集指的是從 \\(V\\) 中取儘量少的結點組成一個集合，使得 \\(V\\) 中剩餘的點都與取出來的點有邊相連。

翻轉二叉樹、合併二叉樹（力扣第226、617題）

題目： 翻轉一棵二叉樹。 示例： 輸入： 4 /\\ 27 / \\/ \\ 13 69 輸出： 4 /\\ 72 / \\/ \\ 96 31 分析：

圖論：割點、縮點

tarjan割點和縮點 縮點 點選檢視程式碼塊 /* tarjan演算法解析： https://blog.csdn.net/acmmmm/article/details/16361033

輪播圖的組合控制元件、自定義屬性、自動輪播

　　昨天到今天寫的是輪播的自動播放、無限迴圈、點選事件、也可以自己滑動。

最實用的免費思維導圖軟體哪個最好用、使用者最多

現在的思維導圖其實都還蠻適合程式設計師的，今天給大家介紹幾個我用過並且還覺得使用挺好的思維導圖。

騰訊雲輕量應用伺服器與VPS伺服器、虛擬主機有什麼區別?

騰訊雲輕量應用伺服器與VPS伺服器、虛擬主機有什麼區別? 最近騰訊雲推出了輕量應用伺服器，下面我們繼續來看看輕量應用伺服器與VPS伺服器、虛擬主機有什麼不一樣，主要看看它們的定義和功能對比。

華為 Mate X2 5G 可摺疊手機最新渲染圖放出：內摺疊、窄邊框

10月12日訊息據外媒 LetsGoDigital 今日報道，繼三星推出 Galaxy Z Fold 2 後，華為也將推出一款經過完全地重新設計的可摺疊智慧手機，只是美國的貿易制裁延緩了這一時間罷了。

作業系統之檔案管理：3、檔案目錄(檔案控制塊FCB、多級目錄結構、無環圖目錄結構、索引節點)

3、檔案目錄 思維導圖檔案控制塊FCB目錄操作目錄結構單級目錄結構兩級目錄結構多級目錄結構(樹形目錄結構)無環圖目錄結構

Linux 匯流排、裝置、驅動模型 與 裝置樹

Linux 匯流排、裝置、驅動模型 與 裝置樹 1.匯流排、裝置、驅動模型 本著高內聚、低耦合的原則，Linux 把裝置驅動模型分為了匯流排、裝置和驅動三個實體，這三個實體在核心裡的職責分別如下：

多路查詢樹（2-3 樹、2-3-4 樹、B 樹、B+ 樹）

本文參考自《大話資料結構》 計算機中資料的儲存 一般而言，我們都是在記憶體中處理資料，但假如我們要操作的資料集非常大，記憶體無法處理了，在這種情況下對資料的處理需要不斷地從硬碟等儲存裝置中調

購買一臺阿里雲伺服器，從付錢開始。購買、改密碼、遠端連線

今天把專案做好了，想把專案上線，可以隨時訪問。對此首先要購買一臺伺服器。

如何使用 gnome-screenshot 截圖命令來擷取螢幕、視窗或指定區

2019獨角獸企業重金招聘Python工程師標準>>> 2013-7-26 09:59| 釋出者: linux 日常工作中，我們經常需要擷取螢幕狀態來給其他人看。一般情況下，我們能最直接想到的就是使用鍵盤上的“Pri

重學資料結構（六、樹和二叉樹）

樹結構是一類重要的非線性資料結構。直觀來看，樹是以分支關係定義的層次結構。樹結構在客觀世界廣泛存在，如人類社會的族譜和各種社會組織機構都可用樹來形象表示。

python讀取excel製作柱狀圖和詞雲圖片

問題描述 需要將excel中的一列內容轉換成柱狀圖和詞雲，所以用到了matplotlib/xlrd/wordcloud三個庫來解決問題