echarts实现自定义扩展地图-中国七大区域图

相信很少用echarts的人第一次接触时会有很多疑惑,比如,在百度突然看到一段代码,感觉莫名奇妙,不知道怎么用。正所谓熟能生巧,当你专一用echarts一个月后,你会发现其实任何技术并没有想象那么难。

下面进入正题:

第一步:下载echarts包,这里需要注意的是,网上现在有很多版本的,比如echarts-all.js,要实现自定义扩展地图这个就满足不了,需要用到比较早的那个地图版本,结构如下图:相信很多人看了就知道是哪个版本了

还需要七大区的geoJSON数据包,后面我在下载那上传供大家下载

第二步就是实现过程,下面就直接贴代码

var dom = document.getElementById("main");

var myChart;

var option;

require.config({

  paths: {

    echarts: '/echarts/'

  }

});

if (!myChart) {

  require(

    [

      'echarts',

      'echarts/chart/map',

    ],

    function (ec) {

      //debugger;

      // 基于准备好的dom,初始化echarts图表

      require('echarts/util/mapData/params').params.areas = {

        getGeoJson: function (callback) {

          $.getJSON('./geoJson/area.json', function (data) {

            //debugger;

            // 压缩后的地图数据必须使用 decode 函数转换

            callback(require('echarts/util/mapData/params').decode(data));

          });

        }

      }

      var ecConfig = require('echarts/config');//初始化事件

      option = {

        title: {

          text: '',

          subtext: '',

        },

        tooltip: {

          trigger: 'item',

        },

        dataRange: {

          min: 0,

          max: 500,

          text: ['大', '小'],

          realtime: false,

          calculable: true,

          //color: ['orangered', 'yellow', 'lightskyblue']

        },

        series: [

          {

            name: '',

            type: 'map',

            mapType: 'areas', // 自定义扩展图表类型

            selectedMode: false,//single

            itemStyle: {

              normal: { label: { show: true } },

              emphasis: { label: { show: true } }

            },

            data: [

              { name: '东北地区', value: Math.round(Math.random() * 500) },

              { name: '华北地区', value: Math.round(Math.random() * 500) },

              { name: '华东地区', value: Math.round(Math.random() * 500) },

              { name: '华南地区', value: Math.round(Math.random() * 500) },

              { name: '华中地区', value: Math.round(Math.random() * 500) },

              { name: '西南地区', value: Math.round(Math.random() * 500) },

              { name: '西北地区', value: Math.round(Math.random() * 500) }

            ]

          }

        ]

      };

      

      myChart = ec.init(dom);

      myChart.setOption(option, true);

    });

}

三、前端引用

<!DOCTYPE html>

<html style="height: 100%">

   <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       <script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>

       <!-- <script src="../js/echarts-all.js" type="text/javascript"></script> -->

       <script src="../echarts/echarts.js" type="text/javascript"></script>

   </head>

   <body style="height: 100%; margin: 0; background-color: #0F3894;">

       <div id="main" style="height: 100%;"></div>

       <script src="expMap.js" type="text/javascript"></script>

   </body>

</html>

如果还想扩展其它地图,比如东北地区包含哪些省,照上面的方法一样可以。希望对大家有所帮助

附上效果图:

 

 

 

 

 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值