ECharts介绍

关于

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>

这样就可以在生成图表的时候自动适应当前容器的宽度了。