Echarts地图高级开发:带地级市链接的解决方案(2)

简介: Echarts地图高级开发:带地级市链接的解决方案(2)

设置需要链接的城市名称对象数组

    //01.省市需要添加链接的城市.按格式复制;
    var provinceData = [
        {"cityName": "宁波市"},
        {"cityName": "台州市"},
        {"cityName": "呼伦贝尔市"}
    ];


进入对应的城市后,添加myChart.on(“click”, function (params) {}事件。

      if (pName === "china") { // 全国时,添加click 进入省级
            myChart.on('click', function (param) {
                if (param.data && param.data.provinceKey) {
                    if (provinceData.length) {
                        $('#back').removeClass('hidden');
                        // 遍历取到provincesText 中的下标  去拿到对应的省js
                        for (var i = 0; i < provincesText.length; i++) {
                            if (param.name === provincesText[i]) {
                                mapName = provincesText[i];
                                //显示对应省份的方法
                                showProvince(provinces[i], provincesText[i]);
                                break;
                            }
                        }
                    }
                }
            });
        } else {//02.进入省份,匹配链接地址;
            myChart.on("click", function (params) {
                var subSystem = params.name;
                console.log(subSystem);
                if (params.name == "宁波市") {
                    getWin('https://www.baidu.com/s?tn=baiduhome_pg&wd=' + params.name);
                }
                if (params.name == "台州市") {
                    getWin('https://www.baidu.com/s?tn=baiduhome_pg&wd=' + params.name);
                }
                if (params.name == "呼伦贝尔市") {
                    getWin('https://www.baidu.com/s?tn=baiduhome_pg&wd=' + params.name);
                }
            });
        }


Done!

相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
257 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
179 23
echarts地图数据信息流向图效果
|
2月前
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
124 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
596 0
|
4月前
|
数据可视化
Echarts数据可视化开发| 移动效能平台附源码
Echarts数据可视化开发| 移动效能平台附源码
|
4月前
|
数据可视化
Echarts数据可视化开发| 智慧数据平台
Echarts数据可视化开发| 智慧数据平台
|
4月前
|
数据可视化
Echarts数据可视化开发| 智慧营业厅
Echarts数据可视化开发| 智慧营业厅
|
4月前
|
数据可视化
Echarts数据可视化大屏开发| 大数据分析平台
Echarts数据可视化大屏开发| 大数据分析平台
Echarts大屏开发| 智慧物流系统
Echarts大屏开发| 智慧物流系统
Echarts大屏开发|数字化电商场景
Echarts大屏开发|数字化电商场景

热门文章

最新文章

下一篇
DataWorks