Echarts如何实现在地图上画饼图
本文参考：http://gallery.echartsjs.com/editor.html?c=xrJlpbBQSZ
废话不多说了，直接上HTML源码
<html>
<head>
<meta charset="utf-8">
<title>china maptitle>
<script src="../echarts.js">script>
<script src="../china.js">script>
<script src="../guangdong.js">script>
head>
<body>
<div id="main" style="width: 900px;height:600px;">div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var yearArr = [2013,2014,2015];
var yearIndex = 1;
var selectedRange = null;
var option = null;
var str = "";
var data = [];
var geoCoordMap = {};
var mapFeatures = echarts.getMap('广东').geoJson.features;
mapFeatures.forEach(function(v){
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
data.push({
"name":name,
"value":[
{name:"2013",value:Math.round(Math.random() * 100 + 10)},
{name:"2014",value:Math.round(Math.random() * 100 + 10)},
{name:"2015",value:Math.round(Math.random() * 100 + 10)}
]
})
});
//var geoCoordMap = eval("({"+str+"})");
console.log("===========geoCoordMap===============");
for (var i in geoCoordMap) {
console.log(geoCoordMap[i]);
}
console.log(geoCoordMap);
console.log("===========data===============");
console.log(data);
function convertMapDta(year,data){
var mapData = [];
data.forEach(function(v){
v.value.forEach(function(v1){
if(String(v1.name) === String(year)){
mapData.push({
"name":v.name,"value":v1.value
})
}
})
});
/*mapData.push({
name: '南海诸岛',
itemStyle: {
normal: {
opacity:0
}
},
label: {
normal: {
show: false
}
}
});*/
return mapData;
}
function resetPie(myChart,params,geoCoordMap,yearIndex){
var op = myChart.getOption();
var ops = op.series;
ops.forEach(function(v,i){
if(i > 0){
var geoCoord = geoCoordMap[v.name];
var p = myChart.convertToPixel({seriesIndex: 0}, geoCoord);
v.center = p;
if(params != 0 && params.zoom){
v.radius = v.radius * params.zoom;
}
if(params != 0 && params.selected){
var rangeFirstNumber = params.selected[0];
var rangeSecondNumber = params.selected[1];
var pd = v.data[yearIndex].value;
if(pd < rangeFirstNumber || pd > rangeSecondNumber){
v.itemStyle.normal.opacity = 0;
}else{
v.itemStyle.normal.opacity = 1;
}
}
}
});
myChart.setOption(op,true);
}
function addPie(chart,data) {
var op = chart.getOption();
var sd = option.series;
for (var i = 0; i < data.length; i++) {
var randomValue = Math.round(Math.random() * 30);
var radius = randomValue <= 10 ? 10 : randomValue;
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
var vr = [];
(data[i].value).map(function(v,j){
vr.push({name:v.name,value:v.value});
});
var p = chart.convertToPixel({seriesIndex: 0}, geoCoord);
sd.push(
{
name:data[i].name,
type:'pie',
tooltip:{
formatter:function(params){
return params.seriesName + "
" + params.name + " : " + params.value;
}
},
radius : radius,
center: p,
data:vr,
zlevel:4,
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle:{
mormal:{
opacity:1
}
}
}
);
}
}
return sd;
};
// 指定图表的配置项和数据
var option = {
title: {
text: 'test',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter:function(params){
if(params.value){
return params.name + "
"+ yearArr[yearIndex] +": "+ params.value;
}
}
},
visualMap: {
min: 0,
max: 120,
left: 'left',
top: 'bottom',
seriesIndex:0,
text: ["高", "低"],
calculable: true,
color: ['#c05050','#e5cf0d','#5ab1ef'],
},
series : [{
name: 'chinaMap',
type: 'map',
mapType: '广东',
roam:true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle:{
normal:{
areaColor:"#eee"
}
},
data:convertMapDta(yearArr[yearIndex],data),
/*zlevel:3*/
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
addPie(myChart,data);
console.log("===========option=================");
console.log(option);
myChart.setOption(option,true);
/*myChart.on('georoam', function (params) {
resetPie(myChart,params,geoCoordMap,yearIndex);
});
myChart.on('datarangeselected', function (params) {
resetPie(myChart,params,geoCoordMap,yearIndex);
});
window.addEventListener("resize",function(){
myChart.resize();
resetPie(myChart,0,geoCoordMap);
})*/
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
script>
body>
html>