registerMap Method and Map Data Not Recognized in Nuxt ECharts Integration

[smile-alive]

I'm trying to integrate ECharts with Nuxt using the nuxt-echarts module, but I'm encountering an issue. Although the map displays correctly on the page, the terminal outputs the following errors:

Code Example

nuxt.config.js

export default {
  ...
  echarts: {
    ssr: true,
    renderer: 'svg',
    charts: ['MapChart'],
    components: ['GeoComponent', 'TooltipComponent'],
  },
};

demo.vue

<template>
  <VChart :option="option" style="height: 400px" />
</template>

<script setup>
import * as echarts from 'echarts/core';
import USA from '@/assets/json/USA.json';

echarts.registerMap('USA', USA);

const option = {
  // ECharts map configuration
};
</script>

Error Messages

ERROR  [ECharts] Implementation of registerMap doesn't exist.

ERROR  Map USA not exists. The GeoJSON of the map must be provided.

Cannot read properties of undefined (reading 'regions')

  at MapSeries.getInitialData (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/chart/map/MapSeries.js:83:27)
  at SeriesModel.init (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Series.js:92:21)
  at GlobalModel.<anonymous> (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Global.js:337:28)
  at Array.forEach (<anonymous>)
  at each (node_modules/.pnpm/[email protected]/node_modules/zrender/lib/core/util.js:205:13)
  at GlobalModel.visitComponent (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Global.js:274:7)
  at entity.topologicalTravel (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/util/component.js:111:18)
  at GlobalModel._mergeOption (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Global.js:253:20)
  at initBase (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Global.js:673:15)
  at GlobalModel._resetOption (node_modules/.pnpm/[email protected]/node_modules/echarts/lib/model/Global.js:180:9)

[kingyue737]

Thanks for reporting! This bug occurs when Nuxt-ECharts SSR is turned on. While MapChart is correctly imported on the client side, it is not imported on the server side, so the server side complains that "Implementation of registerMap doesn't exist".

I will fix the bug this weekend. Currently you can add the following code in your component as a workaround:

<script setup>
import * as echarts from 'echarts/core';
import USA from '@/assets/json/USA.json';

+ import { MapChart } from 'echarts/charts'
+ echarts.use([MapChart])

echarts.registerMap('USA', USA);

const option = {
  // ECharts map configuration
};
</script>

[smile-alive]

Thank you very much for your reply