由于Echart3更新后并没有内置中国地图的数据,导致我们使用全国地图的时候只显示南海群岛部分
此时我们需要单独引用中国地图的数据才能正常显示图表
图表的写法并没有任何变动
china.js下载地址(不能下载的小伙伴在此留言邮箱哦)
PS:使用地图图表显示数据的时候我们经常会加载json文件,此时要注意跨域的问题,需要本地启用服务或者上传到服务器进行访问哦
$.getJSON(uploadedDataURL, function (weiboData) {
var myChart = echarts.init(document.getElementById('datamap'));
weiboData = weiboData.map(function (serieData, idx) {
var px = serieData[0] / 1000;
var py = serieData[1] / 1000;
var res = [[px, py]];
for (var i = 2; i < serieData.length; i += 2) {
var dx = serieData[i] / 1000;
var dy = serieData[i + 1] / 1000;
var x = px + dx;
var y = py + dy;
res.push([x, y, 1]);
px = x;
py = y;
}
return res;
});
myChart.setOption(option = {
// backgroundColor: '#404a59',
title : {
text: '',
subtext: '',
sublink: '',
left: 'center',
top: 'top',
textStyle: {
color: '#fff'
}
},
grid: {
x: '2%',
y: '2%',
containLabel:true
},
/* legend: {
left: 'left',
data: ['强', '中', '弱'],
textStyle: {
color: '#ccc'
}
},*/
geo: {
name: '强',
type: 'scatter',
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: '弱',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: 'rgba(37, 140, 249, 0.8)'
}
},
data: weiboData[0]
}, {
name: '中',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(14, 241, 242, 0.8)',
color: 'rgba(14, 241, 242, 0.8)'
}
},
data: weiboData[1]
}, {
name: '强',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 1,
large: true,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(255, 255, 255, 0.8)',
color: 'rgba(255, 255, 255, 0.8)'
}
},
data: weiboData[2]
}]
});
});