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

时间:2019-08-06
本文章向大家介绍百度地图 echarts tooltip属性 经纬度坐标不显示,主要包括百度地图 echarts tooltip属性 经纬度坐标不显示使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
echarts.appMap = function (id, opt) {
    // 实例
    var chart = this.init(document.getElementById(id));
    // var curGeoJson = {};
    var cityMap = {
        "河南": "henan",
        "河北": "hebei",
        '北京': 'beijing',
        '天津': 'tianjin',
        '山西': 'sx',
        '内蒙古': 'neimenggu',
        '辽宁': 'liaoning',
        '吉林': 'jilin',
        '黑龙江': 'heilongjiang',
        '上海': 'shanghai',
        '江苏': 'jiangsu',
        '浙江': 'zhejiang',
        '安徽': 'anhui',
        '福建': 'fujian',
        '江西': 'jiangxi',
        '山东': 'shandong',
        '湖北': 'hubei',
        '湖南': 'hunan',
        '广东': 'guangdong',
        '广西': 'guangxi',
        '海南': 'hainan',
        '重庆': 'chongqing',
        '四川': 'sichuan',
        '贵州': 'guizhou',
        '云南': 'yunnan',
        '西藏': 'xizang',
        '陕西': 'shanxi',
        '甘肃': 'gansu',
        '青海': 'qinghai',
        '宁夏': 'ningxia',
        '新疆': 'xinjiang',
        '香港': 'hongkong',
        '澳门': 'macau',
        '台湾': 'taiwan'
    };

    var treeMap = {
        "河南": 410000,
        "河北": 130000,
        '北京': 110000,
        '天津': 120000,
        '山西': 140000,
        '内蒙古': 150000,
        '辽宁': 210000,
        '吉林': 220000,
        '黑龙江': 230000,
        '上海': 310000,
        '江苏': 320000,
        '浙江': 330000,
        '安徽': 340000,
        '福建': 350000,
        '江西': 360000,
        '山东': 370000,
        '湖北': 420000,
        '湖南': 430000,
        '广东': 440000,
        '广西': 450000,
        '海南': 460000,
        '重庆': 500000,
        '四川': 510000,
        '贵州': 520000,
        '云南': 530000,
        '西藏': 540000,
        '陕西': 610000,
        '甘肃': 620000,
        '青海': 630000,
        '宁夏': 640000,
        '新疆': 650000,
        '香港': 810000,
        '澳门': 820000,
        '台湾': 710000
    };
    var geoCoordMap = {
        '河南': [113.65, 34.76],
        '河北': [114.52, 38.05],
        '北京': [116.4, 39.9],
        '天津': [117.2, 39.12],
        '山西': [112.55, 37.87],
        '内蒙古': [111.73, 40.83],
        '辽宁': [123.43, 41.8],
        '吉林': [125.32, 43.9],
        '黑龙江': [126.53, 45.8],
        '上海': [121.47, 31.23],
        '江苏': [118.78, 32.07],
        '浙江': [120.15, 30.28],
        '安徽': [117.25, 31.83],
        '福建': [119.3, 26.08],
        '江西': [115.85, 28.68],
        '山东': [116.98, 36.67],
        '湖北': [114.3, 30.6],
        '湖南': [112.93, 28.23],
        '广东': [113.27, 23.13],
        '广西': [108.37, 22.82],
        '海南': [110.32, 20.03],
        '重庆': [106.55, 29.57],
        '四川': [104.07, 30.67],
        '贵州': [106.63, 26.65],
        '云南': [102.72, 25.05],
        '西藏': [91.13, 29.65],
        '陕西': [108.93, 34.27],
        '甘肃': [103.82, 36.07],
        '青海': [101.78, 36.62],
        '宁夏': [106.28, 38.47],
        '新疆': [87.62, 43.82],
        '香港': [114.08, 22.2],
        '澳门': [113.33, 22.13],
        '台湾': [121.520, 25.03]
    };
    //level的三种水平  按等级给定每个等级颜色
    // var levelColorMap = {
    //     '1': 'rgba(0,255,255)',//蓝
    //     '2': 'rgba(0,255,127)',//黄色
    //     '3': 'rgba(255,0,255)'//红色

    // };

    var defaultOpt = {
        mapName: 'china', // 地图展示
        goDown: false, // 是否下钻
        bgColor: '#404a59', // 画布背景色
        activeArea: [], // 区域高亮,同echarts配置项
        data: [],
        // 下钻回调(点击的地图名、实例对象option、实例对象)
        callback: function (cc, option, instance) {}
    };

    // var ProvinceNames = [];    //类别数组(实际用来盛放X轴坐标值)
    var TowerNumbers = []; //销量数组(实际用来盛放Y坐标值)
    var provinceData = [];
    var valMap = new Map();
    //var sum  =0;
    /*获取地图数据*/
    $.ajax({
        url: "../sdTree/showChildCountByTreeId.do",
        type: "post",
        dataType: "json",
        data: {
            id: 86
        },
        success: function (data) {
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            if (data) {
                provinceData = [];
                avg = 1;
                sum = 0;
                // var sum = 0;
                var count = data.length;
                for (var i = 0; i < data.length; i++) {
                    provinceData.push({
                        name: data[i].ProvinceName,
                        value: data[i].TowerNumber,
                    })
                    //sum+=data[i].TowerNumber;
                    valMap.set(data[i].TowerNumber, i);
                    // ProvinceNames.push(data[i].ProvinceName);    //挨个取出类别并填入类别数组
                    TowerNumbers.push(data[i].TowerNumber); //挨个取出销量并填入销量数组

                    sum += data[i].TowerNumber;
                    // console.log(sum)






                }

                //console.log(ProvinceNames)
                myChart.setOption({ //加载数据图表
                    title: {
                        text: '各省市接地项目分布',
                        subtext: '',
                        x: 'center',
                        textStyle: {
                            color: '#000'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        // formatter: '{b}'+'{c}',
                        trigger: 'item',
                        formatter: function (params) {
                            //判断是否有数量,若无数量,点击后只显示城市名
                            if (typeof (params.value)[2] == "undefined") {
                                return params.name
                            }
                            //有数量时,显示城市和当前城市所做项目数
                            else {
                                return params.name + ':' + params.value[2] //params.value[2]  取出value值中的第三个值  前两个值是经纬度,第三个值是数量
                            }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x: 'right',
                        data: ['sell_area'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本,默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {
                            // color: ['#3B5077', '#031525'] // 蓝黑
                            // color: ['#ffc0cb', '#800080'] // 红紫
                            // color: ['#3C3B3F', '#605C3C'] // 黑绿
                            //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                            // color: ['#23074d', '#cc5333'] // 紫红
                            color: ['#339966'] // 蓝绿
                        }
                    },
                    /**/
                    geo: {
                        show: true,
                        map: opt.mapName,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true, //是否拖动地图,鼠标滚轮控制地图大小
                        // left: '10%',
                        // center: [117.98561551896913, 31.205000490896193],
                        zoom: 1, // 改变这个值的大小就可以了
                        // data: convertData(provinceData),
                        itemStyle: {
                            normal: {
                                areaColor: '#4169E1',
                                borderColor: '#3B5077',
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },

                    series: [

                        {
                            showAllSymbol: true,
                            type: 'map',
                            map: 'china',
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#3B5077',
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            animation: false,
                            data: provinceData
                        },
                        {
                            // name: '数量',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin',
                            symbolSize: function (val) {
                                return 30;
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 9,
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#32CD32', //标志颜色
                                }
                            },
                            encode: { //可以定义 data 的哪个维度被编码成什么
                                label: 2 // 表示 label 使用维度 3。
                            },
                            data: convertData(provinceData),
                        },
                    ],
                });
            }

        },
        //错误提示
        error: function (XMLHttpRequest, textStatus, errorThrown) {

        },
    })



    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];

            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    /*右侧图表的数据*/

    //从大到小排序
    TowerNumbers.sort(function (a, b) {

        return b - a; //当其改为a-b时,下面的排序反转参数就要去掉
    })



    var option = {};

    chart.setOption(option); //加载右侧图表数据
    window.onresize = chart.resize; //地图大小自动适应浏览器

    return chart;
};

参考了 https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
/*tooltip formatter属性 对获取值的判断 屏蔽经纬度坐标的显示 */

// var toolTipData = [{
//     name: "北京",
//     value: [{
//         name: "文科",
//         value: 95
//     }, {
//         name: "理科",
//         value: 82
//     }]
// },
// {
//     name: "天津",
//     value: [{
//         name: "文科",
//         value: 22
//     }, {
//         name: "理科",
//         value: 20
//     }]
// },
// {
//     name: "河北",
//     value: [{
//         name: "文科",
//         value: 60
//     }, {
//         name: "理科",
//         value: 42
//     }]
// },
// {
//     name: "山西",
//     value: [{
//         name: "文科",
//         value: 40
//     }, {
//         name: "理科",
//         value: 41
//     }]
// },
// {
//     name: "内蒙古",
//     value: [{
//         name: "文科",
//         value: 23
//     }, {
//         name: "理科",
//         value: 24
//     }]
// },
// {
//     name: "辽宁",
//     value: [{
//         name: "文科",
//         value: 39
//     }, {
//         name: "理科",
//         value: 28
//     }]
// },
// {
//     name: "吉林",
//     value: [{
//         name: "文科",
//         value: 41
//     }, {
//         name: "理科",
//         value: 41
//     }]
// },
// {
//     name: "黑龙江",
//     value: [{
//         name: "文科",
//         value: 35
//     }, {
//         name: "理科",
//         value: 31
//     }]
// },
// {
//     name: "上海",
//     value: [{
//         name: "文科",
//         value: 12
//     }, {
//         name: "理科",
//         value: 12
//     }]
// },
// {
//     name: "江苏",
//     value: [{
//         name: "文科",
//         value: 47
//     }, {
//         name: "理科",
//         value: 45
//     }]
// },
// {
//     name: "浙江",
//     value: [{
//         name: "文科",
//         value: 57
//     }, {
//         name: "理科",
//         value: 57
//     }]
// },
// {
//     name: "安徽",
//     value: [{
//         name: "文科",
//         value: 57
//     }, {
//         name: "理科",
//         value: 52
//     }]
// },
// {
//     name: "福建",
//     value: [{
//         name: "文科",
//         value: 59
//     }, {
//         name: "理科",
//         value: 57
//     }]
// },
// {
//     name: "江西",
//     value: [{
//         name: "文科",
//         value: 49
//     }, {
//         name: "理科",
//         value: 42
//     }]
// },
// {
//     name: "山东",
//     value: [{
//         name: "文科",
//         value: 67
//     }, {
//         name: "理科",
//         value: 52
//     }]
// },
// {
//     name: "河南",
//     value: [{
//         name: "文科",
//         value: 69
//     }, {
//         name: "理科",
//         value: 68
//     }]
// },
// {
//     name: "湖北",
//     value: [{
//         name: "文科",
//         value: 60
//     }, {
//         name: "理科",
//         value: 56
//     }]
// },
// {
//     name: "湖南",
//     value: [{
//         name: "文科",
//         value: 62
//     }, {
//         name: "理科",
//         value: 52
//     }]
// },
// {
//     name: "重庆",
//     value: [{
//         name: "文科",
//         value: 47
//     }, {
//         name: "理科",
//         value: 44
//     }]
// },
// {
//     name: "四川",
//     value: [{
//         name: "文科",
//         value: 65
//     }, {
//         name: "理科",
//         value: 60
//     }]
// },
// {
//     name: "贵州",
//     value: [{
//         name: "文科",
//         value: 32
//     }, {
//         name: "理科",
//         value: 30
//     }]
// },
// {
//     name: "云南",
//     value: [{
//         name: "文科",
//         value: 42
//     }, {
//         name: "理科",
//         value: 41
//     }]
// },
// {
//     name: "西藏",
//     value: [{
//         name: "文科",
//         value: 5
//     }, {
//         name: "理科",
//         value: 4
//     }]
// },
// {
//     name: "陕西",
//     value: [{
//         name: "文科",
//         value: 38
//     }, {
//         name: "理科",
//         value: 42
//     }]
// },
// {
//     name: "甘肃",
//     value: [{
//         name: "文科",
//         value: 28
//     }, {
//         name: "理科",
//         value: 28
//     }]
// },
// {
//     name: "青海",
//     value: [{
//         name: "文科",
//         value: 5
//     }, {
//         name: "理科",
//         value: 5
//     }]
// },
// {
//     name: "宁夏",
//     value: [{
//         name: "文科",
//         value: 10
//     }, {
//         name: "理科",
//         value: 8
//     }]
// },
// {
//     name: "新疆",
//     value: [{
//         name: "文科",
//         value: 36
//     }, {
//         name: "理科",
//         value: 31
//     }]
// },
// {
//     name: "广东",
//     value: [{
//         name: "文科",
//         value: 63
//     }, {
//         name: "理科",
//         value: 60
//     }]
// },
// {
//     name: "广西",
//     value: [{
//         name: "文科",
//         value: 29
//     }, {
//         name: "理科",
//         value: 30
//     }]
// },
// {
//     name: "海南",
//     value: [{
//         name: "文科",
//         value: 8
//     }, {
//         name: "理科",
//         value: 6
//     }]
// },
// ];



// formatter: function(params) {
//     if (typeof(params.value)[2] == "undefined") {
//         var toolTiphtml = ''
//         for(var i = 0;i<toolTipData.length;i++){
//             if(params.name==toolTipData[i].name){
//                 toolTiphtml += toolTipData[i].name+':<br>'
//                 for(var j = 0;j<toolTipData[i].value.length;j++){
//                     toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
//                 }
//             }
//         }
//         console.log(toolTiphtml)
//         // console.log(convertData(data))
//         return toolTiphtml;
//     } else {
//         var toolTiphtml = ''
//         for(var i = 0;i<toolTipData.length;i++){
//             if(params.name==toolTipData[i].name){
//                 toolTiphtml += toolTipData[i].name+':<br>'
//                 for(var j = 0;j<toolTipData[i].value.length;j++){
//                     toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
//                 }
//             }
//         }
//         console.log(toolTiphtml)
//         // console.log(convertData(data))
//         return toolTiphtml;
//     }
// }
View Code

效果图:

 

$flag 上一页 下一页