地理坐标/地图

遇到的难点

• 问题 1:3D 地图中平移/缩放地图，geo 地图和 map 地图不同步
• 问题 2:tooltip 内部写 html 代码事件支持、定位位置计算、背景图定位位置
• 问题 3:水波纹图标上面写文本
• 问题 4:注册中国地图时名字要叫china,其他名字会导致没有南海诸岛
• 问题 5: 多个弹框方案
• 窗口大小变化（包含全屏）导致地图响应式变化

查看代码详情

<template>
  <div class="wrap-map">
    <div ref="map" class="map"></div>
    <div class="data-select">
      <input v-model="dataUrl" />
      <button @click="handlerChangeData">切换数据</button>
    </div>
  </div>
</template>
  
  <script>
const labelRight = {
  position: "right",
};
export default {
  name: "WebMap",
  props: {
    config: {
      type: Function,
    },
    data: {
      type: [Array, Object],
      default: () => [],
    },
    params: {
      type: Object,
    },
    styles: {
      type: String,
      default: "height: 100%;width:800px;",
    },
    title: {
      type: [Array, Object],
      default: () => [
        {
          text: "统计数据",
          subtext: "单位：个",
        },
      ],
    },
    tooltip: {
      type: [Array, Object],
      default: () => [
        {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
      ],
    },
    grid: {
      type: [Array, Object],
      default: () => [
        {
          top: "250",
          bottom: 30,
        },
      ],
    },
    legend: {
      type: [Array, Object],
      default: () => [
        {
          orient: "vertical",
          left: "0%",
          top: "0%",
          bottom: "center",
          data: ["<10w", "10w-50w", "50w-100w", "100w-500w", ">500w"],
        },
      ],
    },
    xAxis: {
      type: [Array, Object],
      default: () => [
        {
          show: false,
        },
      ],
    },
    yAxis: {
      type: [Array, Object],
      default: () => [
        {
          show: false,
        },
      ],
    },
    series: {
      type: [Array, Object],
      default: () => [
        {
          type: "pie",
          radius: ["58%", "68%"],
        },
      ],
    },
  },
  data() {
    return {
      dataUrl: "",
      option: {
        title: this.titleTransform(this.title),
        tooltip: this.tooltip,
        grid: this.grid,
        legend: this.legend,
        series: this.series,
        mapInstance: "",
      },
    };
  },
  methods: {
    handlerChangeData() {
      this.$emit("changeData", this.dataUrl);
    },
    titleTransform({ text, subtext, ...others }) {
      let arr = [];
      let target = {};
      if (text) {
        target = {
          text: "{style1|}{style2|}{style3|}" + text,
          textStyle: {
            fontWeight: "800",
            color: "#333",
            fontSize: 18,
            rich: {
              style1: {
                height: 20,
                width: 4,
                backgroundColor: "#2d65f2",
              },
              style2: {
                height: 20,
                width: 4,
                backgroundColor: "#b2c2ff",
              },
              style3: {
                width: 10,
              },
            },
          },
          left: 0,
          top: 0,
          ...others,
        };
        arr.push(target);
      }
      if (subtext) {
        target = {
          subtext: "{style1|}" + subtext,
          subtextStyle: {
            align: "right",
            verticalAlign: "top",
            color: "#666",
            fontSize: "18",
            rich: {
              style1: {},
            },
          },
          right: 0,
          top: -10,
          ...others,
        };
      }
      arr.push(target);
      return arr;
    },
    mapGetOption(val) {
      if (!this.config) {
        return {
          ...this.option,
          title: this.option.title
            ? this.titleTransform(this.option.title)
            : [],
        };
      } else {
        let { title, ...option } = this.config(val, this.mapInstance);
        return {
          title: title ? this.titleTransform(title) : [],
          ...option,
        };
      }
    },
    mapSetOption(options) {
      this.mapInstance.setOption(options);
    },
    handlerClick(Map) {
      Map.getZr().on(
        "click",
        function (params) {
          var pixelPoint = [params.offsetX, params.offsetY];
          var dataPoint = Map.convertFromPixel({ geoIndex: 0 }, pixelPoint);
          this.$emit("click", Map);
        }.bind(this)
      );
    },
    handlerOutSideClick(Map) {
      Map.getZr().on(
        "click",
        function (params) {
          var pixelPoint = [params.offsetX, params.offsetY];
          var dataPoint = Map.convertFromPixel({ geoIndex: 0 }, pixelPoint);
          this.$emit("click", Map);
        }.bind(this)
      );
    },
    handlerResize(Map) {
      Map.getZr().on(
        "click",
        function (params) {
          var pixelPoint = [params.offsetX, params.offsetY];
          var dataPoint = Map.convertFromPixel({ geoIndex: 0 }, pixelPoint);
          this.$emit("click", Map);
        }.bind(this)
      );
    },
    handlerScaleMove(Map) {
      Map.getZr().on(
        "click",
        function (params) {
          var pixelPoint = [params.offsetX, params.offsetY];
          var dataPoint = Map.convertFromPixel({ geoIndex: 0 }, pixelPoint);
          this.$emit("click", Map);
        }.bind(this)
      );
    },
  },
  beforeCreate() {
    this.$emit("mapBeforeCreate", this.$echarts);
  },
  created() {
    this.option = this.mapGetOption(this.data);
    if (Array.isArray(this.option.geo)) {
      if (this.option.geo[0].map === "world") {
        this.$echarts.registerMap("world", this.$world);
        this.option.geo[0].nameMap = require("./nameMap").default;
      } else {
        this.$echarts.registerMap("china", this.$china);
      }
    } else {
      if (this.option.geo.map === "world") {
        this.$echarts.registerMap("world", this.$world);
        this.option.geo.nameMap = require("./nameMap").default;
      } else {
        this.$echarts.registerMap("china", this.$china);
      }
    }
    this.$emit("mapCreated", this.$echarts);
  },
  beforeMount() {
    this.$emit("mapBeforeMount", this.$echarts);
  },
  mounted() {
    this.mapInstance = this.$echarts.init(this.$refs.map);
    this.mapSetOption(this.option);
    this.$emit("echarts", this.mapInstance);
    this.handlerClick(this.mapInstance);
    this.handlerOutSideClick(this.mapInstance);
    this.handlerResize(this.mapInstance);
    this.handlerScaleMove(this.mapInstance);
  },
  beforeUpdate() {
    this.$emit("mapBeforeUpdate", this.$echarts);
  },
  updated() {
    this.$emit("mapUpdated", this.$echarts);
  },
  beforeDestroy() {
    this.$emit("mapBeforeDestroy", this.$echarts);
  },
  destroyed() {
    this.$emit("mapDestroyed", this.$echarts);
  },
  watch: {
    data: {
      handler(val) {
        if (!val.length || !this.mapInstance) return;
        this.mapSetOption(this.mapGetOption(val));
      },
      deep: true,
    },
    params: {
      handler(val) {
        if (!val.length || !this.mapInstance) return;
        this.mapSetOption(this.mapGetOption(val));
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap-map {
  height: 100%;
  width: 100%;
  position: relative;
  .map {
    height: 100%;
    width: 100%;
  }
  .data-select {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

1.单个地图-中国地图

• 改造 geojson 文件使中国地图外轮廓和中国地图放在一起形成一个图层实现地图 3d 效果

查看代码详情

<template>
  <WebMap
    :config="getOptions"
    :data="data"
    @mapCreated="mapCreated"
    @changeData="getData"
  ></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.getData(1);
  },
  methods: {
    async getData(url) {
      let res = await this.$api.getMap(url);
      if (res.data) {
        this.data = res.data.map((item) => ({
          ...item,
          value: [item.latitude, item.longitude],
        }));
      }
    },
    mapCreated(echarts) {
      echarts.registerMap("china", this.$china3);
    },
    getOptions(data) {
      return {
        title: {
          text: "旅游导航",
          subtext: "时间/详情",
        },
        tooltip: {
          show: true,
          formatter: function ({ data }) {
            return (
              "<div style='max-width:200px;white-space: normal;'>" +
              data.time +
              "<br/>" +
              data.detail +
              "</div>"
            );
          },
        },
        geo: {
          roam: true,
          map: "china",
          zoom: 1.14,
          top: "10%",
          right: "16%",
          left: "16%",
          bottom: "10%",
          scaleLimit: {
            min: 1,
            max: 80,
          },
          ...{
            // 普通样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              show: true,
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "rgba(255,255,255,1)",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                },
              },
            },
            regions: [
              {
                name: "南海诸岛",
                ...{
                  // 普通样式
                  label: {
                    show: true,
                    color: "rgba(130,143,200,1)",
                  },
                  itemStyle: {
                    show: true,
                    borderWidth: 1,
                    borderColor: "rgba(196,207,254,1)",
                    areaColor: "rgba(229,236,249,1)",
                  },
                },
                emphasis: {
                  // hover样式
                  label: {
                    show: true,
                    color: "rgba(130,143,200,1)",
                  },
                  itemStyle: {
                    borderColor: "rgba(196,207,254,1)",
                    borderWidth: 1,
                    areaColor: "rgba(229,236,249,1)",
                  },
                },
              },
              {
                name: "country",
                label: {
                  show: false,
                },
                itemStyle: {
                  areaColor: "#e5ecf9",
                  shadowColor: "rgba(158,201,243,0.85)",
                  borderColor: "rgba(183,219,255,1)",
                  shadowOffsetX: 9,
                  shadowOffsetY: 9,
                },
              },
            ],
          },
        },
        series: [
          {
            geoIndex: 0,
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: function (val) {
              return [6, 3];
            },
            showEffectOn: "emphasis",
            zlevel: 2,
            rippleEffect: {
              period: 2.5, //波纹秒数
              brushType: "stroke", //stroke(涟漪)和fill(扩散)，两种效果
              scale: 6, //波纹范围
            },
            hoverAnimation: true,
            ...{
              // 普通样式
              label: {
                show: true,
                distance: 18,
                position: "top",
                formatter: function ({ data }) {
                  return "{text|" + data.name + " | " + data.time + "}";
                },
                textStyle: {
                  rich: {
                    text: {
                      color: "#fff",
                      backgroundColor: "#aad1ff",
                      borderWidth: 1,
                      borderType: "solid",
                      borderColor: "#4263e8",
                      boxShadow: "0px 1px 4px #7998d6",
                      fontSize: 14, //字体大小
                      padding: [4, 4, 4, 4],
                    },
                  },
                },
              },
              itemStyle: {
                color: "#0579FA", //字体和点颜色
              },
            },
            emphasis: {
              // hover样式
              label: {
                show: true,
                distance: 18,
                position: "top",
                formatter: function ({ data }) {
                  return "{text|" + data.name + " | " + data.time + "}";
                },
                textStyle: {
                  rich: {
                    text: {
                      color: "#fff",
                      backgroundColor: "red",
                      borderWidth: 1,
                      borderType: "solid",
                      borderColor: "#4263e8",
                      boxShadow: "0px 1px 4px #7998d6",
                      fontSize: 14, //字体大小
                      padding: [4, 4, 4, 4],
                    },
                  },
                },
              },
              itemStyle: {
                color: "#0579FA", //字体和点颜色
              },
            },
            ...{
              // 选中样式
              selectedMode: "single",
              select: {
                label: {
                  show: true,
                  distance: 18,
                  position: "top",
                  formatter: function ({ data }) {
                    return "{text|" + data.name + " | " + data.time + "}";
                  },
                  textStyle: {
                    rich: {
                      text: {
                        color: "#fff",
                        backgroundColor: "#aad1ff",
                        borderWidth: 1,
                        borderType: "solid",
                        borderColor: "#4263e8",
                        boxShadow: "0px 1px 4px #7998d6",
                        fontSize: 14, //字体大小
                        padding: [4, 4, 4, 4],
                      },
                    },
                  },
                },
                itemStyle: {
                  color: "blue", //字体和点颜色
                },
              },
            },
            data: data,
          },
        ],
      };
    },
  },
};
</script>

2.单个地图-轮播

查看代码详情

<template>
  <WebMap ref="map" :config="getOptions" :data="data"></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.data = [
      ["省份", "tt", "大区名", "补货绿", "日环比", "渐变色"],
      ["新疆", "799", "新疆大区", "800", "800", "800"],
      ["山东", "499", "山东大区", "34", "61", "67"],
      ["云南", "199", "西南大区", "800", "69", "389"],
    ];

    var count = 0;
    var timeTicket = null;
    var dataLength = 3;
    timeTicket && clearInterval(timeTicket);
    timeTicket = setInterval(() => {
      this.$refs.map.mapInstance.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      this.$refs.map.mapInstance.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: count % dataLength,
      });
      this.$refs.map.mapInstance.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count % dataLength,
      });
      count++;
    }, 1000);
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "geo + map",
          subtext: "单位：元",
        },
        dataset: {
          source: data,
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            return (
              "&nbsp;&nbsp;" +
              params.name +
              "&nbsp;&nbsp;&nbsp;" +
              params.data[3] +
              "人&nbsp;&nbsp;"
            );
          },
        },
        visualMap: {
          type: "piecewise",
          left: "15",
          bottom: "50",
          itemWidth: 27,
          itemHeight: 15,
          dimension: 3,
          textStyle: {
            color: "#333333",
            fontSize: 14,
          },
          pieces: [
            {
              min: 500,
              label: ">500",
            },
            {
              max: 500,
              min: 200,
              label: "200-500",
            },
            {
              max: 200,
              min: 0,
              label: "<200",
            },
            {
              value: 0,
              label: "无数据",
            },
          ],
          inRange: {
            color: ["#B2CAE0", "#D2EAFF", "#8AC6FD", "#45A5F8"],
          },
          outOfRange: {
            color: ["#999999"],
          },
        },
        geo: {
          roam: true,
          map: "china",
          scaleLimit: {
            min: 1,
            max: 20,
          },
          zoom: 1.14,
          top: "10%",
          right: "16%",
          left: "16%",
          bottom: "10%",
          ...{
            // 普通样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              show: true,
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "rgba(255,255,255,1)",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                  
                },
              },
            },
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.75,
            label: {
              show: true,
              distance: 18,
              position: "top",
              formatter: function ({ data }) {
                if (data.time) {
                  return "{text|" + data.name + "|" + data.time + "}";
                } else {
                  return "{text|" + data.name + "}";
                }
              },
              textStyle: {
                rich: {
                  text: {
                    color: "#fff",
                    backgroundColor: "#aad1ff",
                    borderWidth: 1,
                    borderType: "solid",
                    borderColor: "#4263e8",
                    boxShadow: "0px 1px 4px #7998d6",
                    fontSize: 14, //字体大小
                    padding: [4, 4, 4, 4],
                  },
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#B2CAE0",
                borderColor: "#fff",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#FFAE00",
              },
            },
          },
        ],
      };
    },
  },
};
</script>

