<template>
  <!--热力图-->
  <div style="height: 100%; background-color: blueviolet;">
    <div style="width: 100%; height: 100%;">
      <div id="main" class="main">
        我是hotMap
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  initChart();
});

function initChart() {
  var ROOT_PATH = 'https://echarts.apache.org/examples';
  var CDN_PATH = 'https://echarts.apache.org/zh/js/vendors/';

  var chartDom = document.getElementById('main');
  if (!chartDom) return;

  var myChart = echarts.init(chartDom);

  myChart.showLoading();

  Promise.all([
    fetch(ROOT_PATH + '/data/asset/geo/USA.json').then(res => res.json()),
    loadScript(CDN_PATH + 'd3-array@2.8.0/dist/d3-array.js'),
    loadScript(CDN_PATH + 'd3-geo@2.0.1/dist/d3-geo.js')
  ]).then(([usaJson]) => {
    const projection = d3.geoAlbersUsa();
    myChart.hideLoading();
    echarts.registerMap('USA', usaJson);
    //console.log("获得地图数据",usaJson);
    
    const option = {
      title: {
        text: 'USA Population Estimates (2012)',
        subtext: 'Data from www.census.gov',
        left: 'right'
      },
      tooltip: {
        trigger: 'item',
        showDelay: 0,
        transitionDuration: 0.2
      },
      visualMap: {
        left: 'right',
        min: 500000,
        max: 38000000,
        inRange: {
          color: [
            '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
            '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'
          ]
        },
        text: ['High', 'Low'],
        calculable: true
      },
      toolbox: {
        show: true,
        left: 'left',
        top: 'top',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      series: [
        {
          name: 'USA PopEstimates',
          type: 'map',
          map: 'USA',
          projection: {
            project: function (point) {
              return projection(point);
            },
            unproject: function (point) {
              return projection.invert(point);
            }
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: [
            { name: 'Alabama', value: 4822023 },
            { name: 'Alaska', value: 731449 },
            { name: 'Arizona', value: 6553255 },
            // ...其他数据保持不变...
          ]
        }
      ]
    };

    myChart.setOption(option);

    window.addEventListener('resize', function () {
      myChart.resize();
    });
  });

  function loadScript(src) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #3A4C5B;
}
</style>