echarts如何实现中国地图

很奇怪的一个问题是echarts官网居然没有中国地图的实例，美国和其他国家的都有，不过在官网的某个地方的文档里面有提到这个问题。

出于需要，参考了官网提供的文档，整理了一下如何使用echarts实现中国地图的步骤。

安装echarts

npm i echarts -S

安装echarts-countries-js

npm i  echarts-countries-js -S

初始化echarts

import * as echarts from  "echarts"
import chinajs from "echarts-countries-js/echarts-countries-js/china"

let  options = {
  series: [
      {
        type: "map",
        map: "china",
        data: [
          { name: "北京", value: 123 },
          { name: "河南", value: 236 },
        ]
      }
    ]
}

let chart =  echarts.init(document.getElementById("echarts"))

chart.setOption(options)

引入echarts-countries-js 后，初始化echarts的时候会自动加载对应的地图js文件，虽然chinajs这个文件没有用，但是echarts已经用到了。

当然这个包里面还包含其他国家的地图js文件，只需要按需加载即可。

本文章由javascript技术分享原创和收集