Echarts 引入地图

# 地图数据获取

获取地址：DataV.GeoAtlas地理小工具系列

# 地图渲染

// 地图
mapOption: {
title: {
  text: '作物省市分布图',
  left: 'left',
  subtext: 'provincial and cities distribution of crops'
},
// 浮窗样式
tooltip: {
  show: true, // 提示浮窗是否显示
  trigger: 'item', // 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
  alwaysShowContent: false,
  backgroundColor: '#FFF', // 提示浮窗背景颜色
  borderColor: 'rgba(0, 0, 0, 0.16);',
  hideDelay: 100,
  triggerOn: 'mousemove', // 鼠标移动出现浮窗，也可以是click等
  enterable: true,

  textStyle: {
    color: '#303133',
    fontSize: '12',
    width: 20,
    height: 30,
    overflow: 'break'
  },
},
// 颜色渐变
visualMap: {
  show: false,
  min: 0,
  max: 10000,
  left: '10%',
  top: 'bottom',
  calculable: true,
  seriesIndex: [0],
  inRange: {
    color: ["#CCD9F9", "#98B2F3", "#668DEE", "#394F85"]
  }
},

// 浮窗内容
formatter (params) {
  params.data = params.data || {}
  const value = params.data.value || '0'
  return `名称：${params.name}` + `，种子数目：${value}`
},

geo: {
  map: 'china',
  type: 'map',
  zoom: 1.2,          // 地图放大
  aspectScale: 0.8, //地图宽高比例
  roam: true,        //地图缩放、平移
  label: {
    show: true,
    color: "#606266",
  },
  // 滚轮缩放的极限控制
  scaleLimit: {
    min: 0.5, //缩放最小大小
    max: 6, //缩放最大大小
  },

  emphasis: {
    itemStyle: {
      color: "#303133",
      areaColor: "red"
    }
  }
},
series: [{
  geoIndex: 0,  // 将数据和第0个geo配置关联在一起（不太理解，但是去掉会出错）
  type: 'map',
  data: [],
}]
},

# 定时器滚动

intervalBegin (myChart, mapList) {
var hourIndex = 0;
var carouselTime = null;

carouselTime = setInterval(() => {
  //dispatchAction echarts的API：触发图表行为
  myChart.dispatchAction({
    type: "downplay", //downplay 取消高亮指定的数据图形
    seriesIndex: 0
  });
  myChart.dispatchAction({
    type: "highlight", //highLight 高亮指定的数据图形
    seriesIndex: 0, //系列index
    dataIndex: hourIndex //数据index
  });
  myChart.dispatchAction({
    type: "showTip", //showTip 显示提示框
    seriesIndex: 0,
    dataIndex: hourIndex
  });
  hourIndex++;
  //当循环到数组当中的最后一条数据后，重新进行循环
  if (hourIndex > mapList.length) {
    hourIndex = 0;
  }
}, 3000);

//鼠标移入组件时停止轮播
myChart.on("mousemove", (e) => {
  clearInterval(carouselTime); //清除循环
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: e.dataIndex
  });
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: e.dataIndex
  });
});
//鼠标移出组件时恢复轮播
myChart.on("mouseout", () => {
  carouselTime = setInterval(() => {
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,

    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: hourIndex
    });
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: hourIndex
    });
    hourIndex++;
    if (hourIndex > mapList.length) {
      hourIndex = 0;
    }
  }, 3000);
});
},

# 特殊样式设置

1、地图颜色渐变

// 颜色渐变
visualMap: {
  show: false,
  min: 0,
  max: 10000,
  left: '10%',
  top: 'bottom',
  calculable: true,
  seriesIndex: [0],
  inRange: {
    color: ["#CCD9F9", "#98B2F3", "#668DEE", "#394F85"]
  }
},

2、地图默认选中颜色

geo: {
  map: 'china',
  type: 'map',
  zoom: 1.2,          // 地图放大
  aspectScale: 0.8, //地图宽高比例
  roam: true,        //地图缩放、平移
  label: {
    show: true,
    color: "#606266",
  },
  // 滚轮缩放的极限控制
  scaleLimit: {
    min: 0.5, //缩放最小大小
    max: 6, //缩放最大大小
  },

  label: { // 设置默认地图状态
    //itemStyle: {
    // color: "#303133",
    // areaColor: "red"
    //}
  },
  emphasis: {  // 选中样式设置
    itemStyle: {
      color: "#303133",
      areaColor: "red"
    }
  }
},

3、浮窗样式

// 浮窗内容
formatter (params) {
  params.data = params.data || {}
  const value = params.data.value || '0'
  return `名称：${params.name}` + `，种子数目：${value}`
},