echarts中国地图南海群岛显示问题

背景

echarts3之后map需要自己填坐标数据，可参考echarts.apache.org/zh/option.h…

地图数据可使用高德数据
datav.aliyun.com/tools/atlas…

展示效果

问题

南海诸岛缩略图显示不全，图一，图二两部分二选即可。

解决方案

方案一

显示九段图，隐藏缩略图
china.json:datav.aliyun.com/tools/atlas…

 regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
            ],
复制代码

方案二

南海缩略图使用图片代替，腾讯健康、阿里统计目前是用图片来展示的
china.json:gallerybox.makeapie.com/asset/get/s…
可参考

/**
 * App模块
 */

import React, { Component } from "react";
import * as echarts from "echarts";
import china from "./china.json";
import { actions } from "mirrorx";

import "./index.less";

var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    res.push({
      name: data[i].county,
      value: [data[i].log, data[i].lot, data[i].eqCount],
    });
  }
  return res;
};

class Map extends Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
    this.state = {
      myChart: null,
      option: {
        title: {
          x: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.name} : ${params.value[2]} (${params.seriesName}) `;
          },
        },
        legend: {
          orient: "vertical",
          bottom: "3%",
          x: "10%",
          data: [],
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        geo: [
          {
            zlevel: 2,
            map: "china",
            left: 30,
            right: 30,
            top: "5%",
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
            ],
            label: {
              normal: {
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#001D81",
                borderColor: "#2efbfd",
                borderWidth: 0.3,
              },
              emphasis: {
                areaColor: "#0a54ea",
              },
            },
          },
          {
            map: "china",
            left: 30,
            right: 30,
            top: "5%",
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  },
                },
                label: {
                  show: false, // 隐藏文字
                },
              },
            ],
            itemStyle: {
              normal: {
                borderColor: "#2efbfd",
                borderWidth: 1.6,
                shadowColor: "#00207e",
                shadowBlur: 40,
              },
            },
          },
        ],
        series: [],
      },
    };
  }
  async componentDidMount() {
    this.myChart = echarts.init(this.ref.current);
    echarts.registerMap("china", china);

    this.draw();

    let data = await actions.home.getMapData();
    this.setData(data);
  }
  setData(result) {
    if (result.result && result.result.data) {
      let arr = [];
      let data = result.result.data;
      let newOption = { ...this.state.option };
      newOption.legend.data = [];
      newOption.series = [];
      let obj = {};
      let color = ["#FFDD00", "#EB6D19", "#27B9F6", "#2CAE45", "#334553"];
      for (let i in data) {
        arr.push({
          name: i,
          data: data[i],
        });
      }
      // arr = arr.sort((a, b) => b.data.length - a.data.length).splice(0, 5);
      arr.forEach((item, index) => {
        newOption.legend.data.push(item.name);
        let obj = {
          zlevel: 3,
          name: item.name,
          type: "scatter",
          coordinateSystem: "geo",
          data: convertData(item.data),
          color: color[index],
          symbolSize: 6,

          itemStyle: {
            normal: {
              shadowColor: color[index],
              shadowBlur: 5,
            },
            emphasis: {
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
        };
        newOption.series.push(obj);
      });
      this.setState({
        option: newOption,
      });
      this.draw();
    }
  }
  draw() {
    this.myChart.setOption(this.state.option);
  }
  render() {
    return <div className="full-height" ref={this.ref} />;
  }
}

Map.displayName = "Map";
export default Map;

复制代码

参考文章：blog.csdn.net/weixin_4251…