Echarts 常见问题

最近在项目中使用ECharts时遇见了许多问题，在这里做个记录

在Vue中使用geo时不显示地图

在Vue中使用geo时不显示地图，数据都堆叠在一起，如下图所示：

后查找发现是未引入地图数据，需要在Vue文件中引入地图JSON数据，关键代码如下：

import echarts from 'echarts';
import china from 'echarts/map/json/china.json';

echarts.registerMap('china', china);

如果是使用TypeScript，需要在tsconfig.json中加入 "resolveJsonModule": true，否则在引入json数据的时候编辑器会提示报错 error TS2732: Cannot find module 'echarts/map/json/china.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

不显示南海诸岛

在使用地图时，大部分情况下南海诸岛都没有数据，这时我们可以控制南海诸岛的隐藏

geo: {
  map: 'china',
  regions: [
    {
      name: '南海诸岛',
      value: 0,
      itemStyle:
        {
          normal:
            {
              opacity: 0,
              label: {
                show: false
              }
            }
        }
    }
  ],
  label: {
    emphasis: {
      show: false
    }
  },
  itemStyle: {
    normal: {
      areaColor: '#323c48',
      borderColor: '#111'
    },
    emphasis: {
      areaColor: '#2a333d'
    }
  }
}

在使用geo时grid设置不生效的问题

使用地图时想要修改组件离容器上下左右的距离。设置grid后一直没有生效，查了很多文档也没有这方面的解决方法，最后在官方文档里看见是需要在geo里设置才起作用：

geo: {
  map: 'china',
  label: {
    emphasis: {
      show: false
    }
  },
  itemStyle: {
    normal: {
      areaColor: '#323c48',
      borderColor: '#111'
    },
    emphasis: {
      areaColor: '#2a333d'
    }
  },
  top: 10,
  left: 10,
  bottom: 10,
  right: 10,
  roam: true
}