vue.js - vue2.0加载不出echarts引用的百度地图
本文介绍了vue.js - vue2.0加载不出echarts引用的百度地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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>
解决方案
我在vuejs2.0中没有引用扩展插件require('echarts/extension/bmap/bmap');
感谢各位大神相助！
这篇关于vue.js - vue2.0加载不出echarts引用的百度地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
