关于
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2018年3月全球著名开源社区Apache宣布百度ECharts进入Apache孵化器。
使用
常用的引入方式：
1.通过 npm 获取 echarts，npm install echarts --save
2.下载 JavaScript 库到本地引入，或者通过 cdn，npmcdn，bootcdn上找到 ECharts 的最新版本绘制一个简单的图表
例子
- 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);
.....//同上
}
- 移动端自适应方法
在src目录下添加directives目录，添加一个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) {
//因为ionic的默认padding宽度是16
renderer.setElementStyle(element.nativeElement, 'width', `${(document.body.clientWidth - 32).toString()}px`);
}
}
使用这个指令时，会获取当前窗口宽度，并设置指定div的宽度。将这个指令应用到图表的容器上：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 350px;height:300px;" my-auto-fit-layout></div>
这样就可以在生成图表的时候自动适应当前容器的宽度了。
