svg地图数据可视化鼠标操作事件函数

简介: svg地图数据可视化鼠标操作事件函数
  • 地图对应的数据
    /*svg地图*/
    var classObj = [
        {name: "qingqi", place: "青岐村委", color: "#f6510d", orgTotal: 987, orgPerson: "张三丰"},
        {name: "mumian", place: "木棉村委", color: "#a07000", orgTotal: 187, orgPerson: "乔峰1"}
    ];
  • 执行操作事件
    //执行操作事件;
    for (var i = 0; i < classObj.length; i++) {
        (function () {
            var option = "." + classObj[i].name;
            var color = classObj[i].color;
            var place = classObj[i].place;
            var orgTotal = classObj[i].orgTotal;
            var orgPerson = classObj[i].orgPerson;
            $(option).each(function (index, element) {
                element.onmouseover = function () {
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = "#031a78";
                        $(className).filter("text")[0].style.fill = "#fff";
                    })
                    //显示当前区域信息;
                    $("#tips").css("display", "block");
                    $("#orgName").html(place);
                    $("#orgTotal").html(orgTotal);
                    $("#orgPerson").html(orgPerson);
                }
                element.onmouseout = function () {
                    this.style.fill = color;
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = color;
                        $(className).filter("text")[0].style.fill = "#fff";
                    })
                    //隐藏当前区域信息;
                    $("#tips").css("display", "none");
                }
            });
        })(i)


Done!

相关文章
|
1月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
11月前
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
196 1
|
11月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
213 0
|
11月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
86 0
|
1月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
11月前
|
数据可视化 定位技术
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
漏刻有时数据可视化解决方案:geo坐标地图、svg地图和图片热点地图的使用比较方案
83 0
|
7月前
|
JSON 数据格式
Echarts饼状图交互数据
Echarts饼状图交互数据
39 0
|
8月前
|
前端开发 数据可视化 定位技术
GIS前端-地图标绘与动画
GIS前端-地图标绘与动画
95 0
|
11月前
|
数据可视化 JavaScript 定位技术
漏刻有时数据可视化Echarts组件开发(7):geo地图map3D组件的定时高亮轮播的解决方案1
漏刻有时数据可视化Echarts组件开发(7):geo地图map3D组件的定时高亮轮播的解决方案1
233 0
|
11月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
487 0