3.多个地图-3d 特效

• 双图层叠加方案

• 支持拖动、缩放同步

查看代码详情

<template>
  <WebMap
    :config="getOptions"
    :data="data"
    @mapCreated="mapCreated"
    @changeData="getData"
    @echarts="handleEvent"
  ></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      currentLocal: { name: "当前位置", value: [] },
    };
  },
  async created() {
    // this.getCurrentLocal();
    this.getData(1);
  },
  methods: {
    getCurrentLocal() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function successCallback(position) {
            const { latitude, longitude } = position.coords; // 纬度
            this.currentLocal.value = [longitude, latitude];
          },
          function errorCallback(error) {
            console.log("获取位置信息失败：" + error.message);
          }
        );
      } else {
        console.log("该浏览器不支持获取当前位置信息");
      }
    },
    async getData(url) {
      let res = await this.$api.getMap(url);
      if (res.data) {
        this.data = res.data.map((item) => ({ ...item, value: item.descript }));
      }
    },
    mapCreated() {},
    handleEvent(e) {
      e.on("georoam", function (params) {
        var option = e.getOption();
        if (params.zoom != null && params.zoom != undefined) {
          option.geo[0].zoom = option.series[0].zoom;
          option.geo[0].center = option.series[0].center;
        } else {
          option.series[0].center = option.geo[0].center;
        }
        e.setOption(option);
      });
    },
    getOptions(data) {
      return {
        title: {
          text: "geo + 多个map",
          subtext: "单位：元",
        },
        tooltip: {
          formatter: function (params) {
            return ['<div style="max-width:200px;">' + params + "</div>"];
          },
        },
        geo: [
          {
            map: "china",
            zoom: 1.14,
            top: "10%",
            right: "16%",
            left: "16%",
            bottom: "10%",
            roam: true,
            itemStyle: {
              areaColor: "#e5ecf9",
              shadowColor: "rgba(158,201,243,0.85)",
              borderColor: "rgba(183,219,255,1)",
              shadowOffsetX: 9,
              shadowOffsetY: 9,
              emphasis: {
                areaColor: "rgba(229,236,249,1)",
                borderWidth: 0,
                label: {
                  show: true,
                },
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  areaColor: "rgba(0, 10, 52, 1)",
                  borderColor: "rgba(0, 10, 52, 1)",
                  opacity: 0,
                  label: {
                    show: true,
                    color: "#009cc9",
                  },
                },
              },
            ],
          },
        ],
        series: [
          {
            map: "china", //使用
            type: "map",
            zoom: 1.14,
            top: "10%",
            right: "16%",
            left: "16%",
            bottom: "10%",
            roam: true,
            ...{
              // 普通样式
              label: {
                show: false,
                color: "rgba(130,143,200,1)",
              },
              itemStyle: {
                borderWidth: 1,
                borderColor: "rgba(196,207,254,1)",
                areaColor: "rgba(229,236,249,1)",
              },
            },
            emphasis: {
              // hover样式
              label: {
                show: true,
                color: "rgba(130,143,200,1)",
              },
              itemStyle: {
                borderColor: "rgba(196,207,254,1)",
                borderWidth: 1,
                areaColor: "rgba(229,236,249,1)",
              },
            },
            ...{
              // 选中样式
              selectedMode: "single",
              select: {
                label: {
                  color: "#333",
                },
                itemStyle: {
                  areaColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "rgba(66,99,232,1)" },
                      { offset: 1, color: "rgba(55,183,249,1)" },
                    ],
                    
                  },
                },
              },
            },
            data,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            zlevel: 1,
            symbolSize: function (val) {
              return [6, 3];
            },
            showEffectOn: "render",
            zlevel: 2,
            rippleEffect: {
              period: 2.5, //波纹秒数
              brushType: "stroke", //stroke(涟漪)和fill(扩散)，两种效果
              scale: 6, //波纹范围
            },
            hoverAnimation: true,
            label: {
              formatter: function ({ data }) {
                if (data.time) {
                  return "{text|" + data.name + "|" + data.time + "}";
                } else {
                  return "{text|" + data.name + "}";
                }
              },
              distance: 18,
              position: "top",
              show: true,
              textStyle: {
                rich: {
                  text: {
                    color: "#fff",
                    backgroundColor: "#aad1ff",
                    borderWidth: 1,
                    borderType: "solid",
                    borderColor: "#4263e8",
                    boxShadow: "0px 1px 4px #7998d6",
                    fontSize: 14, //字体大小
                    padding: [4, 4, 4, 4],
                  },
                },
              },
            },
            itemStyle: {
              color: "#0579FA", //字体和点颜色
            },
            data: data.map((item) => ({
              ...item,
              label: {
                formatter: "{b}",
                color: "red",
              },
              itemStyle: {
                color: "#96cc34",
              },
            })),
          },
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 8, //箭头指向速度，值越小速度越快
              trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "triangle", //箭头图标
              symbolSize: [30, 30], //图标大小
            },
            lineStyle: {
              normal: {
                color: "#1DE9B6",
                width: 0, //线条宽度
                opacity: 0, //尾迹线条透明度
                curveness: -2, //尾迹线条曲直度
              },
            },
            // data,
          },
          {
            type: "lines",
            zlevel: 3,
            effect: {
              show: true,
              period: 8, //箭头指向速度，值越小速度越快
              trailLength: 0.7, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolOffset: ["34%", "-50%"],
              symbolSize: [10, 10], //图标大小
            },
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(255 255 0 ,1)" },
                  { offset: 0.5, color: "rgba(255 255 0 ,0.2)" },
                  { offset: 1, color: "rgba(255 255 0 ,0)" },
                ],
                
              },
              width: 0.3, //线条宽度
              opacity: 0.3, //尾迹线条透明度
              curveness: -2, //尾迹线条曲直度
            },
            data: data
          },
        ],
      };
    },
  },
};
</script>

