自定义图形绘制

自定义图形绘制的基本概念

ECharts提供了强大的自定义图形绘制能力，允许开发者通过图形元素组合创建复杂可视化效果。核心原理是利用Canvas或SVG的绘图API，在坐标系中绘制各种形状。图形注册机制让开发者可以扩展新的图形类型，满足个性化需求。

坐标系是自定义图形的基础，ECharts支持直角坐标系（x/y轴）、极坐标系（radius/angle轴）和地理坐标系（geo）。自定义图形需要明确指定所属坐标系，才能正确进行坐标转换。

// 基本图形注册示例
echarts.registerShape('customShape', {
  buildPath: function(ctx, shape) {
    ctx.moveTo(shape.x, shape.y);
    ctx.lineTo(shape.x + shape.width, shape.y);
    ctx.lineTo(shape.x + shape.width / 2, shape.y + shape.height);
    ctx.closePath();
  }
});

图形元素与属性配置

自定义图形由基础图形元素构成，包括矩形、圆形、路径等。每个元素支持丰富的样式配置：

• 填充样式：color、opacity、shadow
• 描边样式：borderWidth、borderColor、borderDashOffset
• 变换属性：scale、rotation、origin
• 位置尺寸：left、top、width、height

// 复杂图形元素配置示例
option = {
  graphic: [{
    type: 'group',
    left: 'center',
    top: 'center',
    children: [{
      type: 'rect',
      shape: { x: 0, y: 0, width: 100, height: 50 },
      style: {
        fill: 'linear-gradient(90deg, #fc466b, #3f5efb)',
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)'
      },
      rotation: Math.PI / 4
    }, {
      type: 'circle',
      shape: { cx: 50, cy: 25, r: 20 },
      style: { fill: '#fff' }
    }]
  }]
};

动态图形与交互实现

通过setOption动态更新graphic属性可以实现动画效果。关键点包括：

1. 使用transition属性定义动画参数
2. 通过animationDelay控制时序
3. 结合事件系统实现交互响应

// 动态图形示例
function updateGraphic() {
  const angle = Date.now() / 1000;
  chart.setOption({
    graphic: [{
      id: 'rotatingRect',
      type: 'rect',
      shape: { x: -50, y: -25, width: 100, height: 50 },
      style: { fill: '#5470c6' },
      rotation: angle % (Math.PI * 2),
      transition: ['rotation'],
      animationDuration: 1000
    }]
  });
  requestAnimationFrame(updateGraphic);
}

高级路径绘制技术

复杂路径绘制需要掌握贝塞尔曲线和路径操作：

1. 二次贝塞尔曲线：quadraticCurveTo(cpx, cpy, x, y)
2. 三次贝塞尔曲线：bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
3. 路径组合：使用beginPath和closePath管理路径状态

// 复杂路径示例
echarts.registerShape('wave', {
  buildPath: function(ctx, shape) {
    const width = shape.width;
    const height = shape.height;
    const offset = shape.offset || 0;
    
    ctx.moveTo(0, height/2);
    for (let i = 0; i < width; i++) {
      const y = Math.sin(i / 20 + offset) * 10 + height/2;
      ctx.lineTo(i, y);
    }
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.closePath();
  }
});

性能优化策略

大数据量场景下的优化方案：

1. 使用shape层级的culling控制可见区域渲染
2. 对静态图形设置silent:true避免事件检测
3. 批量操作时使用setOption的notMerge参数
4. 复杂图形考虑使用离屏Canvas缓存

// 性能优化示例
option = {
  graphic: {
    elements: [{
      type: 'image',
      style: { image: 'path/to/texture.png' },
      culling: true,
      cullingRect: { x: -100, y: -100, width: 1200, height: 800 }
    }],
    large: true,
    silent: true
  }
};

与ECharts标准组件的集成

自定义图形可以与标准组件深度整合：

1. 在series中通过custom渲染自定义系列
2. 通过axisPointer与坐标轴联动
3. 结合visualMap实现数据映射

// 与标准组件集成示例
option = {
  xAxis: { type: 'category' },
  yAxis: { type: 'value' },
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      const value = api.value(0);
      return {
        type: 'group',
        children: [{
          type: 'circle',
          shape: { cx: 0, cy: 0, r: value * 10 },
          style: { fill: api.visual('color') }
        }],
        position: [api.coord([api.value(1), value])]
      };
    },
    data: [[1, 10], [2, 15], [3, 8]]
  }],
  visualMap: {
    type: 'continuous',
    min: 5,
    max: 20,
    inRange: { color: ['#50a3ba', '#eac736'] }
  }
};

实际应用案例分析

气象数据可视化案例实现步骤：

1. 创建基础地图背景
2. 绘制等压线（isobars）路径
3. 添加风向箭头标记
4. 实现温度色斑图

// 气象图表示例
function renderWeatherChart(data) {
  const option = {
    geo: { map: 'china' },
    graphic: data.isobars.map(line => ({
      type: 'line',
      shape: { points: line.points },
      style: { 
        stroke: '#333',
        lineWidth: 2,
        lineDash: [5, 2]
      }
    })).concat(data.windArrows.map(arrow => ({
      type: 'path',
      shape: {
        path: createArrowPath(arrow.direction),
        x: arrow.x,
        y: arrow.y,
        width: 20,
        height: 20
      },
      style: { fill: '#666' }
    })))
  };
  chart.setOption(option);
}

function createArrowPath(angle) {
  // 返回箭头SVG路径字符串
  return `M0,0 L10,5 L8,5 L8,10 L-8,10 L-8,5 L-10,5 Z`;
}