最近一段时间做了一个使用echarts的图表项目。由于理解api能力有限，使用起来并非畅通无阻。
所谓好记性不如烂笔头，现将一些比较关键的点记录一下，供后续查看。
一 使用方法项目：ionic+angular4+echarts
1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入 <script src="assets/js/echarts.min.js"></script> 2.在组件的.html文件中 <div echarts [options]="pieoption" (chartclick)="jump2detail($event)"></div> 3.在组件的.ts文件中配置好options的值pieoption以及点击drill down的逻辑
二 注意点1.每一块渲染区域都有一个position的设置，可以自定义离上、下、左、右的距离
grid:{ top:... left:... bottom:... right:... } legend:{ top:... left:... ... }
2.每一个涉及值的显示点基本都提供了formatter
tooltip:{ formatter: params => { //自定义hover状态数据显示的情况 let str = ''; str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`; params.foreach(item => { str += `${item.marker}${item.seriesname}: ${math.round(item.value).tolocalestring()}<br>`; //item中提供了图标、颜色等 }); return str; } } legend:{ formatter: (name) => { //需要根据值去重算数据然后显示的情况 let source = data.source[name.touppercase()]; var total = 0; source.foreach(element => { total += element; }); return name + ': ' + math.round(total).tolocalestring(); } }
3.xaxis/yaxis 配置坐标轴的一些属性 刻度、坐标轴名称、如何显示坐标信息
4.toolbox 工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置5个工具
其中导出图片可以自己通过canvas的相关api 将多个图表一并导
5.datazoom 数据区域缩放组件 -- 可以一个也可以多个
datazoom:[ { type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚 ... }, { type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用 ... }]
6.series 系列列表，每个系列通过type决定图表类型 --根据不同的图表注入不同格式的数据
series:{ type:'line'/'pie'/'bar'/'treemap', ...}
其实细分到每一个图表都有一些细微的设置，数据以及颜色、间距等，待续...
相关推荐：
echarts实现饼图扇区统计表的添加点击事件
使用echarts实现动态曲线图表
以上就是使用echarts实现图表项目的注意点的详细内容。