Echarts仿百度中国疫情地图实现(Vue)

  近期做了一些echarts图表的开发,都是基本的单轴和双轴的折线图、饼图、柱状图等,看到百度疫情实时地图,对中国地图和各个省份地图充满了好奇,想着通过echarts模仿实现百度疫情实时地图。
  整体代码在vue中实现,跟普通的html和js中实现并无太大差距,差距主要体现在vue的数据双向绑定上。

1.创建vue项目,配置路由相关等设置,创建展示的页面。






2.vue中获取并引入 ECharts、引入Echarts中的中国地图

(1)在控制台中执行命令:npm install echarts --save,安装完成后vue项目中就获取到了echarts,在依赖文件夹node_modules中,即可找到获取到的echarts:

(2)项目中引入echart以及echarts提供的中国地图







3.初始化地图

(1)代码中dataList数据为模拟的各个省市的疫情数据,
(2)id为"main"的div块为存放地图的容器(echarts的相关学习可以去官网查看)。




  现在地图已经初步的有了样子,如果对地图显示上有个性化的的设置,可以自己去官网查看相关属性配置。

4.利用visualMap属性实现根据疫情数据动态的设置地图中各省市的颜色

// 视觉映射组件,根据疫情数据的不同,地图显示不同的颜色
          visualMap: {
            type: 'piecewise',
            min: 0,
            max: 1000,
            left: 300,
            bottom: 40,
            showLabel: !0,
            text: ['高', '低'],
            pieces: [{
              gt: 100,
              label: '> 100 人',
              color: '#7f1100',
              symbol: 'roundRect'
            }, {
              gte: 10,
              lte: 100,
              label: '10 - 100 人',
              color: '#ff5428'
            }, {
              gte: 1,
              lt: 10,
              label: '1 - 9 人',
              color: '#ff8c71'
            }, {
              value: 0,
              color: '#ADFF2F',
              symbol: 'roundRect'
            }],
            show: !0
          }

  设置完这个属性,地图已经初步有了百度中国疫情的样子:

5.确诊为0的省市插上小旗子的标注

  对比下百度做的疫情地图,清零的省地图上标注为小旗子,接下来实现这个功能:

百度的疫情地图

  小旗子这个样式百度了好久,看了好多案例,结果走错了路线,虽然也实现了该功能,但是特别繁琐,最后发现使用series-map中的markPoint属性可以轻松实现小旗子的功能:
  (1)繁琐的方法思路:在中国地图坐标系中引入散点图(series-scatter),然后找到各个省份的坐标,通过该坐标布置散点图,并通过series-scatter的symbol改变散点的样式,自定义图例,设置小旗子的标注。该方法比较麻烦,而且对地图缩放设置也比较复杂,不太推荐。
  (2)最终的思路:使用series-map中的markPoint属性可以轻松实现该功能,之后看api应该认真仔细,才能少走弯路。
  在地图的series中添加markPoint属性,并做如下设置:

          markPoint: { //标记点
            // symbol设置的为小旗子图片的base64吗
            symbol: 'image://data:image/png;base64,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',
            symbolSize: 14, //图形大小
            label: {
              normal: {
                formatter: function(params) {
                  console.log(params);
                  return params.name;
                },
                show: false,
              },
              emphasis: {
                show: false,
              }
            },
            data: this.markPointData
          }

  其中markPointData为需要标注小旗子的省份地图坐标数组,将清零之后的省份坐标放入markPointData中,该省份就会标注为小红旗。下面为操作的具体步骤:
  a.从echarts中导入各省的坐标数据mapJson,对数据进行修整后存入geoCoordMap中,数据类型为{'新疆': [X值, Y值],'北京': [X值, Y值]...};
  b.然后遍历存放疫情数据的变量dataList,当疫情数据value为0时,根据dataList的省份名称找出geoCoordMap对应的坐标,按markPointData的格式存放进去(南海诸岛有些特殊,详情看上方代码注释);
  c.此时关于疫情的的数据都准备好了,此时可以初始化地图了(将生命周期函数呢的初始化地图操作this.initChart()去掉,直接调用this.getMapJson())。

  import echarts from 'echarts'
  import china from 'echarts/map/js/china'
  import mapJson from 'echarts/map/json/china.json'
  export default {
    name: 'ChinaMap',
    data() {
      return {
        dataList:[...], //疫情数据(上面写了,这里省略掉了。。)
        markPointData: [ ],  // 当某个省清零后,为这个省标注小红旗,存放这个省坐标的数据
        geoCoordMap: { }, // 存放地图中各个省的坐标
      }
    }
  }
  methods:{
    getMapJson() {
      let mapXY = mapJson.features  // 获取地图中各省的坐标数据
      // 对获从echarts中获取的各个省的地图坐标进行修正
      mapXY.forEach(res=>{
        this.geoCoordMap[res.properties.name]=res.properties.cp
        //旗子的位置跟省的名字重合了,纵坐标上移1.25
        this.geoCoordMap[res.properties.name][1]=this.geoCoordMap[res.properties.name][1] + 1.25 
      })
      // 对疫情数据进行遍历,查找出疫情数据为0的省份,加入到markPointData
      this.dataList.forEach(res=>{
        if(res.value===0) {
          // echarts中未提供南海诸岛的坐标,此坐标为我自己根据坐标系推算的
          if(res.name=== '南海诸岛') {
            this.markPointData.push({
            name: '南海诸岛',
            coord: [130, 22],
            value: 0
            })
          } else {
            let tmp= {}
            tmp.name= res.name
            tmp.coord= this.geoCoordMap[res.name]
            tmp.value= res.value
            this.markPointData.push(tmp)
          }
        }
      })
       // 数据准备完毕后,初始化地图
      this.initChart()
    },
    mounted() {
      // this.initChart()
     this.getMapJson()
    }
  }

6.最终仿百度中国疫情地图就实现了

补充:关于visualMap中当数据为0时,小旗子的显示,只需要添加symbol属性设置为小旗子的base64码,并设置其大小即可。

你可能感兴趣的:(Echarts仿百度中国疫情地图实现(Vue))