
后续进行美化, 先上代码, 其实就是把地图经纬度转为X/Y坐标。
// 品牌优势-区域分布
me.initEcharts2 = function() {
var myChart = echarts.init(document.getElementById('echarts2'), 'light');
$.get('../json/chengdu5city.json', function(geoJson) {
echarts.registerMap('CD', geoJson);
myChart.setOption(option = {
title : {
text : '城市配送物流区域分布',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : function(params, ticket, callback) {
return params.value * "100000";
}
},
toolbox : {
show : true,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
visualMap : {
min : 0,
max : 13,
text : [ 'High', 'Low' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'lightskyblue', 'yellow', 'orangered' ]
}
},
series : [ {
name : '香港18区人口密度',
type : 'map',
mapType : 'CD', // 自定义扩展图表类型
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : '锦江区',
value : 0.0005116
}, {
name : '青羊区',
value : 0.0006116
}, {
name : '金牛区',
value : 0.000517583
}, {
name : '武侯区',
value : 0.000416583
}, {
name : '成华区',
value : 0.000711583
} ]
} ]
});
setTimeout(function() {
myChart.setOption({
series : getPieSeries(scatterData(), myChart)
});
}, 10);
});
}
var scatterData = function getVirtulData() {
var data = [ {
name : '锦江区',
value : 0.00012358 * 100000
}, {
name : '青羊区',
value : 0.00012358 * 100000
}, {
name : '金牛区',
value : 0.00012358 * 100000
}, {
name : '武侯区',
value : 0.00012358 * 100000
}, {
name : '成华区',
value : 0.00012358 * 100000
} ];
return data;
}
function getPieSeries(scatterData, chart) {
return echarts.util.map(scatterData, function(item, index) {
var center = chart.convertToPixel({
seriesIndex : 0
}, [ 104.153987825, 30.740483625 ]);
console.log(center);
return {
id : index + 'pie',
type : 'pie',
center : center,
label : {
normal : {
formatter : '{c}',
position : 'inside'
}
},
radius : 50,
data : [ {
name : '工作',
value : Math.round(Math.random() * 24)
}, {
name : '娱乐',
value : Math.round(Math.random() * 24)
}, {
name : '睡觉',
value : Math.round(Math.random() * 24)
} ]
};
});
}
微信扫一扫打赏
支付宝扫一扫打赏
