ECharts開發入門

ECharts開發

一、背景

爲了更好的展現數據，採用圖表的方式，更加清晰的看出數據與數據之間的關係

二、步驟

1、Echarts簡介:

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

 

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

2、創建一個簡單的餅圖

1）到ECharts官網下載所需的依賴文件，

網址爲：http://echarts.baidu.com/download.html

2）創建jsp頁面，並添加script標籤根據路徑引入依賴文件，添加div標籤，標籤需要添加id屬性

...

 <div id="main" style="width:600px;height:400px"> </div>

3）初始化

var mychart = echarts.init(document.getElementById('main'));

4）創建餅圖

....

 <script type="text/javascript">
        var mychart = echarts.init(document.getElementById('main'));
        var option = {
            title:{
                text:'ECharts測試'
            },
            tooltip:{
                formatter:'{a}<br/>{b}:{c}({d}%)'
            },
            series:{
                type:"pie",
                data:[
                          {value:100,name:'西涼'},
                         {value:200,name:'北荒'},
                      ]
            }
        };
        mychart.setOption(option);
    </script>

..

5）這樣一個簡單的餅圖就創建好了，如果還需要修改，參照下api和實例就可以實現各種各樣的圖的創建及多樣的效果。

api網址：http://echarts.baidu.com/api.html#echarts

實例網址：http://echarts.baidu.com/examples.html

api裏面有所有的參數的說明對應意義和取值，實例裏有各種圖的創建

三、小結

ECharts語法相對固定，不過許多細節需要注意，比如說賦值用“：”，每句結束用“，”最後一句可以不寫。前面如果少了逗號會導致整個結果出不來。總的來說它的多變性很強，可以實現多樣圖形的創建，還可以設置各式各樣的特效。