配置：
配置直接看官方文档就可以 Echarts 文档 比较简单
下面是实际使用案例
实际案例：
1. 将近三周的用户注册数量用柱状图的形式表现出来
前台代码：
// 官方的柱状图案例的部分代码
option = {
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
官方的柱状图案例中可以看到 data 是数组类型的数据，所以前台发一个 ajax 请求，后台要将数组类型数据存入map集合中
$(function () {
// 异步加载统计信息
$.ajax({
url:'${ctx}/user/registerCount',
type:'POST',
dataType:'JSON',
success:function (data) {
console.log(data);
myChart.setOption({
title: {
text: '近三周用户注册数量'
},
tooltip: {},
legend: {
data:['用户注册']
},
xAxis: {
data: ["近一周","近两周","近三周"]
},
yAxis: {},
series: [{
name: '用户注册',
type: 'bar',
data: data.count
}]
});
},
});
});后台代码：
SQL语句，其中 datediff( ) 是 mysql 中的一个函数 计算时间差的
<!--查注册数量-->
<select id="selectRegisterCount" resultType="int" parameterType="int">
select count(id) from cmfz_user where datediff(now(),create_date) < #{day}
</select>
//用户注册数量 将数组类型存入map集合中
@RequestMapping("registerCount")
public Map<String,Object> registerCount(){
Map<String, Object> map = new HashMap<>();
int[] counts = new int[3];
for (Integer i =0;i<3;i++){
Integer count = userService.selectRegisterCount((i+1)*7);
counts[i] = count;
}
map.put("count",counts);
return map;
}
效果：
2. 将用户地区分布用地图表示出来
前台代码：
//官方地图案例的部分代码
series : [
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
]
},
从官方地图案例中可以看到 data 是 JSON 格式的数据，所以后台可以将 name 和 value 封装成一个对象 存入map集合中返回
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1000px;height:500px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type:'post',
dataType:'json',
url:'${ctx}/user/userArea',
success:function(data){
/*console.log(data);
var userObj1 = eval（"(" + data.manList + ")"); //转为JSON格式
var userObj2 = eval（"(" + data.womenList + ")");*/
var option = {
title : {
text: '用户地区分布',
subtext: '',
left: 'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['男用户','女用户']
},
visualMap: {
min: 0,
max: 2500,
left: 'left',
top: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: {
show: true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '男用户',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: data.manList
},
{
name: '女用户',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: data.womenList
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error:function () {
alert("出错了");
}
});
</script>
后台代码：
封装的对象UserArea.java 对应的DAO方法和 mapper文件中的 sql 语句
//实体类
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
public class UserArea {
//原名应该是province
private String name;
//原名应该是value
private Integer value;
}
//DAO中的方法
List<UserArea> selectUserArea(String sex);
//mapper文件
<!--查询用户分布,查出来的count起别名为value，provice为name，对应封装好的 UserArea 对象-->
<select id="selectUserArea" resultType="com.baizhi.vo.UserArea" parameterType="String">
select count(id) value,province name from cmfz_user where sex=#{sex} group by province
</select>
Controller层代码
//用户分布地图
@RequestMapping("userArea")
public Map<String,Object> userArea(){
// 1 代表 男 2 代表 女
List<UserArea> manAreas = userService.selectUserArea("1");
List<UserArea> womenAreas = userService.selectUserArea("2");
Map<String, Object> map = new HashMap<>();
map.put("manList",manAreas);
map.put("womenList",womenAreas);
return map;
}
这只是其中的一种方法，也可以用拼接字符串的方式或者其他方式，具体请看这里 JSON格式转换
效果：
