echarts结合amap (echarts-extension-amap)

最新推荐文章于 2026-07-01 11:42:38 发布

原创

最新推荐文章于 2026-07-01 11:42:38 发布 · 6.3k 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客主要记录了作者在整合Echarts与高德地图(Amap)过程中遇到的问题及解决方案。内容包括实现效果的展示、安装步骤以及在地图页面中可能遇到的错误和解决方法。

网上高德结合echarts资源太少了，有的还需要下载收费，自己踩了好多坑，最终实现了，我把这整理成文档，

一、是为了自己把知识记录下来

二、是为了方便别人尽量少总弯路

实现效果

安装

npm install echarts-extension-amap --save

首先

在index.vue页面引入高德api

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>大数据平台</title>
    <script src="./static/js/ezuikit.js"></script>
    <script src="/https://webapi.amap.com/maps?v=2.0&key=XXX&plugin=AMap.PolygonEditor"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

地图页面

import echarts from "echarts";
import "echarts-extension-amap";
export default {
  data() {
    return {
      linesData: {
        saddr: {
          name: "潼江河谷优质粮油现代农业园区",
          fromCoord: ["105.171696", "31.780457"],
        },
        eaddr: [
          {
            area: "苏仙区",
            province: "湖南省",
            detailaddr: "湖南省郴州s市",
            city: "郴州市",
            total: "1200000",
            eaddr: "113.082857,25.698858",
            name: "湖南省",
            valu