Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how Vue uses the echarts scatter chart to punctuate the relevant knowledge points in the region, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

First of all, because of the project, it is necessary to mark the coordinate points with defects in the standard-sized glass according to the coordinates in an area.

If you say that the size of a piece of glass is the standard size of 100200 mm, this is doomed, will not change, each piece is so big.

Then create a div of 100200px directly on the interface, indicating that it is this piece of glass.

It is stipulated that the central point of this piece of glass is the origin (0), positive to the right and negative to the left.

So that's what it looks like.

So I just want to use echarts to render directly on the interface.

Html

First draw a div on the interface to place the echarts. This one was extracted by me to make a component, and the size of the component has been specified, which is the standard size of 20000100. The company requires not to stretch, otherwise the impression will be misplaced, if it is too large, it can be scaled down or enlarged.

Then it is to draw the coordinates for the scattered points. In fact, this place is very annoying.

The coordinates of echarts are different from those of the company.

First set the x axis and y axis

/ / Loop interface let xLabel = [] let yLabel = [] for (let I =-49; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.