echart 世界地图发光_echarts世界地图设置高亮

要在 Echarts 中实现世界地图发光和设置高亮，可以使用 Echarts 的特效和地图组件。

首先，要在 Echarts 中引入地图组件和特效组件，可以在 Echarts 的官网下载相应的组件库。然后，通过配置 Echarts 的 option 参数来设置地图的样式和特效。

下面是一个简单的示例代码，演示了如何在 Echarts 中实现世界地图发光和设置高亮：

// 引入地图组件和特效组件
echarts.registerMap('world', worldMapData);
echarts.registerMap('china', chinaMapData);
echarts.registerVisual(echarts.graphic.clipPointsByRect);
echarts.registerVisual(echarts.graphic.clipRectByRect);
echarts.registerVisual(echarts.graphic.clipPointsByRect);
echarts.registerVisual(echarts.graphic.clipRectByRect);
echarts.registerVisual(echarts.graphic.clipPointsByRect);
echarts.registerVisual(echarts.graphic.clipRectByRect);
echarts.registerVisual(echarts.graphic.clipPointsByRect);
echarts.registerVisual(echarts.graphic.clipRectByRect);

// 配置 option 参数
var option = {
  tooltip: {
    show: true,
    trigger: 'item'
  },
  visualMap: {
    type: 'piecewise',
    splitNumber: 6,
    inverse: true,
    pieces: [
      {min: 10000},
      {min: 5000, max: 9999},
      {min: 1000, max: 4999},
      {min: 500, max: 999},
      {min: 100, max: 499},
      {max: 99}
    ],
    inRange: {
      color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#e34a33', '#b30000']
    }
  },
  series: [
    {
      name: '世界地图',
      type: 'map',
      mapType: 'world',
      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d',
          borderColor: '#111',
          borderWidth: 1
        }
      },
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      data: [
        {name: 'China', value: 100000},
        {name: 'United States', value: 20000},
        {name: 'Russia', value: 8000},
        {name: 'Australia', value: 5000},
        {name: 'Canada', value: 1000},
        {name: 'Brazil', value: 500},
        {name: 'Argentina', value: 200},
        {name: 'Chile', value: 100},
        {name: 'Mexico', value: 50},
        {name: 'India', value: 20},
        {name: 'Pakistan', value: 10},
        {name: 'Bangladesh', value: 5},
        {name: 'Japan', value: 1}
      ]
    }
  ],
  // 添加特效
  graphic: [
    {
      type: 'circle',
      shape: {
        cx: 100,
        cy: 100,
        r: 50
      },
      style: {
        fill: '#fff'
      },
      zlevel: 100
    }
  ]
};

在上面的代码中，我们配置了一个世界地图，并且设置了数据值，通过 visualMap 来设置颜色区间和分段数目。在 series 中，我们设置了地图的样式和数据，通过 itemStyle 来设置选中时的样式。

最后，我们通过 graphic 参数来添加特效，上面的代码添加了一个圆形特效。您可以根据自己的需求来添加不同的特效效果。