前言：

掘友们，大家好啊！今天上班就接到了新任务，导出html报告制作离线地图分析！任务从开发到现在用了一上午的时间，复杂其实也不复杂。只是设置api，考虑离线问题，画结构花费了一些时间，好在任务完成了，给大家分享一下关于离线瓦片地图的制作过程。

本篇文章分为上、下两篇，该篇为上篇，主要讲解利用echarts如何绘制离线中国地图，展示部分省份数据信息详情。下篇则是通过离线瓦片绘制地图街道详情，挂载元素图标信息！

实现效果

下边是小编PC端项目（在线版）展示的效果，产品需求就是要在生成的html报告中（离线版）展示，其路径是本地路径。

考虑问题

问题一: 离线版调取不到后台api接口，数据信息无法实时获取。

解决方法：

项目html报告导出的同时，由后台生成数据的js文件，一并打包。生成静态文件，前台封装方法将js文件数据挂载到window窗口上自定义属性上。

此处是小编封装的解析js文件的方法，src是传递本地js文件的路径。注意： 传递文件路径信息的时候，不要用绝对路劲。绝对路径会根据你的盘符查找文件，很容易出现问题！callback则是需要执行的方法和函数。

function loadScript(src, callback) {
  let script = document.createElement('script')
  let head = document.getElementsByTagName('head')[0]
  script.type = 'text/javascript'
  script.charset = 'UTF-8'
  script.src = src
  if (script.addEventListener) {
    script.addEventListener('load', function () {
      callback()
      head.removeChild(script)
    }, false)
  } else if (script.attachEvent) {
    script.attachEvent('onreadystatechange', function () {
      let target = window.event.srcElement
      if (target.readyState === 'loaded') {
        callback()
        head.removeChild(script)
      }
    })
  }
  head.appendChild(script)
}

1.此处是打包的静态js文件，js文件内容信息。

window.globalJSData['senior_function'] = [{"functionId":"map_analy","icon":"map_analy","title":"地理分析"},{"functionId":"finance","icon":"finance","title":"资金分析"}]

2.调用犯法获取文件数据

loadScript('./static/data/senior_function.js', () => {
  console.log(window.globalJSData['senior_function']);
})

问题二：echarts版本在V5之后，部分api去除，包括内置的地图数据。

解决方法：

引入echarts-map的json文件，文件地址：pan.baidu.com/s/1legFyZ4E… 提取码：hwk1。将下载后的文件放置静态文件夹目录下，在项目中引入echarts文件和json文件

import * as echarts from "echarts";
import china from "../../assets/map.china.json";

此处以vue2为例，在methods中定义方法，mounted中进入页面时调用showChart方法

methods: {  
  async showChart({ dateTimeFrom, dateTimeTo } = {}) {
    let _this = this;
    this.chart.mychart = echarts.init(
      document.getElementById("map-analysis-chart")
    );
    this.chart.mychart.showLoading();
    this.chart.mychart.hideLoading();
    loadScript("./static/data/senior_function/map/travel.js", () => {
      _this.chart.cities = window.globalJSData["map"]["travel"].data.cities;
      this.setOptionData();  // 获取导数据后渲染
    });
  },
}，
mounted() {
  this.showChart();
},

声明绘制map的option以及渲染数据

 setOptionData() {
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            if (p.data) {
              let {
                name,
                value,
                contacts,
                didis,
                photos,
                searchPoint,
                searchRoute,
                favoritePoint,
                favoriteRoute,
              } = p.data;
              return `联系人: ${contacts}<br>拍摄行为: ${photos}<br>搜索地点: ${searchPoint}<br>搜索路线: ${searchRoute}<br>收藏地点: ${favoritePoint}<br>收藏路线: ${favoriteRoute}<br>`;
            } else {
              return `联系人: 0<br>拍摄行为: 0<br>搜索地点: 0<br>搜索路线: 0<br>收藏地点: 0<br>收藏路线: 0<br>`;
            }
          },
        },
        visualMap: {
          show: true,
          min: 0.5,
          max: 1000,
          left: "right",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          seriesIndex: [0],
          inRange: {
            color: ["#FFFFFF", "#4AA0FA"],
          },
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "地理分析",
            type: "map",
            map: "china",
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              emphasis: {
                areaColor: "#f3dacf",
              },
            },
            data: [],
          },
        ],
      };
      let _this = this;
      if (_this.chart.cities.length > 0) {
        _this.chart.cities.forEach((item) => {
          let province = item.name.trim().split(" ")[0];
          if (province.endsWith("市")) {
            province = province.split("市")[0];
          }
          if (province.endsWith("省")) {
            province = province.split("省")[0];
          }
          if (province.startsWith("新疆")) {
            province = "新疆";
          }
          let contactLength = _this.chartType.includes("contact")
            ? item.contacts.length
            : 0;
          let photoLength = _this.chartType.includes("photo")
            ? item.photos.length
            : 0;
          let searchRouteLength = 0;
          let searchPointLength = 0;
          let favoritePointLength = 0;
          let favoriteRouteLength = 0;
          if (option.series[0].data.some((i) => i.name === province)) {
            let targetProvince = option.series[0].data.find(
              (i) => i.name === province
            );
            targetProvince.value +=
              contactLength +
              searchRouteLength +
              searchPointLength +
              photoLength +
              favoritePointLength +
              favoriteRouteLength;
            targetProvince.contacts += contactLength;
            targetProvince.photos += photoLength;
            targetProvince.favoriteRoute += favoriteRouteLength;
            targetProvince.favoritePoint += favoritePointLength;
            targetProvince.searchRoute += searchRouteLength;
            targetProvince.searchPoint += searchPointLength;
          } else {
            option.series[0].data.push({
              name: province,
              value:
                contactLength +
                searchRouteLength +
                searchPointLength +
                photoLength +
                favoriteRouteLength +
                favoritePointLength,

              contacts: contactLength,
              // didis: didiLength,
              photos: photoLength,
              favoriteRoute: favoriteRouteLength,
              favoritePoint: favoritePointLength,
              searchRoute: searchRouteLength,
              searchPoint: searchPointLength,
              level: "province",
            });
          }
        });
        _this.chart.option = JSON.parse(JSON.stringify(option));
        _this.chart.optionOri = JSON.parse(JSON.stringify(option));
        _this.chart.mychart.setOption(option);
        _this.chart.mychart.on("click", async function (a) {
          if (a.name) {
            _this.showPanel = true;
            _this.showMapAnalysisDetails();
          }
        });
      }
    },

项目完成预览

注意html报告的文件路径是本地的哦！

项目地址：github.com/huangzhilei…

我已经把项目模板上传到了github，大家可以拉下来阅读下，有意见或者不太懂的可以问小编，小编会一一解答的。

项目启动：

npm i  // 安装依赖
npm run dev // 启动项目