import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { useRef } from 'react';

// echarts.registerMap('map', wuhan);//默认注册地图
echarts.registerMap('map', require("../../assets/mapjson/\u6E56\u5317\u7701.json")); //默认注册地图

var MapChart = function MapChart(props) {
  var curRef = useRef(null);
  var height = window.screen.availHeight;
  var options = {
    backgroundColor: props.backgroundColor,
    //画布背景颜色
    geo: {
      // show: true,
      map: 'map',
      //注册地图的名称
      label: {
        show: false
      },
      roam: false,
      itemStyle: {
        normal: {
          borderWidth: props.nomalborderWidth,
          //设置外层边框
          borderColor: props.normalborderColor
        },
        emphasis: {
          show: true,
          areaColor: '#82b8fd'
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function formatter(params) {
        console.log(params);
        if (params['data'] != null) {
          var medal = "";
          medal += props.leftparamOne + params['data'][props.paramOne];
          medal += '<br/>' + props.leftparamTwo + params['data'][props.paramTwo];
          medal += '<br/>' + props.leftparamThree + params['data'][props.paramThree];
          return medal;
        }
      }
    },
    // dataRange: {    //热地图
    //     show: false,//是否展示左下角图标
    //     min: 0,
    //     max: 1000,
    //     text: ['High', 'Low'],
    //     realtime: true,
    //     calculable: true,
    //     color: ['orangered', 'yellow', 'lightskyblue']//渐变颜色
    //   },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center'
    },
    series: [{
      name: '湖北地图',
      type: 'map',
      map: 'map',
      selectedMode: false,
      // scaleLinit: {
      //     // 滚轮缩放的极限控制
      //     min: 0.5,//缩放最小大小
      //     max: 10, //缩放最大大小
      // },
      label: {
        //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
        show: true,
        //显示省市名称
        positiob: [1, 100],
        //相对百分比
        fontsize: 12,
        offSize: [2, 0],
        // 是对文字进行便宜 ，默认是不偏移，例如：`[30, 40]` 表示文字在横向上偏移 `30`，纵向上偏移 `40`。
        align: 'left' //文字水平对齐方式，默认自动
      },

      data: props.mapDataTip,
      itemStyle: {
        //地图区域的多边形，图形样式
        normal: {
          borderWidth: 1,
          //边际线大小
          borderColor: props.borderColor,
          //边界线颜色
          areaColor: props.areaColor,
          //默认区域颜色
          shadowColor: 'rgba(0,0,0,0.1)',
          //设置阴影颜色
          shadowBlur: 10,
          //阴影大小
          shadowOffsetX: -10,
          shadowOffsetY: 5
        },
        emphasis: {
          show: true,
          areaColor: props.empareaColor,
          //鼠标滑过区域颜色
          label: {
            show: true,
            textStyle: {
              color: 'black'
            }
          }
        }
      },
      roam: false //是否开启鼠标缩放平移漫游
      // zoom: 1.25, //当前视角的缩放比例 
    }]
  };

  return /*#__PURE__*/React.createElement(ReactECharts, {
    option: options,
    ref: curRef,
    style: {
      height: props.height,
      width: props.width,
      zIndex: 222
    }
  });
};
export default MapChart;