4.单个地图+柱状图

查看代码详情

<template>
  <WebMap @echarts="handleEvent" :config="getOptions" :data="data"></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getMap(2);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    handleEvent(e) {
      e.on("georoam", function (params) {
        var option = e.getOption();
        if (params.zoom != null && params.zoom != undefined) {
          option.geo[0].zoom = option.series[0].zoom;
          option.geo[0].center = option.series[0].center;
        } else {
          option.series[0].center = option.geo[0].center;
        }
        e.setOption(option);
      });
    },
    getOptions(data) {
      var yData = [];
      var barData = [];

      for (var i = 0; i < 10; i++) {
        barData.push(data[i]);
        yData.push(i + data[i].name);
      }
      return {
        title: {
          text: "geo + map + bar",
          subtext: "单位：元",
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            return params.name + "：" + params.data["value"] + "%";
          },
        },
        visualMap: {
          type: "continuous",
          orient: "horizontal",
          itemWidth: 10,
          itemHeight: 80,
          text: ["高", "低"],
          showLabel: true,
          seriesIndex: [0],
          min: 0,
          max: 2,
          inRange: {
            color: ["#6FCF6A", "#FFFD64", "#FF5000"],
          },
          textStyle: {
            color: "#7B93A7",
          },
          bottom: 30,
          left: "left",
        },
        grid: {
          right: 10,
          top: 135,
          bottom: 100,
          width: "20%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            interval: 0,
            margin: 85,
            textStyle: {
              color: "#455A74",
              align: "left",
              fontSize: 14,
            },
            rich: {
              a: {
                color: "#fff",
                backgroundColor: "#FAAA39",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
              b: {
                color: "#fff",
                backgroundColor: "#4197FD",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
            },
            formatter: function (params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return [
                  "{a|" +
                    (parseInt(params.slice(0, 1)) + 1) +
                    "}" +
                    "  " +
                    params.slice(1),
                ].join("\n");
              } else {
                return [
                  "{b|" +
                    (parseInt(params.slice(0, 1)) + 1) +
                    "}" +
                    "  " +
                    params.slice(1),
                ].join("\n");
              }
            },
          },
          data: yData,
        },
        geo: {
          roam: true,
          map: "china",
          zoom: 1.14,
          top: "10%",
          right: "16%",
          left: "16%",
          bottom: "10%",
          ...{
            // 普通样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "#333",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                  
                },
              },
            },
          },
        },
        series: [
          {
            name: "mapSer",
            type: "map",
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: data,
          },
          {
            name: "barSer",
            type: "bar",
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 8,
            barGap: 0,
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFD119", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#FFAC4C", // 100% 处的颜色
                        },
                      ],
                    },
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00C0FA", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#2F95FA", // 100% 处的颜色
                        },
                      ],
                    },
                  ];
                  if (params.dataIndex < 3) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                },
                barBorderRadius: 15,
              },
            },
            data: barData,
          },
        ],
      };
    },
  },
};
</script>

