虚拟地图区域数据统计-柱状图ECharts Gallery

20:11:45图表已生成
代码
var typeArr = ["鲜花","星星","香蕉","嫌弃"];
var typeIndex = 1;
var selectedRange = null;
var option = null;
var str = "";
var data = [];
var geoCoordMap = {};
var name = "虚拟地图区域柱状图"
var mapName = 'china'
// 地图特征
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function(v){
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
    data.push({
    	// 需要挨个处理各地区数据（不使用随机产生的数）：另外需要构造的数据是柱图数据
    	"name":name,
    	"value":[
    	{name:"鲜花",value:Math.round(Math.random() * 100 + 10)},
    	{name:"星星",value:Math.round(Math.random() * 100 + 10)},
    	{name:"香蕉",value:Math.round(Math.random() * 100 + 10)},
    	{name:"嫌弃",value:Math.round(Math.random() * 100 + 10)}
    	]
    })
});
// 地理坐标图(打印出来方便查看)
console.log("===========geoCoordMap===============");
for (var i in geoCoordMap) {
	console.log(geoCoordMap[i]);
}
console.log(geoCoordMap);
console.log("==============data===============");
console.log(data);

//变换地图数据（格式）：pie
// function convertMapDta(type,data){
// 	var mapData = [];
// 	data.forEach(function(v){
// 		v.value.forEach(function(v1){
// 			if(String(v1.name) === String(type)){
// 				mapData.push({
// 					"name":v.name,"value":v1.value
// 				})
// 			}
// 		})
// 	});
// 	mapData.push({
// 		name: '南海诸岛',
// 		itemStyle: {
// 			normal: {
// 				opacity:0
// 			}
// 		},
// 		label: {
// 			normal: {
// 				show: false
// 			}
// 		}
// 	});

//变换地图数据（格式）：bar
function convertMapDta_bar(type,data){
	var mapData = [];
	data.forEach(function(v){
		v.value.forEach(function(v1){
			if(String(v1.name) === String(type)){
                // 数据格式：data: [120, 200, 150, 80]
                mapData.push({
                	"name":v.name,"value":v1.value
                })
            }
        })
	});
	return mapData;
}
console.log("================mapData==================")
console.log(convertMapDta_bar(typeArr[typeIndex],data))
console.log("=========================================")

/*resetPie*/
// function resetPie(myChart,params,geoCoordMap,typeIndex){
// 	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[typeIndex].value;
// 				if(pd < rangeFirstNumber || pd > rangeSecondNumber){
// 					v.itemStyle.normal.opacity = 0;
// 				}else{
// 					v.itemStyle.normal.opacity = 1;
// 				}
// 			}
// 		}
// 	});
// 	myChart.setOption(op,true);
// }

function resetBar(myChart,params,geoCoordMap,typeIndex){
	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[typeIndex].value;
				if(pd < rangeFirstNumber || pd > rangeSecondNumber){
					v.itemStyle.normal.opacity = 0;
				}else{
					v.itemStyle.normal.opacity = 1;
				}
			}
		}
	});
	myChart.setOption(op,true);
}
/*addPie*/
// 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 + "<br/>" + 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;
// };

/*addBar*/
function addBar(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});
				vr.push(v.value);
			});
			var p = chart.convertToPixel({seriesIndex: 0}, geoCoord);
			console.log("================柱图数据==================")
			console.log(vr)
			console.log("================柱图位置==================")
			console.log(p)
			console.log("================option操作数==================")
			op.xAxis = {
				type: 'category',
				data: ['鲜花', '星星', '香蕉', '嫌弃']
			}
			op.yAxis = {
				type: 'value'
			}
			console.log(op)
			sd.push(
				{
					name:data[i].name,
					type:'bar',
					tooltip:{
						formatter:function(params){
							return params.seriesName + "<br/>" + params.name + " : " + params.value;
						}
					},
				radius : radius,
				center: p,
				data:vr,
				zlevel:4,
				label: {
					normal: {
						show: false,
					},
				},
				labelLine: {
					normal: {
						show: false
					}
				},
				itemStyle:{
					mormal:{
						opacity:1
					}
				},
				//配置样式
				itemStyle: {
		            //通常情况下：
		            normal:{
		　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
		color: function (params){
			var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
			return colorList[params.dataIndex];
		}
	},
		            //鼠标悬停时：
		            emphasis: {
		            	shadowBlur: 10,
		            	shadowOffsetX: 0,
		            	shadowColor: 'rgba(0, 0, 0, 0.5)'
		            }
		        }
		        //设置柱子的宽度
		        // barWidth : 120,
		    });
		}
	}
	return sd;
};

/* 指定图表的配置项和数据:pie*/
// var option = {
//     title: {
//         text: 'test',
//         left: 'center',
//         textStyle: {
//             color: '#fff'
//         }
//     },
//     tooltip : {
//         trigger: 'item',
//         formatter:function(params){
//             if(params.value){
//                 return params.name + "<br/>"+ typeArr[typeIndex] +": "+ params.value;
//             }
//         }
//     },
//     visualMap: {
//         min: 0,
//         max: 120,
//         left: 'right',
//         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(typeArr[typeIndex],data),
//         /*zlevel:3*/
//     }]
// };

// 指定图表的配置项和数据:bar
option = {
	xAxis: {
		type: 'category',
		data: ['鲜花', '星星', '香蕉', '嫌弃']
	},
	yAxis: {
		type: 'value'
	},
	title: {
		text: name,
		left: 'center',
		textStyle: {
			color: 'black'
		}
	},
	tooltip : {
		trigger: 'item',
		formatter:function(params){
			if(params.value){
				return params.name + "<br/>"+ typeArr[typeIndex] +": "+ params.value;
			}
		}
	},
	visualMap: {
		min: 0,
		max: 120,
		left: 'right',
		top: 'bottom',
		seriesIndex:0,
		text: ["高", "低"],
		calculable: true,
		color: ['#c05050','#e5cf0d','#5ab1ef'],
	},
	series: [
	{
		name: 'chinaMap',
		type: 'map',
		mapType: mapName,
		roam:true,
		label: {
			normal: {
				show: true
			},
			emphasis: {
				show: true
			}
		},
		itemStyle:{
			normal:{
				areaColor:"#eee"
			}
		},
		data:convertMapDta_bar(typeArr[typeIndex],data),
		/*zlevel:3*/
	}
]
};
if (option && typeof option === "object") {
	myChart.setOption(option, true);
}
/*pie*/
// addPie(myChart,data);
/*bar*/
addBar(myChart,data);
console.log("===========option=================");
console.log(option);
myChart.setOption(option,true);

/*饼图跟着地图移动:pie*/
// myChart.on('georoam', function (params) {
// 	resetPie(myChart,params,geoCoordMap,typeIndex);
// });
// myChart.on('datarangeselected', function (params) {
// 	resetPie(myChart,params,geoCoordMap,typeIndex);
// });
// window.addEventListener("resize",function(){
// 	myChart.resize();
// 	resetPie(myChart,0,geoCoordMap);
// })

/*饼图跟着地图移动:bar*/
myChart.on('georoam', function (params) {
	resetBar(myChart,params,geoCoordMap,typeIndex);
});
myChart.on('datarangeselected', function (params) {
	resetBar(myChart,params,geoCoordMap,typeIndex);
});
window.addEventListener("resize",function(){
	myChart.resize();
	resetBar(myChart,0,geoCoordMap);
})

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
