關(guān)于
ECharts精盅，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動設(shè)備上谜酒，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11叹俏，Chrome，F(xiàn)irefox僻族，Safari等）粘驰，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀述么，交互豐富蝌数，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
ECharts 提供了常規(guī)的折線圖度秘、柱狀圖顶伞、散點(diǎn)圖、餅圖剑梳、K線圖唆貌，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖垢乙、熱力圖锨咙、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖侨赡、旭日圖蓖租，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖羊壹，儀表盤蓖宦，并且支持圖與圖之間的混搭。
2018年3月全球著名開源社區(qū)Apache宣布百度ECharts進(jìn)入Apache孵化器油猫。
使用
常用的引入方式：
1.通過 npm 獲取 echarts稠茂，npm install echarts --save
2.下載 JavaScript 庫到本地引入，或者通過 cdn情妖，npmcdn睬关，bootcdn上找到 ECharts 的最新版本繪制一個(gè)簡單的圖表
例子
- ionic2 3 4中使用
angular操作dom的方式
1.在頁面html
<div #salesBarChart style="height:300px;margin: 10px;"></div>
2.在ts文件
import {ElementRef, ViewChild} from '@angular/core';
...
@ViewChild('salesBarChart') salesBarChart: ElementRef;
...
ionViewDidLoad() {
let myChart=ECharts.init(this.salesBarChart.nativeElement);
.....//同上
}
- 移動端自適應(yīng)方法
在src目錄下添加directives目錄，添加一個(gè)auto-fit-layout.ts文件毡证，輸入以下代碼：
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[my-auto-fit-layout]'
})
export class AutoFitLayout {
constructor(public element: ElementRef, public renderer: Renderer) {
//因?yàn)閕onic的默認(rèn)padding寬度是16
renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
}
}
使用這個(gè)指令時(shí)电爹，會獲取當(dāng)前窗口寬度，并設(shè)置指定div的寬度料睛。將這個(gè)指令應(yīng)用到圖表的容器上：
<!-- 為ECharts準(zhǔn)備一個(gè)具備大胸ぢ帷（寬高）的Dom -->
<div id="main" style="width: 350px;height:300px;" my-auto-fit-layout></div>
這樣就可以在生成圖表的時(shí)候自動適應(yīng)當(dāng)前容器的寬度了摇邦。
