【eCharts】Echarts中国地图绘制案例

【eCharts】eCharts中国地图绘制案例

---

---

eCharts中国地图绘制案例

在使用的时候需要注意:

推荐下载的中国地图json文件里面的地区名字是全称,那么在使用的过程中需要确保json文件中的省、市、县的名字和series中data中的省、市、县的名字一摸一样。否则数据无法显示出来,如果后端给的数据中地区名字和下载的json文件中地区名字不一致,可以自己手动去修改json文件中的地区名字或者是和后端人员商量修改后端的数据.(切记!!! 切记!!! 切记!!!)

下面是我做出来的效果图:

下面展示的代码是已经从项目中整理出来的代码,大家可以直接拿去使用,使用的时候记得下载相关的包,即可放心食用

<template>
  <div class="mapContain">
    <!-- 中国地图 -->
    <div class="chinaMap">
      <div class="swiper-Map" ref="swiperMap">
        <div class="newConfirm" id="newConfirm-Map"></div>
        <div class="totalConfirm" id="totalConfirm-Map"></div>
      </div>
    </div>
    <!-- 切换地图按钮 -->
    <div class="shiftMap">
        <div :class="shiftType.type == 'left' ? 'active' : ''" @click="changeMap('left')">现有确诊</div>
        <div :class="shiftType.type == 'right' ? 'active' : ''" @click="changeMap('right')">累计确诊</div>
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import request from "../src/util/request";
import chinaJson from "./assets/chinaMap.json"
export default defineComponent({
  setup(props, context) {
    // 导入echarts中的类型用来限定setoption
    type EChartsOption = echarts.EChartsOption;

    // 在页面挂载后展示
    onMounted(() => { 
     initMap()
    });

    // 初始化地图
    const initMap = async()=>{
       let res = await request({
        url:'/list-total',
        method:'GET'
      })  
      let china = res.data.areaTree.find((item:any)=>item.id === '0')
      
      // 现有确诊的数据
      let areaArr = china.children.map((item:any)=>{
        return {
          name:item.name,
          value:item.total.confirm - item.total.dead-item.total.heal || 0
        }
      })

      // 累计确诊的数据
      let areaAllArr = china.children.map((item:any)=>{
        return{
          name:item.name,
          value:item.total.confirm
        }
      })
      
      // 获取节点,初始化echarts
      let Map1 = echarts.init(document.getElementById("newConfirm-Map") as HTMLElement);
      let Map2 = echarts.init(document.getElementById("totalConfirm-Map") as HTMLElement);
      Map1.showLoading()
      Map2.showLoading()

      // 注册地图
      echarts.registerMap("china", chinaJson as any);
      
      // 书写配置项
      let optionMap: EChartsOption = {
        // 标题
        title: {
          text: "中国疫情图",
          textStyle: {
            color: "#353535",
            fontSize: 22,
          },
          subtext: "单击省份可查看病例数",
          subtextStyle: {
            color: "#9B9B9B",
            fontSize: 16,
          },
          top: 25,
          left: 30,
        },
        // 视觉映射组件
        visualMap: {
          type:'piecewise',
          showLabel:true,
          pieces:[
            {gte: 10000,label:'> 10000人'},            // (1500, Infinity]
            {gte: 1000, lte: 9999, label:'1000 - 9999人'},  // (900, 1500]
            {gte: 500, lte: 999, label:'500 - 999人'},  // (310, 1000]
            {gte: 100, lte: 499,label:'100 - 499人'},   // (200, 300]
            {gte: 10, lte: 99,label:'10 - 99人'},   // (200, 300]
            {gte: 1, lte: 9,label:'1 - 9人'},   // (200, 300]
            {lte: 0,label:'0'},   // (200, 300]
          ],
          min: 0,
          max: 10000,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['white','#FFF2CF', '#FDD2A0', '#FF8C71', '#E64B45', '#7F1100']
          },
          left:30,
          bottom:35,
          text: ["高", "低"], //取值范围的文字
          textStyle: {
            color: "#333",
          }
        },
        // 提示框组件
        tooltip:{
            trigger:'item',
            /*
                折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

                散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

                地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

                饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） 
            */
            formatter:'现有确诊病例 
 {b} : {c}'
        },
        // 地理坐标系组件
        geo:{
            map:'china',
            roam:false,
            zoom:1.3,
            top:150,
            label:{
                show:true,
                position:['50%', '50%'],
                color:'#333',
                fontSize:12,
            },
            // 地区的配置
            itemStyle:{
                areaColor:"#fff",
                borderColor:'#DCDCDC'
            },
            // 高亮配置
            emphasis:{
                itemStyle:{
                    areaColor:'#45CFFF',
                    borderColor:'#45CFFF'
                }
            }
        }
      };
      
      Map1.setOption({
        ...optionMap,
        series: {
            name:'中国疫情图',
            type:'map',
            geoIndex:0,
            data:areaArr
        }
      });

      Map2.setOption({
        ...optionMap,
        series: {
            name:'中国疫情图',
            type:'map',
            geoIndex:0,
            colorBy:'series',
            data:areaAllArr
        }
      });

      Map1.hideLoading()
      Map2.hideLoading()
    }

    // 获取容器节点
    const swiperMap:any = ref()

    let shiftType = reactive({
      type:'left',
      titleType:0
      })

    // 切换图片回调函数
    const changeMap = (type:string)=>{
      if(type === shiftType.type) return
      if(type === 'left'){
        swiperMap.value.classList.remove('move')
      }else{
        swiperMap.value.classList.add('move')
      }
      shiftType.type = type  
    }
    return {
      changeMap,
      swiperMap,
      shiftType
    };
  },
});
</script>

<style scoped lang='less'>
.mapContain {
  width: 750px;
  margin: 0 auto;
}

// 中国地图
.chinaMap {
  box-sizing: border-box;
  width: 750px;
  overflow: hidden;
  .swiper-Map {
    display: flex;
    width: 1500px;
    transition: all 0.5s;
    .newConfirm,.totalConfirm {
      margin:0 30px;
      width: 684px;
      height: 718px;
      background: #F3F3F3;
      border: 1px solid #dddddd;
    }
    &.move{
      transform: translateX(-750px);
    }
}
}
// 切换地图
.shiftMap{
    margin-top: 20px;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    div{
        width: 335px;
        line-height: 90px;
        font-size: 24px;
        color: #333;
        border: 1px solid #D2D2D2;
        box-shadow: 0 5px 10px 2px #F3F3F3;
        border-radius: 5px;
        text-align: center;
        &.active{
          background: #FEF7F7;
          border:1px solid #CE4733;
          color: #CE2C1E;
        }
    }
}

</style>

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！