5.单个地图

查看代码详情

<template>
  <WebMap
    @echarts="handleEvent"
    :config="getOptions"
    :data="data"
    @mapCreated="mapCreated"
  ></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getMap();
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    mapCreated(echarts) {
      echarts.registerMap("china", this.$china2);
    },
    handleEvent(e) {},
    getOptions(data) {
      return {
        animationDurationUpdate: 0,
        title: {
          top: 10,
          text: "平面图地图3D效果，整体地图渐变色，并且两层同步拖拽",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "china",
          aspectScale: 0.75,
          zoom: 1.14,
          top: "10%",
          right: "16%",
          left: "16%",
          bottom: "10%",
          roam: true,
          ...{
            // 普通样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "#333",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                  
                },
              },
            },
          },
          z: 2,
          regions: [
            {
              name: "南海诸岛",
              ...{
                // 普通样式
                label: {
                  show: true,
                  color: "rgba(130,143,200,1)",
                },
                itemStyle: {
                  show: true,
                  borderWidth: 1,
                  borderColor: "rgba(196,207,254,1)",
                  areaColor: "rgba(229,236,249,1)",
                },
              },
              emphasis: {
                // hover样式
                label: {
                  show: true,
                  color: "rgba(130,143,200,1)",
                },
                itemStyle: {
                  borderColor: "rgba(196,207,254,1)",
                  borderWidth: 1,
                  areaColor: "rgba(229,236,249,1)",
                },
              },
            },
            {
              name: "country",
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#e5ecf9",
                shadowColor: "rgba(158,201,243,0.85)",
                borderColor: "rgba(183,219,255,1)",
                shadowOffsetX: 9,
                shadowOffsetY: 9,
              },
            },
          ],
        },
        series: [],
      };
    },
  },
};
</script>

