echats图表显示中国地图及各省份城市的展示，可通过点击省份进入城市图表(单图表展示)

概要

项目中，我们可能会用到地图类的图表，首先可以展示出中国地图的底板，并显示各省份的数据情况，根据数据进行热力图的展示，点击省份可以进入城市，展示各城市的数据情况和热力情况。具体效果如图所示：


上面的示例我们使用到echats图表插件，下面我们来看一下搭建流程

安装echats

这里我是通过脚手架的方式进行项目搭建，通过npm的方式安装插件。在package.json查看插件的具体版本。

npm i -S echarts

引入echarts

在需要展示图表的页面，引入插件。如果对项目的体积有要求，也可以使用按需引入得方式。

import echarts from "echarts";

引入中国地图JSON

这里的JSON文件是中国地图的底板文件，跟数据没有关系，在提供数据时，字段的值需要与省份名字一致。
文章中涉及到的文件会在下方给出附件链接

import chinaMap from "@/utils/china.json";

初始化地图

这里可以先把demo进行复制，然后根据具体需求进行修改。

    //初始化地图
    initEchartParams() {
   
      //取最大和最小
      //const maxValue = data.reduce((max, obj) => Math.max(max, obj.value), 0);
      // 1. 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.echarts3);
      // 2. 引入要显示的地图 json 文件（json文件可以是echart自带的，也可以是自己下载的）
      //console.log(chinaMap)
      this.mapJson = chinaMap;
      // 3. 注册可用的地图 registerMap("自定义的名字，要和option中map:''对应",注册的地图指向的json文件)
      echarts.registerMap("mapJson", this.mapJson);
      // 4. 指定图表的配置项和数据
      this.option = {
   
        // 右上角下载的按钮
        toolbox: {
   
          feature: {
   
            //saveAsImage: {}, // 下载的按钮
            myFull: {
   
              // 全屏
              show: true,
              title: "全屏",
              icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
              icon: "M95.500388 368.593511c0 11.905658-9.637914 21.543572-21.543573 21.543572-11.877311 0-21.515225-9.637914-21.515225-21.543572V188.704684c0-37.502824 15.307275-71.575684 39.997343-96.265751s58.762928-39.997342 96.265751-39.997343h179.888827c11.905658 0 21.543572 9.637914 21.543572 21.515225 0 11.905658-9.637914 21.543572-21.543572 21.543573H188.704684c-25.625512 0-48.926586 10.488318-65.821282 27.383014s-27.383014 40.19577-27.383014 65.821282v179.888827z m559.906101-273.093123c-11.877311 0-21.515225-9.637914-21.515226-21.543573 0-11.877311 9.637914-21.515225 21.515226-21.515225h179.917174c37.502824 0 71.547337 15.307275 96.237404 39.997343s40.025689 58.762928 40.02569 96.265751v179.888827c0 11.905658-9.637914 21.543572-21.543572 21.543572-11.877311 0-21.515225-9.637914-21.515226-21.543572V188.704684c0-25.625512-10.488318-48.926586-27.411361-65.821282-16.894696-16.894696-40.19577-27.383014-65.792935-27.383014h-179.917174z m273.12147 559.906101c0-11.877311 9.637914-21.515225 21.515226-21.515226 11.905658 0 21.543572 9.637914 21.543572 21.515226v179.917174c0 37.474477-15.335622 71.547337-40.02569 96.237404s-58.734581 39.997342-96.237404 39.997343h-179.917174c-11.877311 0-21.515225-9.637914-21.515226-21.515225s9.637914-21.543572 21.515226-21.543573h179.917174c25.597165 0 48.898239-10.488318 65.792935-27.383014 16.923043-16.894696 27.411361-40.19577 27.411361-65.792935v-179.917174z m-559.934448 273.093123c11.905658 0 21.543572 9.666261 21.543572 21.543573s-9.637914 21.515225-21.543572 21.515225H188.704684c-37.502824 0-71.575684-15.307275-96.265751-39.997343s-39.997342-58.762928-39.997343-96.237404v-179.917174c0-11.877311 9.637914-21.515225 21.515225-21.515226 11.905658 0 21.543572 9.637914 21.543573 21.515226v179.917174c0 25.597165 10.488318 48.898239 27.383014 65.792935s40.19577 27.383014 65.821282 27.383014h179.888827z",
              onclick: (e) =>