Echarts实现省份下点击跳转到指定链接

最新推荐文章于 2024-03-08 11:05:01 发布

Las_wang

最新推荐文章于 2024-03-08 11:05:01 发布

阅读量6k

点赞数 3

分类专栏： echarts HTML JS 文章标签：前端地图 echarts3-0

本文链接：https://blog.csdn.net/weixin_38576764/article/details/78626809

版权

JS 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

HTML

15 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

因为项目要做一个辽宁省特产区域，涉及到地图。
话不多说上代码

前端

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>辽宁地区</title>

</head>

<body>
<div id="main" style="height:800px;"></div>
<script src="__PUBLIC__/Home/js/jquery-1.12.1.min.js"></script>
<script type="text/JavaScript" src="__PUBLIC__/echarts/echarts.js"></script>
<script type="text/JavaScript" src="__PUBLIC__/echarts/liaoning.js"></script>
<script type="text/javascript">
   var flag = true;
   var chart = echarts.init(document.getElementById('main'));
   chart.setOption({
     layoutSize: 100  ,
      series: [{
            name:'辽宁地区',
            selectedMode : 'single',
            itemStyle:{
              normal:{label:{show:flag}},    //地图初始化城市名称是否展示
              emphasis:{label:{show:true}}   //鼠标移入城市名称是否展示
            },
            type: 'map',
            map: 'liaoning'
        }]
    });
    chart.on('click', function (param){
    var selected = param.name;
        if (selected) {
            switch(selected){
                case '沈阳市':
                    location.href = "{:U('Goods/index_city',array('id'=>3))}";
                    break;
                case '葫芦岛市':
                    location.href = "{:U('Goods/index_city',array('id'=>14))}";
                    break;
                case '朝阳市':
                    location.href = "{:U('Goods/index_city',array('id'=>13))}";
                    break;
                case '锦州市':
                    location.href = "{:U('Goods/index_city',array('id'=>12))}";
                    break;
                case '阜新市':
                    location.href ="{:U('Goods/index_city',array('id'=>11))}";
                    break;
                case '盘锦市':
                    location.href = "{:U('Goods/index_city',array('id'=>10))}";
                    break;
                case '大连市':
                    location.href = "{:U('Goods/index_city',array('id'=>9))}";
                    break;
                case '营口市':
                    location.href = "{:U('Goods/index_city',array('id'=>8))}";
                    break;
                case '鞍山市':
                    location.href = "{:U('Goods/index_city',array('id'=>7))}";
                    break;
                case '丹东市':
                    location.href = "{:U('Goods/index_city',array('id'=>6))}";
                    break;
                case '辽阳市':
                    location.href = "{:U('Goods/index_city',array('id'=>5))}";
                    break;
                case '本溪市':
                    location.href = "{:U('Goods/index_city',array('id'=>4))}";
                    break;
                case '抚顺市':
                    location.href ="{:U('Goods/index_city',array('id'=>2))}";
                    break;
                case '铁岭市':
                    location.href = "{:U('Goods/index_city',array('id'=>1))}";
                    break;
                default:
                    break;
            }

        }
  });
    window.onresize = chart.resize();
</script>
</body>

</html>

目前还有点问题，地图大小不会调整，记得引入城市js文件。
别的没啥了。

Las_wang

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Echarts实现省份下点击跳转到指定链接

因为项目要做一个辽宁省特产区域，涉及到地图。话不多说上代码前端<!doctype html><html><head> <meta charset="utf-8"> <title>辽宁地区</title></head><body><div id="main" style="height:800px;"></div><script src="__PUBLIC__/Home/js
复制链接

扫一扫