百度地图 echarts tooltip属性经纬度坐标不显示

- 日理万妓 2021-10-15 11:35 598阅读 0赞

中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 echarts.appMap = function (id, opt) {
      2     // 实例
      3     var chart = this.init(document.getElementById(id));
      4     // var curGeoJson = {};
      5     var cityMap = {
      6         "河南": "henan",
      7         "河北": "hebei",
      8         '北京': 'beijing',
      9         '天津': 'tianjin',
     10         '山西': 'sx',
     11         '内蒙古': 'neimenggu',
     12         '辽宁': 'liaoning',
     13         '吉林': 'jilin',
     14         '黑龙江': 'heilongjiang',
     15         '上海': 'shanghai',
     16         '江苏': 'jiangsu',
     17         '浙江': 'zhejiang',
     18         '安徽': 'anhui',
     19         '福建': 'fujian',
     20         '江西': 'jiangxi',
     21         '山东': 'shandong',
     22         '湖北': 'hubei',
     23         '湖南': 'hunan',
     24         '广东': 'guangdong',
     25         '广西': 'guangxi',
     26         '海南': 'hainan',
     27         '重庆': 'chongqing',
     28         '四川': 'sichuan',
     29         '贵州': 'guizhou',
     30         '云南': 'yunnan',
     31         '西藏': 'xizang',
     32         '陕西': 'shanxi',
     33         '甘肃': 'gansu',
     34         '青海': 'qinghai',
     35         '宁夏': 'ningxia',
     36         '新疆': 'xinjiang',
     37         '香港': 'hongkong',
     38         '澳门': 'macau',
     39         '台湾': 'taiwan'
     40     };
     41 
     42     var treeMap = {
     43         "河南": 410000,
     44         "河北": 130000,
     45         '北京': 110000,
     46         '天津': 120000,
     47         '山西': 140000,
     48         '内蒙古': 150000,
     49         '辽宁': 210000,
     50         '吉林': 220000,
     51         '黑龙江': 230000,
     52         '上海': 310000,
     53         '江苏': 320000,
     54         '浙江': 330000,
     55         '安徽': 340000,
     56         '福建': 350000,
     57         '江西': 360000,
     58         '山东': 370000,
     59         '湖北': 420000,
     60         '湖南': 430000,
     61         '广东': 440000,
     62         '广西': 450000,
     63         '海南': 460000,
     64         '重庆': 500000,
     65         '四川': 510000,
     66         '贵州': 520000,
     67         '云南': 530000,
     68         '西藏': 540000,
     69         '陕西': 610000,
     70         '甘肃': 620000,
     71         '青海': 630000,
     72         '宁夏': 640000,
     73         '新疆': 650000,
     74         '香港': 810000,
     75         '澳门': 820000,
     76         '台湾': 710000
     77     };
     78     var geoCoordMap = {
     79         '河南': [113.65, 34.76],
     80         '河北': [114.52, 38.05],
     81         '北京': [116.4, 39.9],
     82         '天津': [117.2, 39.12],
     83         '山西': [112.55, 37.87],
     84         '内蒙古': [111.73, 40.83],
     85         '辽宁': [123.43, 41.8],
     86         '吉林': [125.32, 43.9],
     87         '黑龙江': [126.53, 45.8],
     88         '上海': [121.47, 31.23],
     89         '江苏': [118.78, 32.07],
     90         '浙江': [120.15, 30.28],
     91         '安徽': [117.25, 31.83],
     92         '福建': [119.3, 26.08],
     93         '江西': [115.85, 28.68],
     94         '山东': [116.98, 36.67],
     95         '湖北': [114.3, 30.6],
     96         '湖南': [112.93, 28.23],
     97         '广东': [113.27, 23.13],
     98         '广西': [108.37, 22.82],
     99         '海南': [110.32, 20.03],
    100         '重庆': [106.55, 29.57],
    101         '四川': [104.07, 30.67],
    102         '贵州': [106.63, 26.65],
    103         '云南': [102.72, 25.05],
    104         '西藏': [91.13, 29.65],
    105         '陕西': [108.93, 34.27],
    106         '甘肃': [103.82, 36.07],
    107         '青海': [101.78, 36.62],
    108         '宁夏': [106.28, 38.47],
    109         '新疆': [87.62, 43.82],
    110         '香港': [114.08, 22.2],
    111         '澳门': [113.33, 22.13],
    112         '台湾': [121.520, 25.03]
    113     };
    114     //level的三种水平  按等级给定每个等级颜色
    115     // var levelColorMap = {
          
    116     //     '1': 'rgba(0,255,255)',//蓝
    117     //     '2': 'rgba(0,255,127)',//黄色
    118     //     '3': 'rgba(255,0,255)'//红色
    119 
    120     // };
    121 
    122     var defaultOpt = {
    123         mapName: 'china', // 地图展示
    124         goDown: false, // 是否下钻
    125         bgColor: '#404a59', // 画布背景色
    126         activeArea: [], // 区域高亮,同echarts配置项
    127         data: [],
    128         // 下钻回调(点击的地图名、实例对象option、实例对象)
    129         callback: function (cc, option, instance) {}
    130     };
    131 
    132     // var ProvinceNames = [];    //类别数组（实际用来盛放X轴坐标值）
    133     var TowerNumbers = []; //销量数组（实际用来盛放Y坐标值）
    134     var provinceData = [];
    135     var valMap = new Map();
    136     //var sum  =0;
    137     /*获取地图数据*/
    138     $.ajax({
    139         url: "../sdTree/showChildCountByTreeId.do",
    140         type: "post",
    141         dataType: "json",
    142         data: {
    143             id: 86
    144         },
    145         success: function (data) {
    146             //请求成功时执行该函数内容，result即为服务器返回的json对象
    147             if (data) {
    148                 provinceData = [];
    149                 avg = 1;
    150                 sum = 0;
    151                 // var sum = 0;
    152                 var count = data.length;
    153                 for (var i = 0; i < data.length; i++) {
    154                     provinceData.push({
    155                         name: data[i].ProvinceName,
    156                         value: data[i].TowerNumber,
    157                     })
    158                     //sum+=data[i].TowerNumber;
    159                     valMap.set(data[i].TowerNumber, i);
    160                     // ProvinceNames.push(data[i].ProvinceName);    //挨个取出类别并填入类别数组
    161                     TowerNumbers.push(data[i].TowerNumber); //挨个取出销量并填入销量数组
    162 
    163                     sum += data[i].TowerNumber;
    164                     // console.log(sum)
    165                 }
    166 
    167                 //console.log(ProvinceNames)
    168                 myChart.setOption({ //加载数据图表
    169                     title: {
    170                         text: '各省市接地项目分布',
    171                         subtext: '',
    172                         x: 'center',
    173                         textStyle: {
    174                             color: '#000'
    175                         }
    176                     },
    177                     tooltip: {
    178                         trigger: 'item',
    179                         // formatter: '{b}'+'{c}',
    180                         trigger: 'item',
    181                         formatter: function (params) {
    182                             //判断是否有数量，若无数量，点击后只显示城市名
    183                             if (typeof (params.value)[2] == "undefined") {
    184                                 return params.name
    185                             }
    186                             //有数量时，显示城市和当前城市所做项目数
    187                             else {
    188                                 return params.name + ':' + params.value[2] //params.value[2]  取出value值中的第三个值  前两个值是经纬度，第三个值是数量
    189                             }
    190                         }
    191                     },
    192                     legend: {
    193                         orient: 'vertical',
    194                         y: 'bottom',
    195                         x: 'right',
    196                         data: ['sell_area'],
    197                         textStyle: {
    198                             color: '#fff'
    199                         }
    200                     },
    201                     visualMap: {
    202                         show: false,
    203                         min: 0,
    204                         max: 500,
    205                         left: 'left',
    206                         top: 'bottom',
    207                         text: ['高', '低'], // 文本，默认为数值文本
    208                         calculable: true,
    209                         seriesIndex: [1],
    210                         inRange: {
    211                             // color: ['#3B5077', '#031525'] // 蓝黑
    212                             // color: ['#ffc0cb', '#800080'] // 红紫
    213                             // color: ['#3C3B3F', '#605C3C'] // 黑绿
    214                             //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
    215                             // color: ['#23074d', '#cc5333'] // 紫红
    216                             color: ['#339966'] // 蓝绿
    217                         }
    218                     },
    219                     /**/
    220                     geo: {
    221                         show: true,
    222                         map: opt.mapName,
    223                         label: {
    224                             normal: {
    225                                 show: false
    226                             },
    227                             emphasis: {
    228                                 show: false,
    229                             }
    230                         },
    231                         roam: true, //是否拖动地图，鼠标滚轮控制地图大小
    232                         // left: '10%',
    233                         // center: [117.98561551896913, 31.205000490896193],
    234                         zoom: 1, // 改变这个值的大小就可以了
    235                         // data: convertData(provinceData),
    236                         itemStyle: {
    237                             normal: {
    238                                 areaColor: '#4169E1',
    239                                 borderColor: '#3B5077',
    240                             },
    241                             emphasis: {
    242                                 areaColor: '#2B91B7',
    243                             }
    244                         }
    245                     },
    246 
    247                     series: [
    248 
    249                         {
    250                             showAllSymbol: true,
    251                             type: 'map',
    252                             map: 'china',
    253                             geoIndex: 0,
    254                             aspectScale: 0.75, //长宽比
    255                             showLegendSymbol: false, // 存在legend时显示
    256                             label: {
    257                                 normal: {
    258                                     show: false
    259                                 },
    260                                 emphasis: {
    261                                     show: false,
    262                                     textStyle: {
    263                                         color: '#fff'
    264                                     }
    265                                 }
    266                             },
    267                             roam: true,
    268                             itemStyle: {
    269                                 normal: {
    270                                     areaColor: '#031525',
    271                                     borderColor: '#3B5077',
    272                                 },
    273                                 emphasis: {
    274                                     areaColor: '#2B91B7'
    275                                 }
    276                             },
    277                             animation: false,
    278                             data: provinceData
    279                         },
    280                         {
    281                             // name: '数量',
    282                             type: 'scatter',
    283                             coordinateSystem: 'geo',
    284                             symbol: 'pin',
    285                             symbolSize: function (val) {
    286                                 return 30;
    287                             },
    288                             label: {
    289                                 normal: {
    290                                     show: true,
    291                                     textStyle: {
    292                                         color: '#fff',
    293                                         fontSize: 9,
    294                                     }
    295                                 }
    296                             },
    297                             itemStyle: {
    298                                 normal: {
    299                                     color: '#32CD32', //标志颜色
    300                                 }
    301                             },
    302                             encode: { //可以定义 data 的哪个维度被编码成什么
    303                                 label: 2 // 表示 label 使用维度 3。
    304                             },
    305                             data: convertData(provinceData),
    306                         },
    307                     ],
    308                 });
    309             }
    310 
    311         },
    312         //错误提示
    313         error: function (XMLHttpRequest, textStatus, errorThrown) {
    314 
    315         },
    316     })
    317 
    318 
    319 
    320     var convertData = function (data) {
    321         var res = [];
    322         for (var i = 0; i < data.length; i++) {
    323             var geoCoord = geoCoordMap[data[i].name];
    324 
    325             if (geoCoord) {
    326                 res.push({
    327                     name: data[i].name,
    328                     value: geoCoord.concat(data[i].value)
    329                 });
    330             }
    331         }
    332         return res;
    333     };
    334 
    335     /*右侧图表的数据*/
    336 
    337     //从大到小排序
    338     TowerNumbers.sort(function (a, b) {
    339 
    340         return b - a; //当其改为a-b时，下面的排序反转参数就要去掉
    341     })
    342 
    343     var option = {};
    344 
    345     chart.setOption(option); //加载右侧图表数据
    346     window.onresize = chart.resize; //地图大小自动适应浏览器
    347 
    348     return chart;
    349 };

散点图+地图 tooltip不显示经纬度

参考了 [https://gallery.echartsjs.com/editor.html?c=xBJDR584vG][https_gallery.echartsjs.com_editor.html_c_xBJDR584vG]

最终的效果图：

![995015-20190806114228592-1239296018.png][]

转载于:https://www.cnblogs.com/heyiming/p/11307993.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211015/895fadbc2e624f159f41c7d76f91c683.png
[https_gallery.echartsjs.com_editor.html_c_xBJDR584vG]: https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
[995015-20190806114228592-1239296018.png]: /images/20211015/954798a5d3fa42d881fb9bfa19e11212.png