Echarts起始篇

Echarts起始篇

1、引入插件echarts.min.js
2、实例化echarts.init(dom[, theme, opts])
参数：

1. 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（实例容器）的高度。

var mychart = echarts.init(document.getElementById(id));

3、设置图表实例的配置项以及数据

mychart.setOption(option[,notMerge,lazyUpdate])
或者
mychart.setOption(option[,{
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
}])

参数：

• option
  图表的配置项和数据，具体见配置项手册。
• notMerge 可选，
  是否不跟之前设置的 option 进行合并，默认为false，即合并。
• lazyUpdate 可选，
  在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
• silent 可选，
  阻止调用 setOption 时抛出事件，默认为 false，即抛出事件。

4、常见问题

• 图表动态改变：修改数据（后增前删），setOption，如：https://www.echartsjs.com/gallery/editor.html?c=dynamic-data
• 使用一个echarts实例切换不同图表：myechats.clear();myechats.setOption();myecharts.resize();