百度echarts为优秀的图表库,使用angular封装为指令。
新版本是完全一新的版本,老版本文档参照对应tag, 如0.3.13,不建议继续使用。
1.0.0-beta.1
- 调整构建方式,仅输出
commonjs,esm风格文件; - 保证反向兼容,
npm tag调整为beta; echarts-bridge调整为global npm scope,剔除个人前缀;
1.0.0-alpha.1
- 更新表述参见 #8
- 实例
API参见 https://github.com/bornkiller/echarts-bridge
- angularjs - 1.6.0+, 支持单向绑定,
life hook即可 - echarts - 3.0.0+
- 实例容器高度缺失,会导致
echarts绘制错误,并不会直接抛出。如果数据正常,绘制异常,务必检查高度问题。 - 在控制器,可以直接调用实例,因而可以使用
connect,group等操作。 - 暂时没有全局配置,所以实例之间相似的数据只能重复设定,后续会有解决方案。
React建议使用lifecycle hook,直接使用echarts进行DOM操作,也可以考虑其他封装库;
// 仅支持NPM,当前 beta 状态 npm install echarts-ng@beta;// 使用 `esm`, `commonjs` 加载方式import{ECHARTS_NG}from'echarts-ng';angular.module('application',[ECHARTS_NG]);封装由 $echarts 服务与 echarts 属性指令组成,需配合使用。
- 控制器内声明实例
functionShowcaseController($echarts,$timeout){this.theme='vintage';this.initOptions={hegith: 400,width: 'auto'};this.mediaOptions=[{option: {legend: {orient: 'horizontal',left: 'center',top: 'top'},grid: {right: '10%'}}},{query: {maxWidth: 850},option: {legend: {orient: 'vertical',right: 10,top: '10%'},grid: {right: '15%'}}}];this.instance=$echarts.create(this.theme,this.initOptions,this.mediaOptions).setOption({/*...*/});- 使用指令绘制实例
<divclass="echarts-box" style="height: 550px;" echarts="vm.instance"></div>- 实例分组,事件监听,事件触发等等操作
// 实例分组this.instance.group='example';// 事件监听this.instance.on('click',(event)=>{console.log(event);}).on('legendselectchanged',(event)=>{console.log(event);});// 事件触发this.instance.dispatchAction({type: 'legendSelect',name: name});MIT