首页 前端知识 echarts山东地图改变地图颜色

echarts山东地图改变地图颜色

2024-09-10 23:09:17 前端知识 前端哥 831 677 我要收藏

zjditu() {
						var uploadedDataURL =
							"http://api.ppmark.cn/chart-assets/asset/get/s/data-1482909892121-BJ3auk-Se.json";
						let myChartditua = this.$refs.myChartditu;

						let myChart = echarts.init(myChartditua);

						function showProvince() {
							var name = "shandong";

							myChart.showLoading();
							$.get(uploadedDataURL, function(geoJson) {
								myChart.hideLoading();

								echarts.registerMap(name, geoJson);

								myChart.setOption(
									(option = {
										// title: {
										// 	text: "",
										// 	left: "center", //标题位置
										// 	textStyle: {
										// 		fontSize: 32,
										// 		fontWeight: "bolder",
										// 		color: "black", // 主标题文字颜色
										// 	},
										// },
										color: ["#fff"],

										// legend: {
										// 	orient: "vertical",
										// 	left: "left",
										// 	textStyle: {
										// 		fontSize: 16,
										// 		color: "black", // 图例文字颜色
										// 	},
										// 	//data: ['地市']
										// 	// 图例位置
										// },

										// visualMap: {
										// 	min: 0,
										// 	max: 20,
										// 	left: "left",
										// 	top: "bottom",
										// 	text: ["高", "低"], // 文本,默认为数值文本
										// 	calculable: false,
										// 	color: ['blue', 'blue']
										// },

										// toolbox: {
										// 	show: true,
										// 	orient: "vertical",
										// 	left: "right",
										// 	top: "center",
										// 	feature: {
										// 		dataView: {
										// 			readOnly: false,
										// 		},
										// 		restore: {},
										// 		saveAsImage: {},
										// 	},
										// },
										series: [{
											name: "地市",
											type: "map",
											mapType: name,
											label: {
												normal: {
													show: true,
													color: "#fff",
												},
												emphasis: {
													textStyle: {
														color: "#fff",
													},
												},
											},
											itemStyle: {
												normal: {
													borderWidth: 2, //区域边框宽度
													borderColor: '#1A48E0', //区域边框颜色
													areaColor: "#032261", //区域颜色

												},
												emphasis: {
													borderColor: '#15DCF1', //区域边框颜色
													areaColor: '#2190FF', // 鼠标 hover 高亮时地图板块的样式
												}
											},
											selectedMode: "single", //选择模式,单选,只能选中一个地市
											select: { //这个就是鼠标点击后,地图想要展示的配置
												disabled: false, //可以被选中
												itemStyle: { //相关配置项很多,可以参考echarts官网
													areaColor: "#77e8e4" //选中
												}
											},
											data: [{
													name: "济南市",
													value: 7,
												},
												{
													name: "青岛市",
													value: 13,
												},
												{
													name: "淄博市",
													value: 2,
												},
												{
													name: "枣庄市",
													value: 2,
												},
												{
													name: "烟台市",
													value: 8,
												},
												{
													name: "潍坊市",
													value: 3,
												},
												{
													name: "济宁市",
													value: 5,
												},
												{
													name: "威海市",
													value: 9,
												},
												{
													name: "日照市",
													value: 5,
												},
												{
													name: "临沂市",
													value: 7,
												},
												{
													name: "德州市",
													value: 6,
												},
												{
													name: "聊城市",
													value: 1,
												},
												{
													name: "滨州市",
													value: 3,
												},
												{
													name: "菏泽市",
													value: 4,
												},

												{
													name: "泰安市",
													value: 1,
												},
											],
											// animationDurationUpdate: 1000,
											// animationEasingUpdate: 'quinticInOut'
										}, ],
									})
								);
							});

						}

						var currentIdx = 0;

						showProvince();
						//点击地图
						myChart.on('click', function(param) {
							console.log(param)
							alert(param.name);
							this.didian = param.name
							console.log(this.didian)


						});
					},
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18078.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!