6.区域地图

查看代码详情

<template>
  <div ref="pie" style="height: 100%"></div>
</template>

<script>
var mapData = [
  {
    name: "北京",
    devicesCount: 100, //总数
    feiyue1: 40, //肺悦1个数
    feiyue2: 60, //肺悦2个数
    value: 10, //使用个数
    devicesUseLv: "40%", //使用率
  },
  {
    name: "天津",
    devicesCount: 50,
    feiyue1: 40,
    feiyue2: 60,
    value: 20,
    devicesUseLv: "20%",
  },
  {
    name: "上海",
    devicesCount: 80,
    feiyue1: 40,
    feiyue2: 60,
    value: 30,
    devicesUseLv: "20%",
  },
  {
    name: "重庆",
    devicesCount: 90,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "河北",
    devicesCount: 130,
    feiyue1: 40,
    feiyue2: 60,
    value: 50,
    devicesUseLv: "20%",
  },
  {
    name: "河南",
    devicesCount: 160,
    feiyue1: 40,
    feiyue2: 60,
    value: 80,
    devicesUseLv: "20%",
  },
  {
    name: "云南",
    devicesCount: 110,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "辽宁",
    devicesCount: 320,
    feiyue1: 40,
    feiyue2: 60,
    value: 120,
    devicesUseLv: "20%",
  },
  {
    name: "黑龙江",
    devicesCount: 80,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "湖南",
    devicesCount: 60,
    feiyue1: 40,
    feiyue2: 60,
    value: 10,
    devicesUseLv: "20%",
  },
  {
    name: "安徽",
    devicesCount: 300,
    feiyue1: 40,
    feiyue2: 60,
    value: 270,
    devicesUseLv: "20%",
  },
  {
    name: "山东",
    devicesCount: 50,
    feiyue1: 40,
    feiyue2: 60,
    value: 9,
    devicesUseLv: "20%",
  },
  {
    name: "新疆",
    devicesCount: 40,
    feiyue1: 40,
    feiyue2: 60,
    value: 0,
    devicesUseLv: "20%",
  },
  {
    name: "江苏",
    devicesCount: 240,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "浙江",
    devicesCount: 450,
    feiyue1: 40,
    feiyue2: 60,
    value: 300,
    devicesUseLv: "20%",
  },
  {
    name: "江西",
    devicesCount: 20,
    feiyue1: 40,
    feiyue2: 60,
    value: 4,
    devicesUseLv: "20%",
  },
  {
    name: "湖北",
    devicesCount: 50,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "广西",
    devicesCount: 10,
    feiyue1: 40,
    feiyue2: 60,
    value: 0,
    devicesUseLv: "20%",
  },
  {
    name: "甘肃",
    devicesCount: 20,
    feiyue1: 40,
    feiyue2: 60,
    value: 1,
    devicesUseLv: "20%",
  },
  {
    name: "山西",
    devicesCount: 230,
    feiyue1: 40,
    feiyue2: 60,
    value: 140,
    devicesUseLv: "20%",
  },
  {
    name: "内蒙古",
    devicesCount: 200,
    feiyue1: 40,
    feiyue2: 60,
    value: 0,
    devicesUseLv: "20%",
  },
  {
    name: "陕西",
    devicesCount: 30,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "吉林",
    devicesCount: 77,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "福建",
    devicesCount: 55,
    feiyue1: 40,
    feiyue2: 60,
    value: 8,
    devicesUseLv: "20%",
  },
  {
    name: "贵州",
    devicesCount: 55,
    feiyue1: 40,
    feiyue2: 60,
    value: 7,
    devicesUseLv: "20%",
  },
  {
    name: "广东",
    devicesCount: 44,
    feiyue1: 40,
    feiyue2: 60,
    value: 6,
    devicesUseLv: "20%",
  },
  {
    name: "青海",
    devicesCount: 33,
    feiyue1: 40,
    feiyue2: 60,
    value: 5,
    devicesUseLv: "20%",
  },
  {
    name: "西藏",
    devicesCount: 10,
    feiyue1: 40,
    feiyue2: 60,
    value: 4,
    devicesUseLv: "20%",
  },
  {
    name: "四川",
    devicesCount: 99,
    feiyue1: 40,
    feiyue2: 60,
    value: 20,
    devicesUseLv: "20%",
  },
  {
    name: "宁夏",
    devicesCount: 145,
    feiyue1: 40,
    feiyue2: 60,
    value: 40,
    devicesUseLv: "20%",
  },
  {
    name: "海南",
    devicesCount: 122,
    feiyue1: 40,
    feiyue2: 60,
    value: 90,
    devicesUseLv: "20%",
  },
  {
    name: "台湾",
    devicesCount: 10,
    feiyue1: 4,
    feiyue2: 6,
    value: 0,
    devicesUseLv: "20%",
  },
  {
    name: "香港",
    devicesCount: 0,
    feiyue1: 0,
    feiyue2: 0,
    value: 0,
    devicesUseLv: "0%",
  },
  {
    name: "澳门",
    devicesCount: 0,
    feiyue1: 0,
    feiyue2: 0,
    value: 0,
    devicesUseLv: "0%",
  },
];
export default {
  data() {
    return {
      option: {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.data) {
              return `${params.name}(<span style="font-size:10px;">持有设备量:${params.data.devicesCount}</span>)</br>${params.marker}使用总数：${params.data.value}</br>${params.marker}活跃度：${params.data.devicesUseLv}`;
            } else {
              return;
            }
          },
        },
        visualMap: {
          type: "continuous",
          text: ["高", "低"],
          showLabel: true,
          seriesIndex: [0],
          min: 0,
          // calculable: true,
          max: mapData[0].value,
          inRange: {
            color: ["#f7fbff", "#4e7cef", "#0549f3"],
          },
          textStyle: {
            color: "#000",
          },
          bottom: "-5",
          left: 0,
        },
        geo: {
          roam: true,
          map: "china",
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%",
          ...{
            // 普通样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "#333",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                  
                },
              },
            },
          },
        },
        series: [
          {
            name: "mapSer",
            type: "map",
            roam: false,
            geoIndex: 0,
            label: {
              formatter: function ({ data }) {
                if (data.time) {
                  return "{text|" + data.name + "|" + data.time + "}";
                } else {
                  return "{text|" + data.name + "}";
                }
              },
              distance: 18,
              position: "top",
              show: true,
              textStyle: {
                rich: {
                  text: {
                    color: "#fff",
                    backgroundColor: "#aad1ff",
                    borderWidth: 1,
                    borderType: "solid",
                    borderColor: "#4263e8",
                    boxShadow: "0px 1px 4px #7998d6",
                    fontSize: 14, //字体大小
                    padding: [4, 4, 4, 4],
                  },
                },
              },
            },
            data: mapData,
          },
        ],
      },
    };
  },
  mounted() {
    let charts = this.$echarts.init(this.$refs.pie);
    charts.setOption(this.option);
  },
};
</script>

