
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/China.json'
const getMapChart = (mapData) => {
  echarts.registerMap('china', chinaJson);
  // 定义颜色范围
      const colorRanges = [
        { range: [0, 4], color: '#8ECFC9', label: '0-4' },
        { range: [5, 9], color: '#FFBE7A', label: '5-9' },
        { range: [10, 19], color: '#FA7F6F', label: '10-19' },
        { range: [20, 30], color: '#AA6FC9', label: '20-30' }
      ];

      const getColorByValue = (value, colorRanges) => {
      const range = colorRanges.find(range => 
        value >= range.range[0] && value <= range.range[1]
      );
      return range ? range.color : '#CCCCCC';
    }

      const option = {
        title: {
          // text: '全国数据分布图',
          // subtext: '数据范围颜色标识',
          left: 'center',
          textStyle: {
            fontSize: 18,
            color: '#333'
          }
        },
        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;
          }
        },
        visualMap: {
          type: 'piecewise',
          pieces: colorRanges.map(range => ({
            min: range.range[0],
            max: range.range[1],
            label: range.label,
            color: range.color
          })),
          left: 'right',
          top: 'bottom',
          textStyle: {
            color: '#000',
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 14
        },
        geo: {
          map: 'china',
          roam: true,
          zoom: 1.2,
          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: '数据标记',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: (val) => {
              // 根据数值大小调整圆点大小
              const size = Math.max(20, val[2] * 2);
              return Math.min(size, 30);
            },
            // symbolSize: 30,
            label: {
              show: true,
              formatter: (params) => {
                return params.data.value[2];
              },
              position: 'inside',
              color: '#fff',
              fontSize: 12,
              fontWeight: 'bold'
            },
            itemStyle: {
              color: (params) => {
                return getColorByValue(params.data.value, colorRanges);
              },
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            data: mapData.map(item => ({
              name: item.name,
              value: [item.coord[0], item.coord[1], item.value],
              itemStyle: {
                color: getColorByValue(item.value, colorRanges)
              }
            })),
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.8)'
              }
            }
          }
        ]
      };
    
  return option
}

export default getMapChart