一個比較實用的商業級圖表Echarts

時間 2019-11-17

標籤一個比較實用商業圖表 echarts 简体版

原文原文鏈接

瞭解瞭解javascript

　

　　ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大加強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。html

　　支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展示。java

1、簡單瞭解一下Echarts

1.1Echarts的基本圖表類型

圖表庫標準包含單圖表類型的標準圖表以及多圖表類型混合的混搭圖表git

1.2Echarts中的經常使用名詞解釋

基本名詞github

chart	是指一個完整的圖表，如折線圖，餅圖等「基本」圖表類型或由基本圖表組合而成的「混搭」圖表，可能包括座標軸、圖例等
axis	直角座標系中的一個座標軸，座標軸可分爲類目型、數值型或時間型
xAxis	直角座標系中的橫軸，一般並默認爲類目型
yAxis	直角座標系中的縱軸，一般並默認爲數值型
grid	直角座標系中除座標軸外的繪圖網格，用於定義直角系總體佈局
legend	圖例，表述數據和圖形的關聯
dataRange	值域選擇，經常使用於展示地域數據時選擇值域範圍
dataZoom	數據區域縮放，經常使用於展示大量數據時選擇可視範圍
roamController	縮放漫遊組件，搭配地圖使用
toolbox	輔助工具箱，輔助功能，如添加標線，框選縮放等
tooltip	氣泡提示框，經常使用於展示更詳細的數據
timeline	時間軸，經常使用於展示同一系列數據在時間維度上的多份數據
series	數據系列，一個圖表可能包含多個系列，每個系列可能包含多個數據

圖表名詞chrome

line	折線圖，堆積折線圖，區域圖，堆積區域圖。
bar	柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter	散點圖，氣泡圖。散點圖至少須要橫縱兩個數據，更高維度數據加入時能夠映射爲顏色或大小，當映射到大小時則爲氣泡圖
k	K線圖，蠟燭圖。經常使用於展示股票交易數據。
pie	餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar	雷達圖，填充雷達圖。高維度數據展示的經常使用圖表。
chord	和絃圖。經常使用於展示關係數據，外層爲圓環圖，可體現數據佔比關係，內層爲各個扇形間相互鏈接的弦，可體現關係數據
force	力導佈局圖。經常使用於展示覆雜關係網絡聚類佈局。
map	地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可經過標準GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。
heatmap	熱力圖。用於展示密度分佈信息，支持與地圖、百度地圖插件聯合使用。
gauge	儀表盤。用於展示關鍵指標數據，常見於BI類系統。
funnel	漏斗圖。用於展示數據通過篩選、過濾等流程處理後發生的數據變化，常見於BI類系統。
evnetRiver	事件河流圖。經常使用於展現具備時間屬性的多個事件，以及事件隨時間的演化。
treemap	矩形式樹狀結構圖，簡稱：矩形樹圖。用於展現樹形數據結構，優點是能最大限度展現節點的尺寸特徵。
venn	韋恩圖。用於展現集合以及它們的交集。
tree	樹圖。用於展現樹形數據結構各節點的層級關係
wordCloud	詞雲。詞雲是關鍵詞的視覺化描述，用於彙總用戶生成的標籤或一個網站的文字內容

2、引入Echarts

引入Echarts的方式有不少：canvas

一、模塊化包引入數組

二、模塊化單文件引入瀏覽器

三、標籤式單文件引入網絡

這裏咱們就着重介紹一下第三種方式，也是最簡單，我認爲比較好用的一種！！

ECharts 3 開始再也不強制使用 AMD 的方式按需引入，代碼裏也再也不內置 AMD 加載器。所以引入方式簡單了不少，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。路徑結果以下：

 1 <body> 
 2     <div id="main" style="height:400px;"></div>       //爲 ECharts 準備一個具有高寬的 DOM 容器。
 3     ...
 4     <script src="js/echarts.js"></script>
 5     <script>
 6         var myChart = echarts.init(document.getElementById('main'));　　//基於準備好的dom，初始化echarts實例
 7         var option = {　　　　　　　　　　　
 8             ...　　　　　　　　　　　　//指定圖表的配置項和數據　　
 9         }
10         myChart.setOption(option);　　　　　//使用剛指定的配置項和數據顯示圖表。　　　　　　　
11 </script> 
12 </body>

3、具體小實例

因爲Echarts中的屬性不少，接下來我就經過兩個小李子給你們介紹一下其中的基本屬性的使用吧~~~

3.1實例一：柱狀圖

