2. ECharts快速入手

1. 获取 ECharts

可以通过以下几种方式获取 ECharts。

• 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。

• 在 ECharts 的 GitHub 获取。

• 通过 npm 获取 echarts，npm install echarts --save

• 通过 jsDelivr 等 CDN 引入

2. 引入 ECharts

通过标签方式直接引入构建好的 echarts 文件

3. 绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

运行效果：

image.png

---

说明：

image.png

echarts

全局 echarts 对象，在 script 标签引入 echarts.js 文件后获得，或者在 AMD 环境中通过 require('echarts') 获得。

image.png

创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。

参数

• dom
  实例容器，一般是一个具有高宽的div元素。

  注：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

  ECharts 3 中支持直接使用canvas元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 echartsInstance.getDataURL 生成图片链接相比可以支持图表的实时刷新。

• theme
  应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。

• opts
  附加参数。有下面几个可选项：

  • devicePixelRatio
    设备像素比，默认取浏览器的值window.devicePixelRatio。

  • renderer
    渲染器，支持 'canvas' 或者 'svg'。参见 使用 Canvas 或者 SVG 渲染。

  • width
    可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。

  • height
    可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。

echartsInstance

通过 echarts.init 创建的实例。

image.png

image.png

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启 动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

image.png

注： ECharts 2.x 中的通过 addData , setSeries 方法设置配置项的方式将不再支持，在 ECharts 3 中统一使用 setOption，可以参考上面示例。

参数：

调用方式：

chart.setOption(option, notMerge, lazyUpdate);

或者

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

• option
  图表的配置项和数据，具体见配置项手册。

• notMerge
  可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。

• lazyUpdate
  可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。

• silent
  可选，阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。