ECharts有哪些優(yōu)點？ECharts怎么使用？

ECharts的優(yōu)點

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

1.開源免費

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

2.功能豐富

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

3.社區(qū)活躍

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

4.多種數(shù)據(jù)的支持

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

5.流數(shù)據(jù)的支持

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

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

7.跨平臺

8.酷炫的特效

9.數(shù)據(jù)的三維可視化

......

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

ECharts的使用

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

步驟1：引入 echarts.js 文件

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

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

步驟2：準備一個呈現(xiàn)圖表的盒子

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

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

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

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

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

步驟4：準備配置項

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

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

步驟5：將配置項設(shè)置給 echarts 實例對象

myChart.setOption(option)

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

相關(guān)配置

xAxis

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

yAxis

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

series

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

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

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

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