ECharts编程技巧

扩展机制(extension)

写功能的话，需要逻辑计算的尽量往扩展里面写。

装饰器

顺势而为，不要破坏开源库默认的程序设计、流程、逻辑，这样才能尽量少出现问题。

案例：安全边距

在ECharts的src/coord/Axis.ts中，有一个setExtent方法：

1
2
3
4
5
6
7
8
/**
 * Set coord extent
 */
setExtent(start: number, end: number): void {
    const extent = this._extent;
    extent[0] = start;
    extent[1] = end;
}

可以在我们的StandardChart的src/extension/component/axis.ts中，通过扩展该方法，实现安全边距：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 缓存函数的默认逻辑
const originSetExtentMethod = Axis.prototype.setExtent;
/**
 * * 为轴提供一个内边距配置项 `dvPadding`
 */
Axis.prototype.setExtent = function (start: number, end: number, ...rest) {
  const { dvPadding } = this.model.option;

  if (typeof dvPadding !== 'undefined') {
    start += dvPadding[0];
    end -= dvPadding[1];
  }

  // 调用默认逻辑，走原始的流程
  originSetExtentMethod.call(this, start, end, ...rest);
};

这样就避免了在主题中写逻辑。