【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: "#", 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> 

总结

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