Echarts起始篇
1、引入插件echarts.min.js
2、实例化echarts.init(dom[, theme, opts])
参数:
- 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();