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

ECharts的優(yōu)點(diǎn)

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

1.開源免費(fèi)

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

2.功能豐富

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

3.社區(qū)活躍

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

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

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

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

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

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

7.跨平臺(tái)

8.酷炫的特效

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

......

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

ECharts的使用

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

步驟1：引入 echarts.js 文件

echarts是一個(gè) js 的庫(kù)，當(dāng)然得先引入這個(gè)庫(kù)文件

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

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

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

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

步驟3：初始化 echarts 實(shí)例對(duì)象

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

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

步驟4：準(zhǔn)備配置項(xiàng)

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

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

步驟5：將配置項(xiàng)設(shè)置給 echarts 實(shí)例對(duì)象

myChart.setOption(option)

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

相關(guān)配置

xAxis

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

yAxis

直角坐標(biāo)系 中的 y 軸, 如果 type 屬性配置為 value , 那么無(wú)需配置 data , 此時(shí) y 軸會(huì)自動(dòng)去series 下找數(shù)據(jù)進(jìn)行圖表的繪制

series

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

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

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

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