echarts中使用world.json

Q：需要使用world.json数据画世界地图

tip：使用 echarts v5，vue2.6中使用

 

1. 使用方式一完全引入echarts

import * as echarts from 'echarts'
import datajson from './world.json'
echarts.registerMap('world', datajson)

2. 使用方式二按需引入

import * as echarts from 'echarts/core'
import {
  VisualMapComponent
} from 'echarts/components'
import {
  MapChart
} from 'echarts/charts'

echarts.use(
  [VisualMapComponent, MapChart]
)

import datajson from './world.json'
echarts.registerMap('world', datajson)

注意registerMap的引入是来自 VisualMapComponent

3. 在图表组件中

import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent
} from 'echarts/components'
import {
  ScatterChart,
  EffectScatterChart
} from 'echarts/charts'
import {
  CanvasRenderer
} from 'echarts/renderers'

echarts.use(
  [TitleComponent, TooltipComponent, ScatterChart, EffectScatterChart, CanvasRenderer]
)

4.options中参数要注意，有微调，不过如果参数错误，在console.log中会有警告