自定义图形绘制

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

ECharts提供了强大的自定义图形绘制能力，允许开发者通过图形元素组合创建复杂可视化效果。核心原理是利用Canvas或SVG的绘图API，通过配置项描述图形元素及其属性。图形元素包括矩形、圆形、路径等基本形状，以及更复杂的组合图形。

option = {
  graphic: {
    type: 'rect',
    shape: {
      x: 100,
      y: 100,
      width: 200,
      height: 100
    },
    style: {
      fill: '#5470c6',
      stroke: '#91cc75',
      lineWidth: 3
    }
  }
};

图形元素的类型与属性

ECharts支持多种基础图形类型，每种类型都有特定的配置属性：

1. 矩形(rect)：

   • shape: {x, y, width, height, r}（r为圆角半径）
   • style: 填充(fill)、描边(stroke)等样式

2. 圆形(circle)：

   • shape: {cx, cy, r}
   • style: 与矩形类似

3. 路径(path)：

   • shape: {path}（SVG路径字符串）
   • style: 可设置更复杂的填充和描边

option = {
  graphic: [
    {
      type: 'circle',
      shape: {
        cx: 150,
        cy: 150,
        r: 60
      },
      style: {
        fill: 'rgba(200, 50, 50, 0.7)'
      }
    },
    {
      type: 'path',
      shape: {
        path: 'M10,10 L50,100 L90,50'
      },
      style: {
        stroke: '#000',
        lineWidth: 2
      }
    }
  ]
};

组合图形的实现方法

通过group类型可以将多个图形元素组合成一个复合图形：

option = {
  graphic: {
    type: 'group',
    children: [
      {
        type: 'rect',
        shape: { x: 0, y: 0, width: 100, height: 50 },
        style: { fill: '#f00' }
      },
      {
        type: 'text',
        left: 20,
        top: 15,
        style: {
          text: '组合图形',
          fill: '#fff',
          fontSize: 14
        }
      }
    ]
  }
};

动态图形与交互

图形元素支持动画和交互事件处理：

option = {
  graphic: {
    type: 'circle',
    shape: { cx: 100, cy: 100, r: 20 },
    style: { fill: '#5470c6' },
    // 动画配置
    animation: true,
    animationDurationUpdate: 1000,
    // 事件处理
    onclick: function() {
      console.log('圆形被点击');
    }
  }
};

坐标系中的图形定位

图形元素可以相对于坐标系定位：

option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  graphic: [
    {
      type: 'rect',
      position: ['50%', '50%'],  // 相对于坐标系中心
      shape: { width: 20, height: 20 },
      style: { fill: '#91cc75' }
    }
  ]
};

复杂路径绘制

使用path类型可以创建任意形状：

option = {
  graphic: {
    type: 'path',
    shape: {
      path: [
        ['M', 10, 10],
        ['L', 50, 50],
        ['C', 100, 100, 150, 50, 200, 100],
        ['Z']
      ]
    },
    style: {
      fill: 'none',
      stroke: '#333',
      lineWidth: 2
    }
  }
};

图形与数据关联

图形元素可以与数据联动：

option = {
  dataset: {
    source: [
      ['product', 'sales'],
      ['A', 120],
      ['B', 200]
    ]
  },
  series: [{
    type: 'bar'
  }],
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      text: '总销售额: {c}',
      rich: {
        c: {
          // 使用数据占位符
          formatter: function() {
            const data = this.ecModel.getDataset().source;
            return data.slice(1).reduce((sum, item) => sum + item[1], 0);
          }
        }
      }
    }
  }
};

性能优化技巧

1. 批量渲染：将多个图形合并到一个group中
2. 合理使用缓存：对静态图形设置silent: true
3. 分层渲染：利用zlevel控制渲染层级

option = {
  graphic: {
    type: 'group',
    silent: true,  // 不响应事件
    children: [
      // 大量静态图形元素...
    ]
  }
};

实际应用案例

自定义标记点

option = {
  series: [{
    type: 'scatter',
    data: [[10, 20], [30, 40]],
    symbol: function(params) {
      // 返回自定义路径
      return 'path://M0,0L10,0L5,10Z';
    }
  }]
};

动态进度指示器

function updateProgress(percent) {
  option = {
    graphic: {
      type: 'arc',
      shape: {
        cx: 100,
        cy: 100,
        r: 50,
        startAngle: -Math.PI/2,
        endAngle: -Math.PI/2 + Math.PI*2*percent/100
      },
      style: {
        fill: '#5470c6'
      }
    }
  };
  myChart.setOption(option);
}

高级技巧：自定义渲染器

对于特殊需求，可以扩展ECharts的渲染器：

// 注册自定义图形类型
echarts.graphic.registerShape('myShape', {
  buildPath: function(ctx, shape) {
    // 自定义绘制逻辑
    ctx.moveTo(shape.x, shape.y);
    // ...其他绘制命令
  }
});

option = {
  graphic: {
    type: 'myShape',
    shape: {
      x: 50,
      y: 50
      // 自定义形状参数
    }
  }
};