highcharts is based on svg technology, while echarts is based on canvas element in html5
There are two schemes for image digitization and image storage. The first is a bitmap , also called a raster image. It is to see the picture as a collection of densely arranged points on the plane with a natural optical vision, each point has an independent frequency and intensity, which is reflected in the visual color and brightness. Common JPEG/JPG, GIF, PNG, BMP are all bitmap formats.
The second is vector graphics . It looks at the graph in an abstract way, recording the patterns shown in it rather than the data at individual points. It treats an image as a composition of objects. Use a curve to record the outline of an object, and a pattern of color to describe the pattern inside the object. Vector formats include SVG, PDF, SWF, etc.
Vector graphics are suitable for recording simple graphics such as symbols and icons, while bitmaps are suitable for pictures with no obvious regularity and rich and delicate colors.
svg (scalable vector graphic) scalable vector graphics: vector-based graphics for the web defined using xml
①The image quality will not be lost if the image is enlarged or changed in size
②svg uses text to describe vectorized graphics. The text in the svg image is optional and searchable, so it is very suitable for maps, and the usability of the image is increased by describing it in words, such as it can be read out
③It is interactive and dynamic, and the xml-based svg format has strong dynamic interactivity
④Fully support DOM
canvas: basically a bitmap manipulated with js
Canvas is a new canvas element in HTML5. It doesn't have its own behavior, but defines an API to support scripted client-side drawing operations.
The width and height can be specified on the canvas object, however, most functionality is implemented through the CanvasRenderingContext2D object, which is obtained through the canvas object's getContext() method with the string "2d" as the only parameter
The disadvantage of the canvas api is that it does not provide any support for drawing text
To remove an element from canvas, it is often necessary to erase the drawing and redraw it
As for why you use script to draw instead of describing in element form like svg, the reason is unknown