ECharts有哪些優(yōu)點？數據可視化工具ECharts快速上手

ECharts的優(yōu)點

ECharts是百度公司開源的一個使用 JavaScript 實現的開源可視化庫，兼容性強，底層依賴矢量圖形庫 ZRender ，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。

1.開源免費

它是開源免費的，也就是我們可以免費的使用 ECharts ，不需要繳納任何的費用。

2.功能豐富

它的功能非常的豐富，提供了各種各樣的圖表，支持各種各樣的定制, 滿足各種需求，比如折線圖、柱狀圖、餅圖、K線圖等. 在他的官方示例中, 提供了上百種圖表, 可以用 只有你想不到, 沒有她做不到 這句話來形容

3.社區(qū)活躍

ECharts 的社區(qū)非常活躍，意味著你可以和很多開發(fā)者討論，遇到了 ECharts 中不會的問題，也很容易找到解決辦法。

4.多種數據的支持

可視化的含義就是將數據通過更加直觀的圖表的方式來呈現。圖表只是一種呈現方式。最核心的其實是數據。 ECharts 對數據格式的支持也是非常友好的。 ECharts 能夠支持常見的 key-value 數據格式，還能支持二維表，或者 TypedArray 格式的數據

5.流數據的支持

對于超大的數據量而言， 數據本身的體量可能就非常消耗資源, 而 ECharts 可以支持對流數據的動態(tài)渲染，加載多少數據就渲染多少數據，省去了漫長的數據加載的等待時間, 他還提供了增量渲染的技術, 只渲染變化的數據, 提高系統(tǒng)的資源利用。

6.移動端的優(yōu)化

7.跨平臺

8.酷炫的特效

9.數據的三維可視化

......

ECharts 能夠做出各種各樣漂亮的圖表，它能滿足絕大多數可視化圖表的實現.它的兼容性強, 使用方便, 
功能強大, 是實現數據可視化的最佳選擇之一, 更多特點和介紹可以查閱官網地址：
https://echarts.apache.org/zh/index.html

ECharts的使用

ECharts 的入門使用特別簡單, 5分鐘就能夠上手. 他大體分為這幾個步驟

步驟1：引入 echarts.js 文件

echarts是一個 js 的庫，當然得先引入這個庫文件

<script src="js/echarts.min.js"></script>

步驟2：準備一個呈現圖表的盒子

這個盒子通常來說就是我們熟悉的 div ，這個 div 決定了圖表顯示在哪里

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

步驟3：初始化 echarts 實例對象

在這個步驟中, 需要指明圖表最終顯示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步驟4：準備配置項

這步很關鍵，我們最終的效果，到底是顯示餅圖還是折線圖，基本上都是由配置項決定的

var option = {
    xAxis: {
        type: 'category',
        data: ['小明', '小紅', '小王']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '語文',
        type: 'bar',
        data: [70, 92, 87],
    }
  ]
}

步驟5：將配置項設置給 echarts 實例對象

myChart.setOption(option)

通過簡單的5個步驟, 就能夠把一個簡單的柱狀圖給顯示在網頁中了.這幾個步驟中, 步驟4最重要,一個圖表最終呈現什么樣子,完全取決于這個配置項.所以對于不同的圖表, 除了配置項會發(fā)生改變之外。其他的代碼 都是固定不變的。

相關配置

xAxis

直角坐標系 中的 x 軸, 如果 type 屬性的值為 category ,那么需要配置 data 數據, 代表在 x 軸的呈現

yAxis

直角坐標系 中的 y 軸, 如果 type 屬性配置為 value , 那么無需配置 data , 此時 y 軸會自動去series 下找數據進行圖表的繪制

series

系列列表。每個系列通過 type 決定自己的圖表類型, data 來設置每個系列的數據

配置項都是以鍵值對的形式存在, 并且配置項有很多, ECharts 的學習大多是針對于這些配置項的, 對于配置項的學習, 大家可以不用死記硬背, 需要的時候查一查官方文檔即可. 網址:

https://echarts.apache.org/zh/option.html , 常用的配置項多用幾次, 你自然而然就記下了。同學們可以查文檔試一下: title中的各種配置

title: {
    show: true,
    text: '標題',
    link: 'http://www.xamj520.com',
    textStyle: {
        color: 'red'
    }
}