Выделение области GEO при выделении точки effectScatter?

Question

[Nevea]

Ребят, всем привет, подскажите пожалуйста, кто работал с этой библиотекой, никак не могу добиться, чтобы при наведении на город, выделялась и страна, заранее благодарю

import * as echarts from 'echarts/core';
import {GeoComponent,TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import {EffectScatterChart } from 'echarts/charts';
import {geoProjection} from 'd3';
import mapJSON from "./map.json";
echarts.use([ GeoComponent,TooltipComponent,CanvasRenderer,EffectScatterChart]);
const chart = echarts.init(document.getElementById("chart-container"));
echarts.registerMap('world', mapJSON);
const projection = geoProjection((x, y) => ([x, y / 0.75]))
    .rotate([-115, 0]);

const data = [
  { name: 'Москва', value: 38 },
  { name: 'Санкт-Петербург', value: 12 },
];
const geoCoordMap = {
  'Москва': [37.8575,55.7611],
  'Санкт-Петербург': [30.3141300, 59.9386300],
};
const convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};
 var option = {
    tooltip: {},
    geo: {
      tooltip: {
        show: false
      },
      zoom:1.25,
      itemStyle: {
        borderColor: '#031633', 
        areaColor:'#cfe2ff',
      },
      emphasis: {
        label:{
          fontSize:25,
          fontWeight:100,
          color:'#052c65',
        },
        itemStyle: {
          areaColor:'#9ec5fe',
        },
     },
      map: 'world',
      projection: {
        project: (point) => projection(point),
       unproject: (point) => projection.invert(point),
		
    },
      roam: true
    },
    series: {
      tooltip: {
        show: true
      },  
      type: 'effectScatter',
      coordinateSystem: 'geo',
      geoIndex: 0,
      symbolSize: function (val) {
        return val[2]/2;
      },
      itemStyle: {
        color: '#052c65'
      },
      encode: {
        value: 2
      },
      data: convertData(
        data
          .sort(function (a, b) {
            return b.value - a.value;
          })
          .slice(0, 6)
      )
    }
  };
chart.setOption(option);

Answer 1

[Nevea]

Сделал вот так: добавил data.region и повесил обработчик событий mouseover и mouseout,
P.S в geojson properties.name должен совпадать с data.region
файл geojson:

"properties": {
     "name": "Россия"
  }

const data = [
  { name: 'Реутов', value: 38 ,region:"Россия"},
  { name: 'Санкт-Петербург', value:  10 ,region:"Россия"},
];
const geoCoordMap = {
  'Реутов': [37.8575,55.7611],
  'Санкт-Петербург': [30.3141300, 59.9386300],
};
const convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        region: data[i].region,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};

chart.on('mouseover', { seriesIndex: 0 }, function (event) {
console.log(event)
chart.dispatchAction({
  type: 'highlight',
  geoIndex: 0,
  name: event.data.region
});
});
chart.on('mouseout', { seriesIndex: 0 }, function (event) {
  chart.dispatchAction({
    type: 'downplay',
    geoIndex: 0,
    name: event.data.region
  });
});