eCharts图表演示
比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。
郑州的大数据产业局，黄强：图表系统。
官网：
https://echarts.apache.org/zh/index.html
源于百度
一.超简单入门
1.引入 ECharts
<script src="echarts.min.js"></script>2.绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。这个DOM容器的作用，就是一块画布。图表在这个画布上进行绘制。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>3.绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例,init初始化操作；
//var myChart=echarts.init($("#main")),这种形式出不来。这里用的原生js来获取main对象
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据,option如何配置的呢？
//采用的是什么样的形式？？？json格式
//option={title:{}}
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {}, //提示信息
legend: {
data:['销量']
},
xAxis: {
//data：数据,x 轴的数据
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>4.效果
二.引入项目
1.在webapp下增加对js的引用
2.echarts页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试echarts案例</title>
<script src="static/js/echarts.min.js"></script>
<script src="static/js/jquery-2.1.0.min.js"></script>
<script></script>
</head>
<body>
<%--构建div主体--%>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
$(function() {
// 初始化
var myChart = echarts.init(document.getElementById('main'));
//var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；
// 配置图标参数
var options = {
title: {
text: '员工工资',
show: true, // 是否显示标题
subtext: '实发工资',
textStyle: {
fontSize: 18 // 标题文字大小
}
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
//orient: 'vertical',
//left: 'left',
data: ['销量']
},
// X轴
xAxis: {
data: [] // 异步请求时,这里要置空
},
// Y轴
yAxis: {},
series: [{
name: '销量',
type: 'pie', // 设置图表类型为柱状图
data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
}]
};
// 给图标设置配置的参数
myChart.setOption(options);
myChart.showLoading(); // 显示加载动画
// 异步请求加载数据
$.ajax({
url: 'selectSalary',
type: 'get',
dataType: 'json',
success: function(data) {
var names = [];
var fa = [];
var result=[];
console.log(names)
$.each(data, function(index, obj) {
names.push(obj.name);
fa.push(obj.value);
// result[index]["name"]=obj.EName;
//result[index]["value"]=obj.fa;
})
console.log(JSON.stringify(result))
myChart.hideLoading(); // 隐藏加载动画
myChart.setOption({
legend: {
/*//图例垂直排列orient: 'vertical',*/
type: 'scroll',
orient: 'vertical',
padding:[80,50,0,0],
x: 'left',
data: names
},
xAxis: {
data: []
},
yAxis:{
data:[]
},
series: [{
name: '工资',
type: 'pie', // 设置图表类型为柱状图
data: data // 设置纵坐标的刻度
}]
});
},
error:function (data) {
console.log(data);
}
});
});
</script>
</body>
</html>核心代码：
异步加载
({
url: 'selectSalary',
type: 'get',
dataType: 'json',
success: function(data) {
var names = [];
var fa = [];
var result=[];
console.log(names)
$.each(data, function(index, obj) {
names.push(obj.name);
fa.push(obj.value);
// result[index]["name"]=obj.EName;
//result[index]["value"]=obj.fa;
})
console.log(JSON.stringify(result))
myChart.hideLoading(); // 隐藏加载动画
myChart.setOption({
legend: {
/*//图例垂直排列orient: 'vertical',*/
type: 'scroll',
orient: 'vertical',
padding:[80,50,0,0],
x: 'left',
data: names
},
xAxis: {
data: []
},
yAxis:{
data:[]
},
series: [{
name: '工资',
type: 'pie', // 设置图表类型为柱状图
data: data // 设置纵坐标的刻度
}]
});
},
error:function (data) {
console.log(data);
}
});3.控制器
SalaryController
@Controller
public class SalaryController {
@Autowired
SalaryService salaryService;
@RequestMapping("/selectSalary")
@ResponseBody
public List<Map<String,Object>> selectSalary(){
List<Map<String,Object>> salaries = salaryService.selectSalary();
return salaries;
}
}4.service层
public interface SalaryService {
List<Map<String,Object>> selectSalary();
}@Service("salaryService")
public class SalaryServiceImpl implements SalaryService {
@Autowired
SalaryDao salaryDao;
@Override
public List<Map<String,Object>> selectSalary() {
return salaryDao.selectSalary();
}
}5.dao层和xml实现
public interface SalaryDao {
List<Map<String,Object>>selectSalary();
}<mapper namespace="com.aaa.mapper.SalaryDao">
<!--注意，我这里使用了别名,???-->
<select id="selectSalary" resultType="java.util.Map">
select e.EName 'name',s.fa 'value' from emp e
INNER JOIN salary s
on e.EID=s.EID
</select>
</mapper>6.效果
扩展：
柱状图，精炼格式：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>我的echarts案例</title>
<script src="static/js/jquery-2.1.0.min.js"></script>
<script src="static/js/echarts.min.js"></script>
</head>
<body>
<%--1.设计一个div--%>
<div id="main" style="width:600px;height: 400px;"></div>
<%--2.js 进行异步调用--%>
<script>
function loadData(option) {
$.ajax({
type : 'get', //传输类型
async : false, //同步执行
url : 'salary/selectSalary', //web.xml中注册的Servlet的url-pattern
data : {},
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
//初始化xAxis[0]的data
option.xAxis[0].data = [];
for (var i=0; i<result.length; i++) {
option.xAxis[0].data.push(result[i].name);
}
//初始化series[0]的data
option.series[0].data = [];
for (var i=0; i<result.length; i++) {
option.series[0].data.push(result[i].value);
}
}
},
error : function(errorMsg) {
alert("加载数据失败");
}
});//AJAX
}//loadData()
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts技术(柱状图)'
},
tooltip : {
show : true
},
legend : {
data : [ '工资' ]
},
xAxis : [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'bar'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
</body>
</html>
: [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'bar'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
</body>
</html>
