4***@qq.com
4***@qq.com
  • 发布:2020-06-13 18:53
  • 更新:2020-11-25 15:20
  • 阅读:1981

echart map 手机模式下无法点击

分类:uni-app

组件为renderjs 组件,在PC上可以正常点击,但是在移动端无法触发click事件。

    import echarts from "echarts"  
    import chinaJson  from "./config.js"  
    export default {  
        props: {  
            mapData:{  
                default:function(){  
                    return [];  
                },  
                type:Array   
            }  
        },  
        data() {  
            return {  

            }  
        },  
        mounted() {  
            let vm =this;  
            this.$nextTick(function(){  
                vm.createMap()  
            })  
        },  
        methods: {  
            createMap(){  
                var params = {  
                    names: [//把各个大区的省份用二维数组分开  
                        ['北京','天津','河北','山西','内蒙古'],  
                        ["黑龙江","吉林","辽宁"],  
                        ['山东','江苏','安徽','江西','浙江','福建','上海'],  
                        ['河南','湖北','湖南'],  
                        ['广东','广西','海南'],  
                        ['重庆','四川','云南','西藏','贵州'],  
                        ['陕西','甘肃','青海','宁夏','新疆'],  
                        ['香港','澳门','台湾']  
                    ],  
                    properties: {//自定义大区的名字,要和上面的大区省份一一对应  
                        name: ['华北','东北','华东','华中','华南','西南','西北','港澳台'],  
                        cp: [//经纬度可以自己随意定义,如'东北'等在地图的位置  
                            [134.47,47.78],  
                            [126.32,43.50],  
                            [121.28,31.13],  
                            [114.20,30.32],  
                            [113.15,23.08],  
                            [104.04,30.39],  
                            [103.49,36.03],  
                            [103.49,56.03]  
                        ]  
                    }  
                };  

                this.mergeProvinces(chinaJson, params.names, params.properties);  

                echarts.registerMap('china', chinaJson); // 注册地图  
                //var pRChart = echarts.init(this.$refs.ChinaMap.$el);  
                var pRChart = echarts.init(document.getElementById("echart"));  
                let option={  
                    geo:this.geo(),  
                    tooltip:this.tooltips(),  
                    series:this.series(),  
                    visualMap: {  
                                min: 800,  
                                max: 50000,  
                                text: ['High', 'Low'],  
                                realtime: false,  
                                calculable: true,  
                                inRange: {  
                                    color: ['lightskyblue', 'yellow', 'orangered']  
                                }  
                            },  
                };  
                 pRChart.setOption(option,true);  
            },  
            tooltips(){  
                return {  
                    trigger: 'item',  
                    backgroundColor: '#fff',  
                    padding: 0,  
                      //geoIndex: 0,  
                    textStyle:{  
                        color: '#333'  
                    },  
                    formatter: function (params) {  
                        var style = `  
                            <style>  
                            .title{background:#f1f4fc;line-height:25px;text-align:center;padding:5px 10px;}  
                                table{width:100%;text-align:center;border-collapse:collapse;}  
                                table td{border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 10px;}  
                                 table td:last-child{border-right:0;}  
                            </style>  
                        `  

                        var title = `<div class="title">${params.name}</div><table>`,  
                            con = '',  
                            bottom = '</table>';  

                        if(params.data) {  
                            var arr = params.data.value  
                            for(var i = 0; i < arr.length; i++) {  
                                con += `<tr><td>${arr[i][0]}</td><td>${arr[i][1]}</td><td>${arr[i][2]}</td></tr>`  
                            }  
                        }        

                        return style + title + con + bottom  
                    }  
                };  
            },  
            geo(){  
                return [  
                {  
                    map: 'china',  
                    top: 0,  
                    bottom: 0,  
                    roam: true,//禁止拖拽和伸缩  
                    regions: [  
                        {  
                            name:"东北",  
                            itemStyle: {  
                                areaColor: "#123",  
                                color: "#678",  
                            }  
                        },  
                        {  
                            name:"华北",  
                            itemStyle: {  
                                areaColor: "#234",  
                                color: "#678",  
                            }  
                        },  
                        {  
                            name:"华南",  
                            itemStyle: {  
                                areaColor: "#345",  
                                color: "#678",  
                            }  
                        },  
                        {  
                            name:"华东",  
                            itemStyle: {  
                                areaColor: "#456",  
                                color: "#678",  
                            }  
                        },  
                        {  
                            name:"西南",  
                            itemStyle: {  
                                areaColor: "#567",  
                                color: "#678",  
                            }  
                        },  
                        {  
                            name:"西北",  
                            itemStyle: {  
                                areaColor: "#678",  
                                color: "#678",  
                            }  
                        },  
                    ]   // 设置单独的样式。  
                }];  
            },  
            series(){  
                return [  
                    {  
                        name: '大区',//城市  
                            type: 'map',  
                            map: 'china',  
                            geoIndex: 0,  
                            aspectScale: 0.75, //长宽比  
                            symbolSize: 20,  
                            data: this.mapData,  
                            showLegendSymbol: true, // 存在legend时显示  
                            label: {  
                                normal: {  
                                    show: false,  
                                    areaColor:"#333",  
                                    textStyle: {  
                                        color: '#333'  
                                    }  
                                },  
                                emphasis: {//鼠标放上去时的状态  
                                    show: false,  
                                    textStyle: {  
                                        color: '#333'  
                                    }  
                                }  
                            },  
                            roam: true,//禁止拖拽和伸缩  
                            itemStyle: {  
                                normal: {  
                                    areaColor: '#d3dae1',  
                                    borderColor: '#fff',  
                                    borderWidth: 1  
                                },  
                                emphasis: {  
                                    areaColor: '#3c55b7'  
                                }  
                            }  
                    }  
              ]   ;  
            },  
            mergeProvinces(chinaJson, names, properties){  
                var features = chinaJson.features;  
                var polygons = [];  
                var polygons2 = [];  
                for(var i = 0; i < names.length; i++) {  
                    var polygonsCoordinates = [];  
                    var polygonsEncodeOffsets = [];  
                    for(var z = 0; z < names[i].length;z++){  
                        for(var j = 0; j < features.length; j++) {  
                            if(features[j].properties.name.indexOf(names[i][z])>-1) {  
                                if(features[j].geometry.coordinates[0].constructor == String){//合并coordinates  
                                    for(var l = 0; l<features[j].geometry.coordinates.length;l++){  
                                        polygonsCoordinates.push(features[j].geometry.coordinates[l]);  
                                    }  
                                }else if(features[j].geometry.coordinates[0].constructor == Array){  
                                    for(var k=0;k<features[j].geometry.coordinates.length;k++){  
                                        for(var d=0;d<features[j].geometry.coordinates[k].length;d++){  
                                            polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);  
                                        }  
                                    }  
                                }  

                                if (typeof features[j].geometry.encodeOffsets =="undefined"){  
                                    continue;  
                                }  
                                if(features[j].geometry.encodeOffsets[0].constructor == String){//合并encodeOffsets  
                                    polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);  
                                }else if(features[j].geometry.encodeOffsets[0].constructor == Array){  
                                    for(var k=0;k<features[j].geometry.encodeOffsets.length;k++){  
                                        if(features[j].geometry.encodeOffsets[k][0].constructor == Array){  
                                            for(var e=0;e<features[j].geometry.encodeOffsets[k].length;e++){  
                                                polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);  
                                            }  
                                        }else{  
                                            polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);  
                                        }  
                                    }  
                                }  

                                break;  
                            }  
                        }  
                    }  
                    polygons.push(polygonsCoordinates);  
                    polygons2.push(polygonsEncodeOffsets);  

                }  

                // 构建新的合并区域  
                var features = [];  

                for(var a = 0;a<names.length;a++){  
                    var feature = {  
                        id: features.length.toString(),  
                        type: "FeatureCollection",  
                        geometry: {  
                            type: "Polygon",  
                            coordinates: polygons[a],  
                            encodeOffsets: polygons2[a]  
                        },  
                        properties: {  
                            name: properties.name[a] || "",  
                            childNum:polygons[a].length  
                        }  
                    };  
                    if(properties.cp[a]) {  
                        feature.properties.cp = properties.cp[a];  
                    }  

                    // 将新的合并区域添加到地图中  
                    features.push(feature);  
                }  
                chinaJson.features = features;  
            },  
        },  
    };
2020-06-13 18:53 负责人:无 分享
已邀请:
alchemist

alchemist - 010

请问解决了吗

alchemist

alchemist - 010

弄好了,echarts的版本太高引起的

该问题目前已经被锁定, 无法添加新回复