vue3 echarts使用外部json调用不同的城市地图

1.新增echarts

npm install echarts --save

2.导入城市地图

import * as echarts from echarts
import echarts/map/js/province/shanxi

3.城市地图初始化

let demo = this.$echarts.init(document.getElementById(demo))
demo.setOption({
        // 图表主标题
        title: {
          // 文本
          text: ,
          // 值: top, middle, bottom 也可以是具体的值或者百分比
          top: 25,
          // 值: left, center, right 同上
          left: center,
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,
            // 字体粗细
            fontWeight: 650,
            // 字体颜色
            color: #fff
          }
        },
        series: [
          {
            // 类型
            type: map,
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            map:山西,
            // 地图类型
            mapType: province,
            // 是否开启鼠标缩放和平移漫游 默认不开启
            // 如果只想要开启缩放或者平移，可以设置成 scale 或者 move 设置成 true 为都开启
            roam: true,
            // 定位 值: top, middle, bottom 也可以是具体的值或者百分比
            top: 70,
            // 图形上的文本标签
            label: {
              show: true, // 是否显示对应地名
              color: #fff
            },
            regions: [{ // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
              name: 太原市, // 对应的是import echarts/map/js/province/shanxi 数据中的名称如: name: "太原市"
              itemStyle: {
                normal: {
                  opacity: 1, // 透明度
                  borderColor: #fff, // 省份界线颜色
                  borderWidth: 3, // 省份界线的宽度
                  areaColor: red // 整个省份的颜色
                }
              }
            }],
            // 地图区域的多边形 图形样式
            itemStyle: {
              // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
              areaColor: #5fb3fe,
              // 描边线宽 为 0 时无描边
              borderWidth: 0.5,
              // 图形的描边颜色 支持的颜色格式同 color
              borderColor: green,
              // 描边类型，默认为实线，支持 solid, dashed, dotted
              borderType: solid
            },
            // 高亮状态
            emphasis: {
              // 文本标签
              label: {
                // 是否显示标签
                show: true,
                // 文字的颜色 如果设置为 auto，则为视觉映射得到的颜色，如系列色
                color: #fff
              },
              // 图形样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: #4551df
              }
            },

            // 地图系列中的数据内容数组，数组项可以为单个数值
            data: this.list
          }
        ]
      })

4.导入外部json调用城市地图，必须要先导入注册才能调用

let all = require(./new_json/140100.json)
 echarts.registerMap(二级城市, all)

5.修改map展示不同城市，对应上面注册地图时的"二级城市"即可