How to draw small program?

Small program project first contact drawing, mind trance, but as a qualified coder, the surface should remain calm.Copy the code

For drawing, echarts is used on PC and ANTV F2 is used on mobile.

After looking at the UI design diagram, I chose Echarts. Why? Why waste time configuring graphics when the UI is already in the echarts extension? 😜

Drawing using:

  • Mpvue – charts (github.com/avocadowang…).
  • Echarts.apache.org/zh/builder…. (Download your own drawing components as needed)
  • Echarts drawing configuration (echarts.apache.org/zh/tutorial…

The mpvue-echart. vue file needs to be modified as follows +.in(this)

A quick look at the use on mpvue-Echarts (github.com/avocadowang…

Examples show static data, but in our project the data is always changing, so check out github.com/avocadowang… This example loads data lazily and is very nice.

Echarts has some unsupported features on applets that need to be noted

After looking at the examples on Git, plus echarts plotting configuration, basically can achieve the requirements of the product

Drawing summary

At this point, the drawing is complete, but the actual effect experience has some weird issues (withdrawal from the project 👇👇👇)

disadvantages

The actual experience of ios and Android will be very different. The experience of ios will be fine, while the experience of Drawing tooltips on Android phones will be problematic and poor

advantages

For coder familiar with Echarts, you can restore the design diagram quickly and freely