
import * as echarts from 'echarts'
import chinaJson from '@/assets/json/China.json'
const getMapChart = (mapData) => {
  echarts.registerMap('china', chinaJson);
  const option = {
    legend: {
      show: true,
      top: 15
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.componentType === 'series') {
          if (params.seriesType === 'scatter') {
            return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
          } else {
            return `${params.name}<br/>数值: ${params.value[2] || 0}`;
          }
        }
        return params.name;
      }
    },
    geo: {
      map: 'china',
      roam: true,
      zoom: 1,
      label: {
        emphasis: {
          show: true,
          color: '#fff'
        }
      },
      itemStyle: {
        areaColor: '#F9FAFC',
        borderColor: '#E7F1FF',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: '#ffd700'
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 12
        }
      }
    },
    series: [
      // 地图系列 - 用于省份高亮
      {
        name: '',
        type: 'map',
        map: 'china',
        geoIndex: 0,
        data: mapData.map(item => ({
          name: item.name,
          value: item.value,
          itemStyle: {
            // color: getColorByValue(item.value, colorRanges),
            areaColor: '#E7F1FF'
          }
        })),
        emphasis: {
          itemStyle: {
            areaColor: '#ffd700',
            borderColor: '#333',
            borderWidth: 2
          },
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        }
      },
      // 散点系列 - 用于显示圆点数字标记
      {
        name:  mapData[0].name,
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'rgba(5, 95, 194, 1)',
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        data: mapData[0].data.map(item => ({
          name: item.name,
          value: [item.coord[0], item.coord[1], item.value],
          itemStyle: {
            color: 'rgba(5, 95, 194, 1)'
          }
        })),
        // data: mapData[0].data,
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        }
      },
      {
        name: mapData[1].name,
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'rgba(250, 140, 22, 1)',
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        data: mapData[1].data.map(item => ({
          name: item.name,
          value: [item.coord[0], item.coord[1], item.value],
          itemStyle: {
            color: 'rgba(250, 140, 22, 1)'
          }
        })),
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        }
      },
      {
        name: mapData[2].name,
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: 'rgba(114, 46, 209, 1)',
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        data: mapData[2].data.map(item => ({
          name: item.name,
          value: [item.coord[0], item.coord[1], item.value],
          itemStyle: {
            color: 'rgba(114, 46, 209, 1)'
          }
        })),
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        }
      }
    ]
  };

  return option
}

export default getMapChart