Map Label Component In Scatter Map

The scatter map label component is an unconventional map label layout method. The labels are in the form of the MarkPoint component, and are laid out around the perimeter of the map as much as possible. Currently, it is only recommended for use with maps of China.

How to Use This Component

The scatter map is supported by default in VChart and can be implemented through the composite chart (Common Chart).

const spec = {
    type: 'common',
    padding: 50,
    region: [
      {
        roam: true,
        coordinate: 'geo',
        longitudeField: 'lon',
        latitudeField: 'lat'
      }
    ],
    series: [
      {
        type: 'map',
        map: 'china',
        nameField: 'name',
        valueField: 'value',
        seriesField: 'name',
      },
      {
        regionIndex: 0,
        id: 'scatter',
        type: 'scatter',
        data: {
          values: [
           ...
          ]
        },
        xField: 'name',
        yField: 'value',
      }
    ]
  };

The map label component needs to be registered on the chart. The registration and usage are as follows:

import VChart from '@visactor/vchart';
import { registerMapLabel } from '@visactor/vchart-extension';

const spec = {
  //  your spec
  type: 'common',
  ...,
  mapLabel: {
    visible: true,
    position: 'outer',
    seriesId: 'scatter',
    nameField: 'name',
    valueField: 'value',
    space: 6,
    nameLabel: {},
    valueLabel: {},
    leader: {},
    background: {}
  }
};
registerMapLabel();

const vchart = new VChart(spec, { dom: 'chart' });
vchart.renderSync();

If using the CDN import method, the registration method is as follows:

<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart-extension/build/index.min.js"></script>
<script>
  const spec = {
    //  your spec
  };
  VChartExtension.registerMapLabel();

  const vchart = new VChart.default(spec, { dom: 'chart' });
  vchart.renderSync();
</script>

Related Configuration Options

export interface IMapLabelSpec extends IMapLabelStyleSpec {
  /** Associated series ID */
  seriesId: StringOrNumber;
  /** Data field for the name text */
  nameField?: string;
  /** Data field for the value text */
  valueField?: string;
  /**
   * Interaction trigger type
   * @default 'none'
   */
  trigger?: 'hover' | 'click' | 'none';
}

export interface IMapLabelStyleSpec {
  /**
   * Whether to display
   * @default false
   */
  visible?: boolean;
  /**
   * The spacing between the label and the marker point when the label position is not 'outer'
   * @default 12
   */
  offset?: number;
  /**
   * The distance between the icon and the label
   * @default 10
   */
  space?: number;
  /**
   * Label position. Supports 'left' | 'top' | 'right' | 'bottom' | 'outer'
   * @default 'top'
   */
  position?: LabelPosition;
  /** Settings for the name text style */
  nameLabel?: {
    visible?: boolean;
    style?: ITextMarkSpec;
  };
  /** Settings for the value text style */
  valueLabel?: {
    visible?: boolean;
    style?: ITextMarkSpec;
  };
  /** Icon style settings */
  icon?: {
    visible?: boolean;
    style?: ISymbolMarkSpec;
  };
  /** Background style settings */
  background?: {
    /** @default true */
    visible?: boolean;
    /** Background frame padding */
    padding?: IPadding;
    style?: IRectMarkSpec;
  };
  /** Leader line style settings */
  leader?: {
    visible?: boolean;
    style?: IPathMarkSpec;
  };
}

Example