World vector map
Apache ECharts is an open source Javascript visualization library with very
extensive customization options and powerful rendering engine. The library provides more
than 20 chart types available out of the box, along with a dozen components, and each of
them can be arbitrarily combined to use. And progressive rendering and stream loading
make it possible to render 10 million data in realtime. This example shows a simple
geo chart type rendered in SVG.
Combination with chart
ECharts engine allows you to combine multiple chart types with shared or
multiple data sets. This example demonstrates a combination of world map
and scatter chart. The demo data used in this example represents population
by country. Countries and bubbles are both interactive: hover on bubbles to see the
tooltip with details, hover on country to see the country name. This behaviour can be
easily configured.
Viewport
In this example, world map is zoomed in to a certain viewport
(Europe) that is specified in center configuration option in
longitude and latitude by default.
Effect scatter
ECharts maps support effectScatter series type, which
adds the scatter (bubble) graph with ripple animation. The special animation
effect can visually highlight some data.
Enable scale
Use roam: 'scale' option to enable map zooming on
scroll. You can also use scaleLimit option to set minimum and
maximum scaling, where the default value is '1'.
Enable move
If you set roam option to 'move', map
becomes draggable, but not scalable. Zoom level and aspect ratio of the map are
fixed in this case.
Enable scale and move
If you set roam option to true, map
becomes draggable and scalable. All options from both scale and
move examples also work in this setup.
Initial zoom level
You can control the initial zoom rate of current viewport with
zoom option. The default value is 1, in this example
it's set to 6 to scale down Europe map.
