echart map圖示切換多選，單選，預設選中

惠鹏曦發表於2024-09-09

需求是echart預設地圖選中之前的去過的城市，一開始多選，後面點選為單選

const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}'
    },
    series: [{
      type: 'map',
      roam : true,//是否開啟縮放和平移
      zoom : 1,//當前視角縮放比例
      selectedMode: 'multiple', // 只允許單選
      // 設定為一張完整經緯度的世界地圖
      left: 0,
      top: 0,
      right: 0,
      // botto: 0,
      itemStyle : {//地圖區域的多邊形 圖形樣式
        hoverAnimation : true,
        normal : {
          opacity : .6,
          borderWidth: 1,
          areaColor: '#4C525D', //預設的地圖板塊顏色
          borderColor: 'rgba(255,255,255,0.2)',//地圖邊框顏色
        },
        // 點選選中的顏色
        emphasis : {
          areaColor: '#6D717A', //預設的地圖板塊顏色
          borderColor: 'rgba(255,255,255,0.6)',//地圖邊框顏色
          opacity : 1,
          label: {
            show : false,
            fontSize : 0
          }
        },
      },

      // 預設選中的顏色
      select: {
        itemStyle: {
          areaColor: '#6D717A', //預設的地圖板塊顏色
          borderColor: 'rgba(255,255,255,0.6)',//地圖邊框顏色
          opacity : 1,
        },
        label: false
      },
      mapType: 'world',
      animation: false,

      data : [
        {
          name: '廣東省',
          selected: true, // 設定廣東預設高亮
        },
        {
          name: '四川省',
          selected: true, // 設定北京預設高亮
        }
      ],
    }],

  };

myChart.setOption(option);
 
// 新增點選事件處理函式
myChart.on('click', function (params) {
  // 動態切換資料為單選
  myChart.setOption({
    series: [{
      selectedMode: 'single',
    }]
  });

  // 切換到單選點選的
  myChart.dispatchAction({
    type: 'select',
    // 圖例名稱
    name: params.name
  })
});

相關文章