用echart实现迁徙图,缩放全国地图和省份地图,鼠标悬浮显示相应数据

容器

需要引入echart和引入全国和省份的json数据

 需要在mounted()调用画地图方法,数据加载完成

 下面就是画地图的配置了,就不一一详细展开说了

全国地图map是“China”,省份地图map是相对应的省份名称

 

 

详细代码如下

      // 基于准备好的dom,初始化echarts实例

      // 中间 地图 ----域外分布(全国地图)

      drawMap(id, mapData, towLineData, mapList) {

        this.charts = echarts.init(document.getElementById(id));

        // 指定图表的配置项和数据

        this.charts.setOption({

          tooltip: {

            // triggerOn: 'click',

            enterable: true,

            formatter: function (params, ticket, callback) {

              if (params.componentSubType != "effectScatter") {

                return;

              }

              return ' <div style=" padding: 5px;background: #FFFFFF;box-shadow: 0px 2px 8px 0px rgba(50, 175, 218, 0.8);border-radius: 2px; ">'

                + '  <div style="font-size: 10px;color: #999999;line-height: 20px;">支援机构<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.orgName + '</span></div>'

                + '  <div style="font-size: 10px;color: #999999;line-height: 20px;">支援专家<span style="font-size: 12px;font-weight: bold;color: #FFB400;margin: 0 3px;">' + params.data.num 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值