最近一段时间做了一个使用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文件中配置好pieOption的值以及点击drill down的逻辑jump2Detail
4.ngx-echarts插件 --可以获取echarts实例的service
安装:npm install ngx-echarts
配置:AngularEchartsModule or NgxEchartsModule("ngx-echarts": "^2.1.0") -- 根据版本不同导入模块 从ngx-echarts.module.d.ts这个文件中看export哪个模块
//app.module.ts
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports:[NgxEchartsModule], //
...
})
//xxx.ts
import { NgxEchartsService } from 'ngx-echarts';
export class xxx {
constructor(
private echartService:NgxEchartsService
){...}
fn(){
let echartInstance = this.echartsService.getInstanceByDom(xxx); //获取echarts实例,然后可以调用内部的方法update一些东西
...
}
}
5.图表宽度自适应 -- resize功能
使用方式:
i.指令配置 -- 忘了
ii.手动代码
@HostListener('window:resize', ['$event'])
resize(event) {
setTimeout(() => {
//存在多个图表时,所有均需要自适应的情况
let echartDoms = Array.from(document.getElementsByClassName('xxx'));
echartDoms.forEach(dom => {
this.echartService.getInstanceByDom(dom).resize();
})
}, 100);
}
6.图表的事件 -- 普通鼠标事件与图表自定义的事件均可以通过实例绑定
//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
echartInstance.on('click',params => {
...
});
//datazoom、legendscroll、datarangeselected、...
echartInstance.on('dataZoom',params => {
...
})
//有些事件在angular中有对应的指令形式
//chartClick、chartDbClick、chartMouseDown、chartMouseUp、chartMouseOver、chartMouseOut、chartGlobalOut、chartContextMenu、chartDataZoom
<div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>
二 注意点
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',
...
}
其实细分到每一个图表都有一些细微的设置,数据以及颜色、间距等,待续...
如果bug请指正Thanks♪(・ω・)ノ!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。