e-charts中的基本配置------基础地图

backgroundColor:背景色
grid:图表离容器的距离
title:标题组件

left、right、top、bottom: title组件离容器距离
text:标题内容
textStyle：标题的样式

---

series

type:表示类型 这里用的是map
mapType:必须存在
label:图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等：

normal:表示正常状态
emphasis：显示高亮状态
show:是否显示 这儿作用显示地图上的文字

实现思路：
这里简述安装与引入 若需要请跳转vue中使用echarts
1、通过地图选择器下载你需要的地图的json文件
2、在你需要的组件内创建echarts容器
3、在你需要的组件内引入json文件
4、在你需要的组件内的mounted或data中定义配置项

配置项必须有的属性(其余都是样式及布局的调整)

html

<div style="width: 100%; height: 100%;" ref="myCharts" ></div>

js

import linFen from "../assets/141000"; //必须引入json
mounted{
    const myCharts = this.$echarts.init(this.$refs.myCharts);
    var mapName = "临汾市";
    this.$echarts.registerMap(mapName, linFen);
      series: [
        {
          type: "map",
          mapType: mapName,
        },
      ],
    myCharts.setOption(options);
 }

全部代码（本例中的配置项写在mounted中）

<template>
    <div style="width: 100%; height: 100%;" ref="myCharts" ></div>
</template>

<script>
import linFen from "../assets/141000"; //引入临汾市的地图边界经纬度json 重点
//    const linFen = require(`../../../public/city-provinces/city-provinces/citys/${num}.json`)  动态获取json
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {};
  },
  methods: {},
  mounted() {
    const myCharts = this.$echarts.init(this.$refs.myCharts);	 //初始化图表
    var mapName = "临汾市";										
    this.$echarts.registerMap(mapName, linFen);					//echarts的api   注册可用的地图
    var options = {
      backgroundColor: "rgb(24,26,29)",							//背景色
      grid: {													//图表距离容器的距离
        x: 30,
        y: 0,
        x2: 30,
        y2: 20,
      },
      title: {												   //标题									
        left: "center",			
        top: 10,
        text: mapName,
        textStyle: {
          color: "white",
        },
      },

      series: [												 //图表类型
        {
          type: "map",
          mapType: mapName,									//必须
          label: {											//图标上的文字
            normal: {										//正常情况
              show: true,
              formatter: "{b}",
              position: "top",
              marginLeft: 10,
              rotate: 45,
            },
            emphasis: {										//高亮时
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {										//地图区域的多边形 图形样式
            normal: {
              borderColor: "#389BB7",
              areaColor: "rgb(3,88,205)",
            },
            emphasis: {
              areaColor: "rgb(155,38,38)",
              borderWidth: 0,
            },
          },

          animation: false,
        },
      ],
    };
    myCharts.setOption(options);
  },
  // 监听值变化
  watch: {},
  // 计算
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>

效果图