Project background: Used Echarts in wechat mini program and completed the drawing and rendering function in the mini program based on the Autonavi coordinate system. I haven’t done this before. I searched the project case online before, but the final result couldn’t be realized. Record the process and welcome everyone to discuss

echarts+amap

I. Open source plug-ins on the Internet at presentecharts-extension-amap

1.Chinese document

2. Online Project case based on this plug-in:

1. Amap uses ECharts to achieve data visualization

2.Echarts and Amap/Baidu Map combined with wind visualization example Demo Baidu unauthorized use of map API problems in echart instance json file echarts-amap.min.js

3. Echarts combines AUtonavi API (AMAP) to make scatter point and migration graph Vue

4.AMap + Echarts, Google Map + D3.js respectively to achieve the flight map (migration map) in data visualization

3. Principle of plug-ins

Based on the method in the plug-in, the amap component is obtained from the echart instance.

 // Get the Amap component instance from the ECharts instance
 var amap = chart.getModel().getComponent('amap').getAMap();
 
Copy the code

4. Method of reference (seeChinese document)

npm install echarts-extension-amap –sav

5. Problems encountered with references in applets: Packages cannot be referenced properly

Reference method 1: Install the reference using NPM. After NPM install is used in the small program, the package cannot be used normally. After analyzing the problem from various aspects, other packages can be installed and normal import can be found in the small program. It is suspected that there may be a problem with the package or the construction in the small program.

Reference method 2: Use script tag to reference CDN files. The small program does not support the introduction of external JS files. If you want to reference, you can expose the method through export and then import it.

Small program installation package construction method:

  1. npm install
  2. Local Settings – Use the NPM package

  1. Tools — Build NPM (Build successful)

  1. The introduction of
/ / use the require
const iecharts = require('echarts');
const echartsExtensionAmap= require('echarts-extension-amap');
Copy the code

All kinds of errors. It can’t be solved.

VM1480:63 pages (pages/echartsmap/echartsmap] Error: Error: the module “pages/echartsmap/echarts” is not defined

Reread the official applets NPM documentation and look for problems.

Setting the miniprogramRoot directory does not resolve the problem.

In response to this problem, I left a message to the plug-in author. The plug-in author replied that this plug-in can not be used for small programs, so I remind those who read this article to give up the road

Second, echarts – amap. Min. Js

Install also reported an error when importing packages.

Record and come back later with other plans