案例

TIP

该页面已使用浏览器版本的 Area.js，在 demo 代码中没有再使用 import 导入。

单线条

单线条 (控制坐标标注)

xAxisLength: 3,
yAxisLength: 5,

单线条（无指示点）

areaShowDot: false

单线条（无动画）

showAnimation: false

单线条（修改颜色）

  areaLineColor: ['rgba(46, 213, 115,1.0)'],
  areaDotStorkColor: ['rgba(46, 213, 115,1.0)'],
  areaActiveDotFillColor: ['rgba(46, 213, 115,0.3)']

多线条

const yAxisData = [ [ 7, 10, 6, 8, 12, 7 ], [ 2, 5, 3, 6, 8, 5 ] ];

areaLineColor: ['rgba(255, 71, 87,1.0)', 'rgba(46, 213, 115,1.0)'],
areaDotStorkColor: ['rgba(255, 71, 87,1.0)', 'rgba(46, 213, 115,1.0)'],
areaActiveDotFillColor: ['rgba(255, 71, 87,0.3)', 'rgba(46, 213, 115,0.3)']

渐变区域

areaStartColor: ['rgba(255, 71, 87,1.0)'],
areaEndColor: ['rgba(255, 71, 87,0.1)']

区域叠加

const yAxisData = [ [ 7, 10, 6, 8, 12, 7 ], [ 2, 5, 3, 6, 8, 5 ] ];

areaLineColor: ['rgba(255, 107, 129,1.0)', 'rgba(46, 213, 115,1.0)'],
areaDotStorkColor: ['rgba(255, 107, 129,1.0)', 'rgba(46, 213, 115,1.0)'],
areaActiveDotFillColor: ['rgba(255, 107, 129,0.3)', 'rgba(46, 213, 115,0.3)'],
areaStartColor: ['rgba(255, 107, 129,1.0)', 'rgba(46, 213, 115,1.0)'],
areaEndColor: ['rgba(255, 107, 129,1.0)', 'rgba(46, 213, 115,1.0)']

自定义 result

drawResult: function (ctx, data, chartParameter) {
  const { dpi, mousePosition, chartRect } = chartParameter;
  const { group, xAxisVal, yAxisVal, y } = data;
  const text = `第${group + 1}组数据: ${xAxisVal}-${yAxisVal}`;
  const size = 14 * dpi
  const weight = 600;
  const font = 'PingFangSC-Semibold PingFang SC';
  const color = '#333';
  const offsetX = 20 * dpi;
  const maxWidth = 120 * dpi;

  let textAlign = 'start';
  let x = mousePosition.x + offsetX;
  if (mousePosition.x + maxWidth + offsetX >= chartRect.endX) {
    textAlign = 'end'
    x = mousePosition.x - offsetX;
  }

  ctx.save();
  ctx.textBaseline = 'middle';
  ctx.textAlign = textAlign;
  ctx.font = `${weight} ${size}px ${font}`;
  ctx.fillStyle = color;
  ctx.fillText(text, x, y, maxWidth);
  ctx.restore();
}