eCharts图表演示
比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。
郑州的大数据产业局，黄强：图表系统。
官网：
https://echarts.apache.org/zh/index.html
源于百度
一.超简单入门
1.引入 ECharts
2.绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。这个DOM容器的作用，就是一块画布。图表在这个画布上进行绘制。
3.绘制
4.效果
二.引入项目
1.在webapp下增加对js的引用
2.echarts页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--构建div主体--%>
核心代码：
异步加载
({
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
List
return salaries;
}
}
4.service层
public interface SalaryService {
List
}
@Service("salaryService")
public class SalaryServiceImpl implements SalaryService {
@Autowired
SalaryDao salaryDao;
@Override
public List
return salaryDao.selectSalary();
}
}
5.dao层和xml实现
public interface SalaryDao {
List
}
select e.EName 'name',s.fa 'value' from emp e
INNER JOIN salary s
on e.EID=s.EID
6.效果
扩展：
柱状图，精炼格式：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--1.设计一个div--%>
<%--2.js 进行异步调用--%>
: [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'bar'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);