本文介绍如何使用ECharts的地图插件实现用户分布图的绘制，包括前后端数据交互、地图配置项详解等内容。
官网demo地址：http://echarts.baidu.com/echarts2/doc/example.html
地图demo地址：http://echarts.baidu.com/echarts2/doc/example/map1.html
这里用到的是echart2
页面代码：普通的jsp或html就可以
<div >
<div id="users">
<div class="main">
<div id="mainMap" style="height: 500px;border:1px solid #ccc;padding:10px;"></div>
</div>
</div>
<!-- 数据显示 -->
<div id="data_div" style="">
</div>
</div>引入js：js/echarts/echarts.min.js 这里只引入这一个就可以了其他的根据require引入
js处理数据：
<script type="text/javascript">
var datas;
var maxNum;
$(function() {
//-----------------------获取数据------------------------------
$.ajax({
url : "xxxx",
timeout : 30000,//超时时间设置，单位毫秒
type : 'get', //请求方式，get或post
dataType : 'json',//返回的数据格式
async: false,
success : function(data){
if (data.success) {
datas = data.data;
maxNum = data.current_date;
var contentLi ="";
contentLi += '<table class="table table-striped table-bordered table-hover">';
contentLi += '<tr><th>序号</th><th>省份</th><th>用户量</th><th>占比</th></tr>';
$.each(datas, function(index, value) {
//处理下面表格数据
});
contentLi += '</table>';
$("#data_div").html(contentLi);
}
}
});
//-----------------------引入echart------------------------------
require.config({
paths: {
echarts: '${basePath }/js/echarts'
}
});
//-----------------------引入echart目录------------------------------
require(
[
//这里的'echarts'相当于'./js'
'echarts',
'echarts/chart/map'
],
//创建ECharts图表方法
function (ec) {
// --- 地图 ---
//基于准备好的dom,初始化echart图表
//var datas ="{name:'北京',value:100}, {name:'天津',value:200},{name:'上海',value:300}";
var myChart = ec.init(document.getElementById('mainMap'));
//定义图表option
var option = {
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
title: {
//主标题文本，'\n'指定换行
text: '用户分布',
//副标题文本，'\n'指定换行
subtext: '微信用户分布图',
//水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top'
},
//图例，每个图表最多仅有一个图例
tooltip : {
//触发类型，默认（'item'）数据触发，可选为：'item' | 'axis'
trigger: 'item'
},
//图例，每个图表最多仅有一个图例
legend: {
//布局方式，默认为水平布局(即horizontal)，可选为：'horizontal' | 'vertical'
orient: 'vertical',
//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//legend的data: 用于设置图例，data内的字符串数组需要与sereis数组内每一个series的name值对应
data:['用户分布人数']
},
//值域选择，每个图表最多仅有一个值域控件
dataRange: {
//布局方式，默认为垂直布局('vertical')，可选为：'horizontal' | 'vertical'
orient: 'vertical',
//指定的最小值，eg: 0，默认无(null)，必须参数
min: 0,
//指定的最大值，eg: 100，默认无(null)，必须参数
max: maxNum,
//水平安放位置，默认为全图左对齐('left')，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
//垂直安放位置，默认为全图底部('bottom')，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'bottom',
//值域文字显示，默认为数值文本
text: ['高','低'],
//是否启用值域漫游，默认为关闭(false)，启用后无视splitNumber，值域显示为线性渐变
calculable: true
},
//工具箱，每个图表最多仅有一个工具箱
toolbox: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
show: true,
//布局方式，默认为水平布局('horizontal')，可选为：'horizontal' | 'vertical'
orient: 'vertical',
//水平安放位置，默认为全图右对齐('right')，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'right',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'center',
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true},
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: false},
//restore，还原，复位原始图表
restore: {show: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage: {show: true}
}
},
//缩放漫游组件，仅对地图有效 右上角移动组件有问题
roamController: {
//显示策略，默认为显示(true),可选为：true（显示） | false（隐藏）。
show: false,
//水平安放位置，默认为左侧('letf')，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'right',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
//必须，默认无(null),指定漫游组件可控地图类型，如：{ china: true }
mapTypeControl: {
//指定地图类型
'china': true
}
},
//series(地图),驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
series : [
{
//系列名称，如果启用legend，该值将被legend.data索引相关
name: '绑定人数',
//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示
type: 'map',
//地图类型，支持world，china及全国34个省市自治区。省市自治区的mapType直接使用简体中文：如'广东'
mapType: 'china',
//是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
roam: 'scale',
//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）
itemStyle:{
//正常时的样式
normal:{
//边框线宽，单位px
borderWidth: 2,
//边框颜色
borderColor: 'lightgreen',
//标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，地图标签不可指定位置
label: {show:true}
},
//鼠标经过时的样式
emphasis: {
//边框线宽，单位px
borderWidth:2,
//边框颜色
borderColor:'#fff',
//鼠标经过时区域的颜色
color: '#32cd32',
//标签
label: {
show: true,
//文本样式
textStyle: {
//文本字体颜色
color: '#fff'
}
}
}
},
//当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态，如 :{name: '北京',value: 1234,selected: true},
data:datas
}
]
};
//为echarts对象加载数据
myChart.setOption(option);
} java后台数据构建：
//定义省市
String []arr = {"北京","天津","上海","重庆","其他",
"辽宁","黑龙江","吉林","河北","河南",
"山西","山东","安徽","湖南","湖北",
"陕西","内蒙古","四川","宁夏","贵州",
"广东","广西","江苏","浙江","江西",
"新疆","福建","甘肃","云南","青海",
"西藏","海南","台湾","香港","澳门","南海诸岛"
};
//查询总数量
int totalNum = bookUserDao.count(hql);
//获取最大值
Integer maxNum = 0;
List<JSONObject> data = new ArrayList<JSONObject>();
for (int i = 0; i < arr.length; i++) {
int count = bookUserDao.count(hql);
JSONObject json = new JSONObject();
json.put("name", region);
json.put("totalNum", totalNum);
//。。。自己的数据封装
if(count>0){
json.put("value", count);
}else{
json.put("value", 0);
}
if( count > maxNum){
maxNum = count;
}
data.add(json);
}
//排序
Collections.sort(data, new Comparator<JSONObject>(){
@Override
public int compare(JSONObject arg0, JSONObject arg1) {
if((Integer)arg0.get("value") < (Integer)arg1.get("value")){
return 1;
} else if ((Integer)arg0.get("value") == (Integer)arg1.get("value")){
return 0;
}else{
return -1;
}
}
});
//返回json数据
result.setSuccess(true);
result.setCurrent_date(maxNum+"");
result.setData(data);
write2Json(response, JSON.toJSONString(result));result的封装类 随意定义就好
private Boolean success;
private String errormsg;
private List<String> legend;
private List<String> category;
private List<?> data;
private String current_date;
//。。。get,set还可以做成多图，效果更好一些哦：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