<script type="text/javascript">
            // 基於準備好的dom，初始化echarts實例
               var myChart = echarts.init(document.getElementById('main'));
               // 指定圖表的配置項和數據
            var option = {
                title: {                        //標題，每一個圖表最多僅有一個標題控件，每一個標題控件可設主副標題。
                    text: 'ECharts 入門示例',        //主標題文本
                    subtext:'該圖表純屬虛構',        //副標題文本
                    x:'left',                    //標題水平安放位置，默認爲left。可選值有left、right、center
                    y:'top',                    //標題垂直安放位置，默認爲top。可選值有top、bottom、center
                    textAlign:'left',            //標題水平對齊方式，默認根據x設置自動調整。可選值有left、right、center
                    backgroundColor:'rgba(0,0,0,0)',        //標題背景顏色，默認透明
                    textStyle:{                    //主標題文本樣式
                        fontSize: 18,
                        fontWeight: 'bolder',
                        color: '#333'
                    },
                    subtextStyle:{
                        color: '#aaa'            //副標題文本樣式
                    }
                },
                tooltip: {},                    //提示框，鼠標懸浮交互時的信息提示。
                legend: {                        //圖例，每一個圖表最多僅有一個圖例。
                    data:['銷量'],                //圖例內容數組
                    x:'center',                    //圖例水平安放位置，默認爲全圖居中。可選值有left、right、center
                    y:'top',                    //圖例垂直安放位置，默認爲top。可選值有top、bottom、center
                },
                xAxis: {                        //直角座標系中橫軸數組
                    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                },
                yAxis: {},                        //直角座標系中縱軸數組
                series: [{                        //數據內容
                    name: '銷量',                //系列名稱，如啓用legend，該值將被legend.data索引相關
                    type: 'bar',                //圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。可選值爲line(折線圖)，bar(柱狀圖)，scatter(散點圖)
                    data: [5, 20, 36, 10, 10, 20]    //數據
                }]
            };
    
            // 使用剛指定的配置項和數據顯示圖表。
            myChart.setOption(option);
        </script>

運行效果：

3.2餅圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script type="text/javascript" src="js/echarts.js"></script>
    </head>

    <body>
        <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
        <div id="main" style="width: 800px;height:400px;"></div>
        <script type="text/javascript">
            // 基於準備好的dom，初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定圖表的配置項和數據
            var option = {
                title: {
                    text: '某站點用戶訪問來源',        //主標題文本
                    subtext: '純屬虛構',            //副標題文本
                    x: 'center'                    //標題水平安放位置
                },
                series: [{                                //數據內容
                    name: '訪問來源',                    //系列名稱，如啓用legend，該值將被legend.data索引相關
                    type: 'pie',                        //圖表類型，必要參數！
                    radius: '55%',                        //半徑
                    center: ['50%', '60%'],                //圓心座標
                    data: [{                            //數據
                            value: 335,
                            name: '直接訪問'
                        },
                        {
                            value: 310,
                            name: '郵件營銷'
                        },
                        {
                            value: 234,
                            name: '聯盟廣告'
                        },
                        {
                            value: 135,
                            name: '視頻廣告'
                        },
                        {
                            value: 1548,
                            name: '搜索引擎'
                        }
                    ]
                }],
                tooltip: {                         //提示框，鼠標懸浮交互時的信息提示
                    trigger: 'item',            //觸發類型，默認數據觸發，可選值有item和axis
                    formatter: "{a} <br/>{b} : {c} ({d}%)",    //鼠標指上時顯示的數據  a（系列名稱），b（類目值），c（數值）, d（佔整體的百分比）
                    backgroundColor: 'rgba(0,0,0,0.7)'    //提示背景顏色，默認爲透明度爲0.7的黑色
                },
                legend: {                                //圖例，每一個圖表最多僅有一個圖例。
                    orient: 'vertical',                    //佈局方式，默認爲水平佈局，可選值有horizontal(豎直)和vertical(水平)
                    x: 'left',                            //圖例水平安放位置，默認爲全圖居中。可選值有left、right、center
                    data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
                },
                toolbox: {                                //工具箱，每一個圖表最多僅有一個工具箱。
                    show: true,                            //顯示策略，可選爲：true（顯示） | false（隱藏）
                    feature: {                            //啓用功能
                        dataView: {                        //數據視圖
                            show: true,
                            readOnly: false                //readOnly 默認數據視圖爲只讀，可指定readOnly爲false打開編輯功能
                        },
                        restore: {                        //還原，復位原始圖表   右上角有還原圖標
                            show: true
                        },
                        saveAsImage: {                    //保存圖片（IE8-不支持），默認保存類型爲png，能夠改成jpeg
                            show: true,
                            type:'jpeg',
                            title : '保存爲圖片'
                        }
                    }
                }
            };

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