Custom graphic drawing

Basic Concepts of Custom Graphic Rendering

ECharts provides powerful custom graphic rendering capabilities, allowing developers to create complex visualizations by combining graphic elements. The core principle is to utilize the drawing APIs of Canvas or SVG, describing graphic elements and their attributes through configuration items. Graphic elements include basic shapes such as rectangles, circles, and paths, as well as more complex composite graphics.

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

Types and Attributes of Graphic Elements

ECharts supports various basic graphic types, each with specific configuration attributes:

1. Rectangle (rect):

   • shape: {x, y, width, height, r} (r is the corner radius)
   • style: fill, stroke, and other styles

2. Circle (circle):

   • shape: {cx, cy, r}
   • style: similar to rectangles

3. Path (path):

   • shape: {path} (SVG path string)
   • style: can set more complex fills and strokes

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
      }
    }
  ]
};

Methods for Implementing Composite Graphics

The group type can combine multiple graphic elements into a composite graphic:

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: 'Composite Graphic',
          fill: '#fff',
          fontSize: 14
        }
      }
    ]
  }
};

Dynamic Graphics and Interaction

Graphic elements support animation and event handling:

option = {
  graphic: {
    type: 'circle',
    shape: { cx: 100, cy: 100, r: 20 },
    style: { fill: '#5470c6' },
    // Animation configuration
    animation: true,
    animationDurationUpdate: 1000,
    // Event handling
    onclick: function() {
      console.log('Circle clicked');
    }
  }
};

Positioning Graphics in Coordinate Systems

Graphic elements can be positioned relative to coordinate systems:

option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  graphic: [
    {
      type: 'rect',
      position: ['50%', '50%'],  // Relative to the center of the coordinate system
      shape: { width: 20, height: 20 },
      style: { fill: '#91cc75' }
    }
  ]
};

Complex Path Drawing

The path type can create arbitrary shapes:

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
    }
  }
};

Associating Graphics with Data

Graphic elements can be linked to data:

option = {
  dataset: {
    source: [
      ['product', 'sales'],
      ['A', 120],
      ['B', 200]
    ]
  },
  series: [{
    type: 'bar'
  }],
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      text: 'Total Sales: {c}',
      rich: {
        c: {
          // Using data placeholders
          formatter: function() {
            const data = this.ecModel.getDataset().source;
            return data.slice(1).reduce((sum, item) => sum + item[1], 0);
          }
        }
      }
    }
  }
};

Performance Optimization Techniques

1. Batch Rendering: Combine multiple graphics into a single group.
2. Use Caching Wisely: Set silent: true for static graphics.
3. Layered Rendering: Use zlevel to control rendering layers.

option = {
  graphic: {
    type: 'group',
    silent: true,  // No event response
    children: [
      // Large number of static graphic elements...
    ]
  }
};

Practical Application Examples

Custom Markers

option = {
  series: [{
    type: 'scatter',
    data: [[10, 20], [30, 40]],
    symbol: function(params) {
      // Return a custom path
      return 'path://M0,0L10,0L5,10Z';
    }
  }]
};

Dynamic Progress Indicator

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);
}

Advanced Techniques: Custom Renderers

For special requirements, you can extend ECharts' renderer:

// Register a custom graphic type
echarts.graphic.registerShape('myShape', {
  buildPath: function(ctx, shape) {
    // Custom drawing logic
    ctx.moveTo(shape.x, shape.y);
    // ...Other drawing commands
  }
});

option = {
  graphic: {
    type: 'myShape',
    shape: {
      x: 50,
      y: 50
      // Custom shape parameters
    }
  }
};