zoukankan      html  css  js  c++  java
  • echarts 中国地图标注所在点

    达到的效果:

    1.本身是个中国地图‘

    2.直接通过经纬度标注

    3.标注点可以是其他样子(比如:五角星)

    4.标注点具有提示框并且鼠标可以进入

    5.提示框里的链接可点击(可以添加为链接事件);

    所需要技术

    1.echarts.min.js

    2.china.js

    直接上代码

    $(document).ready(function(){
    $.ajax({
    url:'',
    type:'POST',
    dataType:'json',
    data:{num:1000},
    dataType:'json',
    success:function(data){
    var list=data.result;



    var markPointData=[];
    for (var i = 0; i < list.length; i++) {
    var num=[];
    var ok=list[i].address;
    var num=ok.split(",");
    markPointData.push({
    "name": list[i].organizationName,
    "coord": num,
    "runConut": list[i].mun17,
    "unitCount": list[i].mun18,
    "organizationId":list[i].organizationId


    });
    };
    console.log(markPointData);
    //地图
    var myChart = echarts.init(document.getElementById('main'));
    // mapChart的配置
    var option = {
    "tooltip": {//提示框组件。
    "trigger": 'item',//触发类型 散点图
    "enterable": true,//鼠标是否可进入提示框
    "transitionDuration": 1,//提示框移动动画过渡时间
    "formatter": function(params) {
    console.log(params);
    return '<a target="_blank" class="params-name" href="'+__CONTEXT__+'/common/jsp?path=specialSubject/unit&organizationId='+params.data.organizationId+'">' + params.name + '</a><p class="conut-next">管理干部培训&nbsp;&nbsp;' + params.data.runConut + '人</p><p class="conut-next">卓越教师培训&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
    // if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {
    // return '<p class="params-name">' + params.data.name + '</p><p class="conut-next">管理干部培训&nbsp;&nbsp;' + params.data.runConut + '人</p><pclass="conut-next">卓越教师培训&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
    // }
    },
    "backgroundColor": '#fff',
    "borderWidth": '1px',
    "borderRadius": '5',
    "borderColor": 'rgba(72,150,128,1)',
    "textStyle": {
    //"color": 'rgba(94,194,222,1)'
    },
    "padding": 22
    },
    "series": [{//系列列表
    "name": "中国",
    "type": "map",
    "mapType": "china",
    "zoom": 1,//当前视角的缩放比例。
    "selectedMode": false,
    "layoutCenter": ['50%', '53%'],
    "layoutSize": "102%",
    "label": {//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
    "normal": {
    "show": false,
    "textStyle": {
    "color": "#fff",
    "fontSize": "12"
    }
    },
    "emphasis": {
    "show": false,
    "textStyle": {
    "color": "#fff",
    "fontSize": "12"
    }
    }
    },
    "markPoint": {//图表标注。
    "symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615',
    "symbolSize":10,
    "label": {
    "normal": {
    "show": true,
    },
    "emphasis": {
    show: true,
    }
    },
    "itemStyle": {
    "normal": {
    "color": 'rgba(72,150,128,1)'
    }
    },
    "data": markPointData
    }
    }]
    };
    myChart.setOption(option);
    var myChart = echarts.init(document.getElementById('main'));

    }
    })

      

    我的成果:http://gallery.echartsjs.com/editor.html?c=x32xatwys1

  • 相关阅读:
    现在分词和过去分词
    VMware Workstation Ubuntu 20.04 LTS无法连接网络问题
    Java中定时器Timer致命缺点(附学习方法)
    2020 年度编程语言排行榜出炉!C 语言称霸,Java 遭遇滑铁卢…….
    人工智能必备数学基础:线性代数基础(1)
    初学VBA
    何同学新视频火了!找到减少沉迷手机的最佳方法:附免费APP
    支付宝蚂蚁森林下线能量提醒功能 产品经理:被骂了、我改
    可抵御所有已知黑客攻击 中国组建天地一体化量子通信网络
    MYSQL数据库 增删改查基础语句
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/10081636.html
Copyright © 2011-2022 走看看