7.世界地图

• 单个geo地图

查看代码详情

<template>
  <WebMap
    ref="map"
    :config="getOptions"
    :data="data"
    @mapCreated="mapCreated"
  ></WebMap>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async mounted() {
    let res = await this.$api.getMap(6);
    if (res.data) {
      this.data = res.data;
    }
  },
  methods: {
    mapCreated(echarts) {
      echarts.registerMap("world", this.$world2);
    },
    getOptions(data) {
      return {
        title: {
          text: "geo",
          subtext: "单位：元",
        },
        geo: {
          top: "5%",
          right: "5%",
          left: "5%",
          bottom: "5%",
          roam: true,
          map: "world",
          zoom: 1,
          scaleLimit: {
            min: 1,
            max: 20,
          },
          ...{
            // 普通样式
            label: {
              show: false,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(196,207,254,1)",
              areaColor: "rgba(229,236,249,1)",
            },
          },
          emphasis: {
            // hover样式
            label: {
              show: true,
              color: "rgba(130,143,200,1)",
            },
            itemStyle: {
              borderColor: "rgba(196,207,254,1)",
              borderWidth: 1,
              areaColor: "rgba(229,236,249,1)",
            },
          },
          ...{
            // 选中样式
            selectedMode: "single",
            select: {
              label: {
                color: "#333",
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "rgba(66,99,232,1)" },
                    { offset: 1, color: "rgba(55,183,249,1)" },
                  ],
                  
                },
              },
            },
          },
          regions: [
            {
              name: "world",
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#e5ecf9",
                shadowColor: "rgba(158,201,243,0.85)",
                borderColor: "rgba(183,219,255,1)",
                shadowOffsetX: 9,
                shadowOffsetY: 9,
              },
            },
            ...data.map((item) => ({
              name: item.name,
              label: {
                show: true,
              },
              itemStyle: {
                areaColor: "#red",
              },
            })),
          ],
        },
        series: [
          {
            geoIndex: 0,
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: function (val) {
              return [6, 3];
            },
            showEffectOn: "render",
            zlevel: 2,
            rippleEffect: {
              period: 2.5, //波纹秒数
              brushType: "stroke", //stroke(涟漪)和fill(扩散)，两种效果
              scale: 6, //波纹范围
            },
            hoverAnimation: true,
            label: {
              formatter: function ({ data }) {
                if (data.time) {
                  return "{text|" + data.name + "|" + data.time + "}";
                } else {
                  return "{text|" + data.name + "}";
                }
              },
              distance: 18,
              position: "top",
              show: true,
              textStyle: {
                rich: {
                  text: {
                    color: "#fff",
                    backgroundColor: "#aad1ff",
                    borderWidth: 1,
                    borderType: "solid",
                    borderColor: "#4263e8",
                    boxShadow: "0px 1px 4px #7998d6",
                    fontSize: 14, //字体大小
                    padding: [4, 4, 4, 4],
                  },
                },
              },
            },
            itemStyle: {
              color: "#0579FA", //字体和点颜色
            },
            data: data.map((i) => ({
              name: i.name,
              value: i.images,
            })),
          },
        ],
      };
    },
  },
};
</script>