0

1.点击选择其中一个选项就会进行ajax请求echarts并更新,现在是echarts的中加载的百度地图出不来。
2.点击选项都能够正确获取到json数据
3.图表只显示了echarts中的visualMap,实际的地图并没有显示
4.listValue[0]的数据格式见第一个图
5.是不是我引入百度地图到echarts里有问题?。。。

export default{
        data() {
            return {

            }
        },
        mounted (){
            myChart=this.$echarts.init(document.getElementById('myMain'))
            this.$bus.on('echarts-on',this.ready);//这条语句是响应选择组件选择数据更新时再更新echarys
            
        },
        methods:{
            
            ready(options){        
                
                myChart.setOption(this.echartsFunc(options))
                
            },
            echartsFunc(listValue) {
                console.log(listValue[0])
                // 配置option            
                var options = {
                    bmap: {
                        // 百度地图中心经纬度
                        center: [121.549703, 29.927862],
                        // 百度地图缩放
                        zoom: 12,
                        // 是否开启拖拽缩放,可以只设置 'scale' 或者 'move'
                        roam: true,
                        // 百度地图的自定义样式,见 http://developer.baidu.com/map/jsdevelop-11.htm
                        mapStyle: {
                            styleJson: [{
                                    "featureType": "water",
                                    "elementType": "all",
                                    "stylers": {
                                        "color": "#03353E"
                                    }
                                },
                                {
                                    "featureType": "highway",
                                    "elementType": "geometry.fill",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "highway",
                                    "elementType": "geometry.stroke",
                                    "stylers": {
                                        "color": "#147a92"
                                    }
                                },
                                {
                                    "featureType": "arterial",
                                    "elementType": "geometry.fill",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "arterial",
                                    "elementType": "geometry.stroke",
                                    "stylers": {
                                        "color": "#0b3d51"
                                    }
                                },
                                {
                                    "featureType": "local",
                                    "elementType": "geometry",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "land",
                                    "elementType": "all",
                                    "stylers": {
                                        "color": "#091744"
                                    }
                                },
                                {
                                    "featureType": "railway",
                                    "elementType": "geometry.fill",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "railway",
                                    "elementType": "geometry.stroke",
                                    "stylers": {
                                        "color": "#08304b"
                                    }
                                },
                                {
                                    "featureType": "subway",
                                    "elementType": "geometry",
                                    "stylers": {
                                        "lightness": -70
                                    }
                                },
                                {
                                    "featureType": "building",
                                    "elementType": "geometry.fill",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "all",
                                    "elementType": "labels.text.fill",
                                    "stylers": {
                                        "color": "#857f7f"
                                    }
                                },
                                {
                                    "featureType": "all",
                                    "elementType": "labels.text.stroke",
                                    "stylers": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "featureType": "building",
                                    "elementType": "geometry",
                                    "stylers": {
                                        "color": "#022338"
                                    }
                                },
                                {
                                    "featureType": "green",
                                    "elementType": "geometry",
                                    "stylers": {
                                        "color": "#062032"
                                    }
                                },
                                {
                                    "featureType": "boundary",
                                    "elementType": "all",
                                    "stylers": {
                                        "color": "#cc0000"
                                    }
                                },
                                {
                                    "featureType": "manmade",
                                    "elementType": "all",
                                    "stylers": {
                                        "color": "#000"
                                    }
                                }
                            ]
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        confine: true,
                        backgroundColor:'rgba(0,0,0,0)',
                        borderColor: '#2196F3',
                        position: 'top',
                        formatter: function(params) {
                            return '<span></span>' +  $scope.getName(params.name,params.value[2]);
                        },
                    },
                    visualMap: {
                        show: true,
                        top: 0,
                        precision: 2,
                        pieces: [
                            { gt: 0.8, color: '#fb8a33' }, // (1500, Infinity]
                            { gt: 0.6, lte: 0.8, color: '#ffdd54' }, // (900, 1500]
                            { gt: 0.4, lte: 0.6, color: '#4ddb9f' }, // (310, 1000]
                            { lt: 0.4, color: '#e16bff' }, // (200, 300]
                        ],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //防止每次调用数据,页面卡顿
                    series: [{
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: listValue[0],
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    },{
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: listValue[1],
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    },{
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: listValue[2],
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    },{
                        name: '',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: listValue[3],
                        symbolSize: 12,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        }
                    }]
                };
                 

                return options;

            }
        }
    }
</script>

查看全部 2 个回答

0

已采纳

我在vuejs2.0中没有引用扩展插件require('echarts/extension/bmap/bmap');

感谢各位大神相助!