How to create an interactive map using echarty package in R?

I am trying to create an interactive map using the R language and the echarty package, but I am encountering some difficulties. In short, I want to achieve something similar to this example in echarts gallery: Population Density of Hong Kong （2011）. I have tried to rewrite the JS code into the following R code. Now, it runs without any errors or warnings, but the viewer interface is blank and does not display anything:

library(echarty)
library(jsonlite)

geojson <- read_json("https://echarts.apache.org/examples/data/asset/geo/HK.json")

ec.init(
  title = list(
    text = "Population Density of Hong Kong (2011)",
    subtext = "Data from Wikipedia",
    sublink = "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12"
  ),
  tooltip = list(
    trigger = "item",
    formatter = "{b}<br/>{c} (p / km²)"
  ),
  toolbox = list(
    show = TRUE,
    orient = "vertical",
    left = "right",
    top = "center",
    feature = list(
      dataView = list(readOnly = FALSE),
      restore = list(),
      saveAsImage = list()
    )
  ),
  visualMap = list(
    min = 800,
    max = 50000,
    text = c("High", "Low"),
    realtime = FALSE,
    calculable = TRUE,
    inRange = list(color = c("lightskyblue", "yellow", "orangered"))
  ),
  series = list(
    list(
      name = "香港18区人口密度",
      type = "map",
      map = "HK",
      geoJSON = geojson,   
      label = list(show = TRUE),
      data = list(
        list(name = "中西区", value = 20057.34),
        list(name = "湾仔", value = 15477.48),
        list(name = "东区", value = 31686.1),
        list(name = "南区", value = 6992.6),
        list(name = "油尖旺", value = 44045.49),
        list(name = "深水埗", value = 40689.64),
        list(name = "九龙城", value = 37659.78),
        list(name = "黄大仙", value = 45180.97),
        list(name = "观塘", value = 55204.26),
        list(name = "葵青", value = 21900.9),
        list(name = "荃湾", value = 4918.26),
        list(name = "屯门", value = 5881.84),
        list(name = "元朗", value = 4178.01),
        list(name = "北区", value = 2227.92),
        list(name = "大埔", value = 2180.98),
        list(name = "沙田", value = 9172.94),
        list(name = "西贡", value = 3368),
        list(name = "离岛", value = 806.98)
      ),
      nameMap = list(
        "Central and Western" = "中西区",
        "Eastern" = "东区",
        "Islands" = "离岛",
        "Kowloon City" = "九龙城",
        "Kwai Tsing" = "葵青",
        "Kwun Tong" = "观塘",
        "North" = "北区",
        "Sai Kung" = "西贡",
        "Sha Tin" = "沙田",
        "Sham Shui Po" = "深水埗",
        "Southern" = "南区",
        "Tai Po" = "大埔",
        "Tsuen Wan" = "荃湾",
        "Tuen Mun" = "屯门",
        "Wan Chai" = "湾仔",
        "Wong Tai Sin" = "黄大仙",
        "Yau Tsim Mong" = "油尖旺",
        "Yuen Long" = "元朗"
      )
    )
  )
)

For the HK map, I have attempted to use the echarts4r package (see the code below), and it can create this map. However, the issue is that the plotting process is very slow. I’m not certain whether this is a problem with the echarts4r package itself, so I still want to try using the echarty package.

library(echarts4r)
library(jsonlite)

# geojson <- read_json("https://echarts.apache.org/examples/data/asset/geo/HK.json")
geojson <- read_json("./data/HK.json")    #Save the json file and read it locally

df_plot <- data.frame(
  section=c("Central and Western", "Eastern", "Islands", "Kowloon City", "Kwai Tsing", "Kwun Tong", "North", "Sai Kung",
         "Sha Tin", "Sham Shui Po", "Southern", "Tai Po", "Tsuen Wan", "Tuen Mun", "Wan Chai", "Wong Tai Sin",
         "Yau Tsim Mong", "Yuen Long"),
  value=c(20057.34, 31686.1, 806.98, 37659.78, 21900.9, 55204.26, 2227.92, 3368, 9172.94, 40689.64, 6992.6,
          2180.98, 4918.26, 5881.84, 15477.48, 45180.97, 44045.49, 4178.01))

df_plot %>%
  e_charts(section) %>%
  e_map_register("HK", geojson) %>%
  e_map(value, map = "HK") %>%
  e_visual_map(
    value,
    inRange = list(color = c("lightskyblue", "yellow", "orangered")))%>%
  e_labels(show = TRUE, formatter = "{b}")

Solution

Javascript echarts requires the geoJSON map to be registered with

echarts.registerMap('HK', geoJson);

There's no geoJSON property on the series{type=map}.

There's an echarty example that uses registerMap, although with svg data.

The scheme is

library(echarty)
library(jsonlite)

geojson <- read_json("https://echarts.apache.org/examples/data/asset/geo/HK.json")

p <- ec.init(
   # ...... your ec list data, geoJSON property may be removed
)

p$x$registerMap <- list(list(mapName= 'HK', geoJSON= geojson))

p

This runs OK in my R console, but I don't see any performance differences with respect to the echarts4r version.