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'    }  }}