使用echarts制作迁徙图,以天津市为例,先上图
其中全国各省地图边界经纬度坐标下载地址:http://www.ourd3js.com/wordpress/638/#more-638
代码示例:
// 路径配置
require.config({
paths: {
echarts: 'build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
require('echarts/util/mapData/params').params.tianjin = {
getGeoJson: function (callback) {
$.getJSON('build/tjfgs.json', function (data) {
// 压缩后的地图数据必须使用 decode 函数转换
callback(require('echarts/util/mapData/params').decode(data));
});
}
};
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
backgroundColor: '',
color: ['gold', 'aqua', 'lime'],
tooltip : {
trigger: 'item',
formatter: '{b}'
},
legend: {
show :false,
orient: 'vertical',
x: '30',
data: ['南开红桥', '和平河西', '河北河东'],
selectedMode: 'single',
selected: {
'和平河西': false,
'河北河东': false
},
textStyle: {
color: '#fff'
}
},
dataRange: {
show:false,
min: 0,
max: 100,
x: '760',
y: '5',
orient: 'horizontal',
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
}
},
//通用图形配置
series: [
{
name: '南开红桥',
type: 'map',
hoverable: false,
mapType: 'tianjin',
roam: false,
itemStyle: {
normal:{
label:{
show:true,
textStyle:{
color:'#07d40d'
}
},
borderColor:'rgba(255,255,255,1)',
borderWidth:0.5,
areaStyle:{
color: '#CCCCFF'
}
},
emphasis:{label:{show:true}}
},
data: [],
// 数据表现内容
markLine: {
smooth: true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
data: [
[{name:'南开红桥'},{name:'宝坻区'}],
[{name:'南开红桥'},{name:'北辰区'}],
[{name:'南开红桥'},{name:'东丽区'}],
[{name:'南开红桥'},{name:'和平河西'}],
[{name:'南开红桥'},{name:'河北河东'}],
[{name:'南开红桥'},{name:'津南区'}],
[{name:'南开红桥'},{name:'武清区'}],
],
},
geoCoord: {
'宝坻区': [117.310682,39.730124],
'北辰区': [117.139545,39.23218],
'东丽区': [117.323722,39.091136],
'和平河西': [117.21766,39.116725],
'河北河东': [117.236416,39.149329],
'津南区': [117.335891,38.946767],
'武清区':[117.03002,39.405758],
'南开红桥':[117.146565,39.154897],
},
markPoint: {
symbol: 'emptyCircle',
//symbolSize:5,
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:true}
},
emphasis: {
label:{position:'top'}
}
},
data: [
{name:'宝坻区',value:95},
{name:'北辰区',value:90},
{name:'东丽区',value:85},
{name:'和平河西',value:75},
{name:'河北河东',value:65},
{name:'津南区',value:55},
{name:'武清区',value:100}
]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
示例代码下载地址: http://download.csdn.net/download/ardo_pass/10141785