echarts地图给每个区域添加不同颜色

echarts地图给每个区域添加不同颜色,在geo级下新增regions数组,每个数据一个区域。


"geo": {
	"map": "中国各省市县形状",
	"layoutCenter": ["50%", "50%"],
	"layoutSize": "90%",
	"roam": true, //是否允许缩放
	"mapLocation": {
		"width": "110%",
		"height": "97%"
	},
	label: {
		normal: { //静态的时候展示样式
			show: true, //是否显示地图省份得名称
			textStyle: {
				color: "#fff",
				fontSize: 12
			}
		},
		emphasis: { //动态展示的样式
			color: '#fff',
		},
	},
	//默认颜色
	itemStyle: {
		normal: {
			areaColor: '#091233',
			borderColor: '#269cfd', //线
		},
		emphasis: {
			areaColor: '#0a2dae', //悬浮区背景
		}
	}
	//对不同的区块进行着色
	regions: [{
		name: "凤凰镇",
		itemStyle: {
		  normal: {
			areaColor: "#0f0",
		  },
		  emphasis: {
			areaColor: "#0f0",
		  },
		},
	  },{
		name: "塘桥镇",
		itemStyle: {
		  normal: {
			areaColor: "#f00",
		  },
		  emphasis: {
			areaColor: "#f00",
		  },
		},
	}]
}
以上是编程学习网小编为您介绍的“echarts地图给每个区域添加不同颜色”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:echarts地图给每个区域添加不同颜色

基础教程推荐