echarts學習筆記(2) ---- 設定單頁面多張圖表

阿新 • • 發佈：2019-01-20

上一篇介紹了echarts 使用模組化單檔案的引入，如果要在一個頁面中新增多張圖的話，怎麼辦呢？

這裡向大家介紹一種簡單的方法：

建立多個div， id= 'main'.

    <div class="chart">
        <div id="main"><span>1</span></div>
        <div id="main"><span>2</span></div>
        <div id="main"><span>3</span></div>
        <div id="main"><span>4</span></div>
        <div id="main"><span>5</span></div>
        <div id="main"><span>6</span></div>
    </div>

在javascript中取到所有 id ='main'

var myChart = [];
var domMain = $("[id = main]");

然後把圖表的設定和setoption都放在function裡面

這裡把option作為一個object，儲存了所有表格的配置

最後用一個loop來set好圖表

    function (ec,defaultTheme){
        echarts = ec;
        var option = {
            0:{
                backgroundColor: '#BCEE68',

                title : {
                    text: '性別'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['男','女']
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'性別',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:56, name:'男'},
                            {value:32, name:'女'},
                        ]
                    }
                ]
            },
            1:{
                backgroundColor: '#AEEEEE',
                title : {
                    text: '年齡',
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['20-29','30-39','40-49','50-59','60-']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'數量',
                        type:'bar',
                        data:[20, 25, 18, 19, 11],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            },
            2:{
                backgroundColor: '#FFF68F',

                title : {
                    text: '型別',
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['第一等','第二等']
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'型別',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:56, name:'<span style="font-family: Arial, Helvetica, sans-serif;">第一等</span>'},
                            {value:36, name:'第二等'},
                        ]
                    }
                ]       
            },
            3: {
                backgroundColor: '#FFBBFF',
                title : {
                    text: '職業',
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['<span style="font-family: Arial, Helvetica, sans-serif;">職業1</span><span style="font-family: Arial, Helvetica, sans-serif;">','職業2','職業2','職業3','職業4','其他'],</span>
                    orient : 'vertical',
                    x : 'right',
                },
                calculable : true,
                series : [
                    {
                        name:'職業',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:12, name:'職業1'},
                            {value:32, name:'職業2'},
                            {value:23, name:'職業3'},
                            {value:12, name:'職業4'},
                            {value:13, name:'其他'},
                        ]
                    }
                ]       
            },
            4:{
                backgroundColor: '#CDCD00',
                title : {
                    text: '型號',
                },
                tooltip : {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['A','C','D','R','F','O']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'數量',
                        type:'bar',
                        data:[19, 49, 18, 25, 14,43],
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        }
                    }
                ]       
            },
            5:{
                title : {
                    text: '種類'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['H1','H2','H3','H4','H5','H6','H7'],
                    orient : 'vertical',
                    x : 'right',    
                },
                calculable : true,
                series : [
                    {
                        name:'種類',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                            emphasis : {
                                label : {
                                    show : true,
                                    position : 'center',
                                    textStyle : {
                                        fontSize : '13',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                            {value:17, name:'H1'},
                            {value:23, name:'H2'},
                            {value:14, name:'H3'},
                            {value:8, name:'H4'},
                            {value:18, name:'H5'},
                            {value:10, name:'H6'},
                            {value:10, name:'H7'},
                        ]
                    }
                ]
                           
            } 
        };
        for (var i = 0, l = domMain.length; i < l; i++) {
            myChart[i] = echarts.init(domMain[i]);
            myChart[i].setOption(option[i]);
            require(['theme/infographic'], function(tarTheme){
                myChart[i].setTheme(tarTheme);
            })
        }
    }
);

echarts學習筆記(2) ---- 設定單頁面多張圖表

上一篇介紹了echarts 使用模組化單檔案的引入，如果要在一個頁面中新增多張圖的話，怎麼辦呢？這裡向大家介紹一種簡單的方法：建立多個div， id= 'main'. <div class="chart"> <div id

（MYSQL學習筆記2）多表連接查詢

mysql3種連接方式的區別：INNER JOIN（內連接,或等值連接）：獲取兩個表中字段匹配關系的記錄。LEFT JOIN（左連接）：獲取左表所有記錄，即使右表沒有對應匹配的記錄。RIGHT JOIN（右連接）：與 LEFT JOIN 相反，用於獲取右表所有記錄，即使左表沒有對應匹配的記錄。3個表連接查詢

Java多執行緒學習筆記2

本文是我學習Java多執行緒以及高併發知識的第一本書的學習筆記，書名是<<Java多執行緒程式設計核心技術>>，作者是大佬企業高階專案經理高洪巖前輩，在此向他致敬。我將配合開發文件以及本書和其他的部落格奉獻著的文章來學習，同時做一些簡單的總結。有

【Python3 爬蟲學習筆記】動態渲染頁面爬取 2

動作鏈在互動操作中，一些互動動作都是針對某個節點執行的。比如，對於輸入框，我們就呼叫它的輸入文字和清空文字方法；對於按鈕，就呼叫它的點選方法。其實，還有另外一些操作，它們沒有特定的執行物件，比如滑鼠拖曳、鍵盤按鍵等，這些動作用另一種方式來執行，那就是動作鏈。

java多執行緒學習筆記2---理解原子性和可見性

