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.
