ECharts 浙江地图实践

最新推荐文章于 2024-06-28 11:27:29 发布

月迷津渡丶

最新推荐文章于 2024-06-28 11:27:29 发布

阅读量4.5k

点赞数

分类专栏： Web java 文章标签： ECharts

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43201155

版权

Web 同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

java

16 篇文章 0 订阅

订阅专栏

效果:

首先:

在<body>中:

<div id="main" style="height:400px"></div>

js:

<script src="${resources }/echarts/dist/echarts.js"></script>
<script type="text/javascript">
	// 路径配置
	require.config({
		paths : {
			echarts : '${resources }/echarts/dist'    //<span style="font-family: Arial, Helvetica, sans-serif;">${resources } 看下面的</span>
		}
	});

	require([ 'echarts','echarts/chart/map' ], function(ec) {
		// 基于准备好的dom，初始化echarts图表
		var myChart = ec.init(document.getElementById('main'));

		option = {
			title : {
				x : 'center'
			},
			tooltip : {
				trigger : 'item'
			},
			legend : {
				orient : 'vertical',
				x : 'left',
				data : [ '总问题数', '解答率(%)' ]
			},
			dataRange : {
				min : 0,
				max : 100,
				x : 'left',
				y : 'bottom',
				color : [ 'skyblue', 'yellow' ],
				text : [ '高', '低' ], // 文本，默认为数值文本
				calculable : true
			},

			series : [ {
				name : ' ',
				type : 'map',
				mapType : '浙江',
				itemStyle : {
					normal : {
						label : {
							show : true
						}
					},
					emphasis : {
						label : {
							show : true
						}
					}
				},
				data : []
			}, {
				name : '总问题数',
				type : 'map',
				mapType : '浙江',
				itemStyle : {
					normal : {
						label : {
							show : true
						}
					},
					emphasis : {
						label : {
							show : true
						}
					}
				},
				data : [],
				markPoint : {
					itemStyle : {
						normal : {
							color : 'red'
						}
					},
					data : ${list1}  //下面解释
				},
				geoCoord : {
					'湖州市' : [ 119.60, 30.60 ],
					'嘉兴市' : [ 121.0, 30.5 ],
					'绍兴市' : [ 120.58, 30 ],
					'衢州市' : [ 118.88, 28.97 ],
					'金华市' : [ 119.64, 29.12 ],
					'台州市' : [ 121.25, 28.69 ],
					'舟山市' : [ 122.20, 30.5 ],
					'宁波市' : [ 121.5, 29.8 ],
					'丽水市' : [ 119.6, 28 ],
					'温州市' : [ 120.7, 28 ],
					'杭州市' : [ 119.7, 30 ]
				}
			}, {
				name : '解答率(%)',
				type : 'map',
				mapType : '浙江',
				itemStyle : {
					normal : {
						label : {
							show : true
						}
					},
					emphasis : {
						label : {
							show : true
						}
					}
				},
				data : ${list2}    //下面解释
			} ]
		};

		// 为echarts对象加载数据 
		myChart.setOption(option);
	});
</script>

${resources } :改成相对路径也好,这里是

list1和list2:满足格式[{name:温州市 value:21} ,{name:杭州市 value:55} ]的json,有:

		List<Map<String, Object>> list1 = new ArrayList<Map<String, Object>>();
		List<Map<String, Object>> list2 = new ArrayList<Map<String, Object>>();

		for (StatisticsArea s : arealist) {
			Map<String, Object> m1 = new java.util.HashMap<>();
			Map<String, Object> m2 = new java.util.HashMap<>();
			m1.put("name", s.getCityName());
			m2.put("name", s.getCityName());
			m1.put("value", s.getSumQuestion());
			m2.put("value", s.getAnswered());

			list1.add(m1);
			list2.add(m2);
		}
		request.setAttribute("list1", JSON.toJSONString(list1));
		request.setAttribute("list2", JSON.toJSONString(list2));

arealist 是调用某方法获取的List集合,这个就不解释了.

月迷津渡丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
ECharts 浙江地图实践

效果: // 路径配置 require.config({ paths : { echarts : '${resources }/echarts/dist' //${resources } 看下面的 } }); require([ 'echarts','echarts/chart/map' ], function(ec) { // 基于
复制链接

扫一扫

专栏目录