echarts实现世界地图的具体方法

205 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天。

随着物联网的普及,大屏的应用场景也越来越多,其中图表展示可谓很普遍了,但是地图的用法有些同学却很陌生,今天我们就来说一说地图的实现方法。

知识点:echarts、vue

这里把公共部分的代码先贴出来

HTML:

<div id="echarts_map"></div>

绘制图表的方法:

mounted(){
    // 绘制地图
    this.echarts();
},
methods: {
	echarts(){
      var myChart = this.$echarts.init(document.getElementById("echarts_map"));
      myChart.setOption(option);
      myChart.on("click", function (params) {
        console.log(params.name);
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
}

用 echarts 来实现也有两种不同的方法,这里只贴重点的 options 设置部分的代码:

(1)通过 serise

实现效果: 在这里插入图片描述

const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [{
      type: 'map', // 这是数据类型
      mapType: 'henan',  // 这里配置地图的类型
      label: {
        normal: {
          show: true
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {
        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: false,

      data: [
        { name: '郑州市', value: 100 },
        { name: '洛阳市', value: 10 },
        { name: '开封市', value: 20 },
        { name: '信阳市', value: 30 },
        { name: '驻马店市', value: 40 },
        { name: '南阳市', value: 41 },
        { name: '周口市', value: 15 },
        { name: '许昌市', value: 25 },
        { name: '平顶山市', value: 35 },
        { name: '新乡市', value: 35 },
        { name: '漯河市', value: 35 },
        { name: '商丘市', value: 35 },
        { name: '三门峡市', value: 35 },
        { name: '济源市', value: 35 },
        { name: '焦作市', value: 35 },
        { name: '安阳市', value: 35 },
        { name: '鹤壁市', value: 35 },
        { name: '濮阳市', value: 35 },
        { name: '开封市', value: 45 }
      ]
    }],
  };

(2) 通过 geo 配置

实现效果: 在这里插入图片描述

引入地图数据:

import 'echarts/map/js/world'
 var option = {
        geo: {
          //全国地图map:"china",全球为map:"world"
          map: "world",
          right: "5%",
          left: "5%",
          top: '5%',
          bottom: '5%',
          roam: true,
          // silent: true, // 取消 点击事件
          label: {
            normal: {
              show: false
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          // 地区名称映射
          nameMap: {
            'China' : '中国',
            'Russia' : '俄罗斯',
            'Thailand' : '东盟'
          },
          // 根据名称定义不同的背景颜色
          regions: [
            {
              name: '东盟',
              itemStyle: {
                  areaColor: '#00ff68',
                  borderColor: '#1890ff'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            {
              name: '中国',
              itemStyle: {
                  areaColor: '#ff3c4d',
                  borderColor: '#1890ff'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            {
              name: '俄罗斯',
              itemStyle: {
                  areaColor: '#febf01',
                  borderColor: '#1890ff'
              },
              label: {
                show: true,
                color: '#fff'
              }
            }
          ],
          itemStyle: {
            normal: {
              borderWidth: 1,
              areaColor: "#040564",
              borderColor: "#3fbcea",
              label: {
                color: '#fff'
              }
            },
            emphasis: {
              color: '#fff',
              areaColor: "#00e4ff"
            },
          }
        },
      };

其中有一点需要注意:地图的绘制需要的数据要单独引入。