1.原子性原子，從字面意思理解就是構成物質的基本單位，那麼它就是不可分的，對於不能分割的操作就是原子操作，比如a=0，這個操作就是不能被分開的，把這種原子操作就稱為原子性，原子操作在同一時刻是不能被多個執行緒同時訪問的，所以不存線上程安全問題。然而還有很多操作都是可分的，就是非原子操作，就會存

jmeter工具效能測試學習筆記-2-多使用者同時訪問多個網頁

接著上一篇的效能測試學習筆記1，發現自己當初做的辦法很蠢，於是在部落格上觀看了很多博主寫的相關資料，發現了更加簡單的方法。測試場景：1、100個使用者在5秒內同時訪問14個頁面2、新增固定計時器：每個網頁之間間隔500毫秒，即上一個網頁訪問結束後，休息500毫秒在訪問下一個網

C# 多線程學習筆記 - 2

夠快回收發送信號 contain syn down 鎖定銷毀 tex 本文主要針對 GKarch 相關文章留作筆記，僅在原文基礎上記錄了自己的理解與摘抄部分片段。遵循原作者的 CC 3.0 協議。如果想要了解更加詳細的文章信息內容，請訪問下列地址進行學習。原文

JQuery Mobile 學習筆記2-4：changePage()方法跳轉頁面

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Murphy_JQueryMobile的changePage()方法跳轉頁面<

mybatis3.2.7學習筆記2_一對一、一對多、多對多、延時載入、快取

參考源：我對比了一下mybatis和hibernate的一對一一對多多對多的概念 mybatis的要比hibernate簡單的多更加突出了mybatis注重sql的概念 * resuType--將sql的列名和pojo的屬性進行一一的對映 *

學習筆記2

建議 coo line 長度 cape 發展 div+css 加載不兼容雙標簽： <html><head><title><body><table><tr><td><span>

Jmeter學習筆記2-原件作用域與執行順序

校驗 height sse proc tro 有效收集技術分享控制 1.元件的作用域（1）配置元件（config elements）:會影響其作用範圍內的所有元件。（2）前置處理程序（per-processors）：在其作用範圍內的每一個sampler元件之

python學習筆記2：字符串

nbsp 大小 alpha .com format 大小寫 fin 判斷大小 key python學習筆記2：字符串總結：字符串是不可變變量，不能通過下標修改其值　　　字符串的方法都不會改變字符串原來的值，而是新生成一個字符串一、3種寫法——單引號，雙引號，三引號　

java 學習筆記2 面向對象（上）

awr ges abs nal mage 有效面向對象 ima col 類和對象類是某一批對象的抽象，可以把類理解成某種概念。對象是一個具體存在的實體。類和對象是面向對象的核心。類定義的是多個實例的特征，類不是具體存在，實例才是具體存在。定義類(class)的語法：

Git學習筆記2——Git版本庫的創建

文件添加不但提交 linu 記錄例子 blog 所有 out 創建一個版本庫非常簡單，首先，選擇一個合適的地方，創建一個空目錄： $ cd s: $ cd Git_Learing $ pwd s/Git_Learning pwd命令用於顯示當前目錄。在我的wind

Hadoop 學習筆記 (2) -- 關於MapReduce

規模 pre 分析 bsp 學習筆記 reduce 數據中心階段圖例 1. MapReduce 定義: 是一種可用於數據處理的編程的模型優勢: MapReduce 本質上是並行運行的，因此可以將大規模的數據分析任務，分發給任何一個擁有足夠多機器

算法導論學習筆記(2)－歸並排序

mar 今天 iostream 介紹 font 額外遞歸 size dsm 今天學習了算法導論上的歸並排序算法，而且完畢了在紙上寫出偽代碼，曾經就學過歸並可是理解的不夠透徹。以前還一直困惑：為什麽明明歸並排序比快排的時間復雜度更穩定。為什麽庫函數不用歸

ESP8266學習筆記2：實現ESP8266的局域網內通信

pro reg sad net nts 理解模式 curl ont 上一篇熟悉了編譯下載操作。如今就以實例入手。project使用的是IOT_DEMO，據DEMO文檔能夠知道ESP8266初始工作模式為softAP+station共存的模式。於是這邊我們就先以soft

JavaSE中Collection集合框架學習筆記(2)——拒絕重復內容的Set和支持隊列操作的Queue

%d eof 是否 face 出錯 can 3.2 lean als 前言：俗話說“金三銀四銅五”，不知道我要在這段時間找工作會不會很艱難。不管了，工作三年之後就當給自己放個暑假。面試當中Collection（集合）是基礎重點.我在網上看了

Linux學習筆記2-安裝遠程連接客戶端SecureCRT

下載 linux log 學習文件 spa 客戶端 pre 百度下載 1、百度下載SecureCRT8.0版本 2、安裝，破解 3、百度使用教程，使用SecureCRT連接Linux系統，並操作 4、安裝rzsz，（這樣就能直接把文件復制到Linux系統裏了） yum

C++學習筆記----2.4 C++對象的內存模型

影響 sni 創建 clas esp cheng lac -c 如果轉載自：http://c.biancheng.NET/cpp/biancheng/view/2995.html點擊打開鏈接當對象被創建時，編譯器會為每個對象分配內存空間，包括成員變量和成員函數。直觀的認

echarts學習筆記(2) ---- 設定單頁面多張圖表

相關推薦