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

来源：互联网发布：js dom 大小改变事件编辑：程序博客网时间：2024/06/04 18:56

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

前端

<!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文件。
别的没啥了。

阅读全文

0 0