百度echarts是一款免費(fèi)開源的Javascript圖表庫。百度echarts在原有產(chǎn)品的基礎(chǔ)上對(duì)性能、功能、易用性等各個(gè)方面進(jìn)行了全面提升，首創(chuàng)同時(shí)使用 Canvas 與 SVG，支持SVG渲染，并新增旭日?qǐng)D，為多層數(shù)據(jù)帶來更酷的展現(xiàn)方式。

【基本介紹】

ECharts是一款純Javascript的圖表庫，縮寫來自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
2018 年1月16日，百度EFE團(tuán)隊(duì)正式發(fā)布了旗下知名開源產(chǎn)品 ECharts 的最新大版本 4.0，新版本在產(chǎn)品的性能、功能、易用性等各個(gè)方面進(jìn)行了全面提升。需要的朋友可下載試試！

【軟件特點(diǎn)】

1、非常小巧方便，用戶可以輕松使用這款軟件
2、能夠在手機(jī)端和電腦上使用，讓你隨時(shí)可以制作圖表
3、擁有多種多樣的圖標(biāo)樣式，可以讓不同行業(yè)的人員使用
4、采用可視化的圖表效果，能夠讓你一目了然

【新特點(diǎn)】

ECharts 4.0 最大的亮點(diǎn)是帶來了 8 項(xiàng)堪稱“黑科技”的全新特性：
千萬級(jí)數(shù)據(jù)可視化的無阻塞體驗(yàn)
圖表界第一個(gè)雙引擎發(fā)動(dòng)機(jī)，首創(chuàng)同時(shí)使用 Canvas 與 SVG，支持 SVG 渲染，可自由切換，內(nèi)存占用更少
新增旭日?qǐng)D，為多層數(shù)據(jù)帶來更酷的展現(xiàn)方式代
數(shù)據(jù)與樣式分離讓數(shù)據(jù)傳入變得更加方便
更扁平的配置項(xiàng)層級(jí)，更便捷的書寫
首創(chuàng)數(shù)據(jù)可視化產(chǎn)品的無障礙訪問支持
即將可以在微信小程序中使用 ECharts
可以在 PPT 中使用 ECharts
和 ECharts 4.0 一起發(fā)布的還有 ECharts GL 1.0 正式版、ZRender 4.0 全新版本、WebGL 框架 ClayGL、深度學(xué)習(xí)框架 Visual DL 等，可謂是一次百度在數(shù)據(jù)可視化領(lǐng)域的大閱兵。
伴隨這些產(chǎn)品的發(fā)布，百度也發(fā)布了全新升級(jí)的數(shù)據(jù)可視化品牌 —— “百度數(shù)據(jù)可視化實(shí)驗(yàn)室”，標(biāo)志著百度在數(shù)據(jù)可視化領(lǐng)域?qū)㈤_啟一番大的動(dòng)作。
本次ECharts 4.0 新版本主要的升級(jí)點(diǎn)包括：
帶給用戶更強(qiáng)大的性能和功能
千萬級(jí)數(shù)據(jù)可視化的無阻塞體驗(yàn)
渲染引擎 ZRender 全面升級(jí)，正式支持 SVG
新增了旭日?qǐng)D類型
讓開發(fā)者使用 ECharts 變得更加輕松
數(shù)據(jù)與樣式分離讓數(shù)據(jù)傳入變得更加方便
更扁平的配置項(xiàng)層級(jí)，更便捷的書寫
讓更多的人在更多的場景都能訪問使用 ECharts 制作的可視化產(chǎn)品
首創(chuàng)數(shù)據(jù)可視化產(chǎn)品的無障礙訪問支持
新增對(duì)于微信小程序的支持
基于 Gallery 研發(fā)出了 PowerPoint 插件

【模式塊引入】

【echarts使用教程】

百度echart怎么用？
1、首先要使用百度echars，先要 把它下載下來本地，或者直接cdn獲取，當(dāng)然也可以直接到github下載最新的版本
通過 npm 安裝 echarts，npm install echarts --save
這樣 ECharts 和 zrender 會(huì)放在node_modules目錄下?？梢灾苯釉陧?xiàng)目代碼中 require('echarts') 得到 ECharts
最簡單的是cdn引入，首先到官方推薦的cdn
如下所示打開官方推薦的cdn地址

2、復(fù)制cdn地址里面的任意一個(gè)就可以進(jìn)行引入了，如下所示，點(diǎn)擊copy,即可完成復(fù)制

3、復(fù)制成功后將它引入到我們的html文件，如下所示：
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>

4、開始使用echarts，首先為ECharts準(zhǔn)備一個(gè)具備大小容器，如下所示定義一個(gè)div容器來裝我們的圖表
<div id="main" style="width: 100%;800px;"></div>

5、接下來最重要步驟，指定配置項(xiàng)，如下所示 title代表圖表標(biāo)題，tooltip插件 legend 按鈕可以控制是否顯示 xAxis x軸數(shù)據(jù) yAxis y軸 series數(shù)據(jù)
var option = {
title: {
text: '網(wǎng)站pv瀏覽量'
},
tooltip: {},
legend: {
data:['pv']
},
xAxis: {
data: ["2018-11-01","2018-11-02","2018-11-03","2018-11-04","2018-11-05","2018-11-07"]
},
yAxis: {},
series: [{
name: 'pv',
type: 'line',
data: [151, 220, 361, 102, 210, 320]
}]
};

6、最后 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(option);
打開瀏覽器我們會(huì)發(fā)現(xiàn)繪制好一個(gè)漂亮的圖像了

【百度echarts圖形繪制教程】

百度echarts怎么繪制柱狀圖形？
1、創(chuàng)建一個(gè)html文件引用echarts.js和設(shè)置兩個(gè)具備寬高的div準(zhǔn)備繪制柱狀圖和餅圖，如下圖所示：

2、我們基于創(chuàng)建好的柱狀圖div，首先指定圖表的配置項(xiàng)和數(shù)據(jù)，然后將圖表的配置項(xiàng)和數(shù)據(jù)都顯示出來，如下圖所示：

3、我們?cè)跒g覽器打開，可以看到已經(jīng)成功通過echarts繪制了一個(gè)柱狀圖，如下圖所示：

4、我們下面來繪制餅圖，同樣也是先初始化echarts實(shí)例，指定圖表配置項(xiàng)和數(shù)據(jù)，如下圖所示：

5、我們?cè)跒g覽器重新打開頁面，可以看到餅圖也繪制好了，如下圖所示：

6、我們也可以進(jìn)去官網(wǎng)，查看文檔，掌握詳細(xì)的使用方法，如下圖所示：