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
}