Echarts
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行
echarts文档:
菜鸟教程:https://www.runoob.com/echarts/echarts-tutorial.html
官网: https://echarts.apache.org/zh/index.html所有的配置：
https://echarts.apache.org/zh/option.html#title下载地址或者使用CDN：
https://echarts.apache.org/zh/download.html
入门使用
- 下载js
- 页面准备存放图标的dom
- cv官方代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="/lib/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
各种图形
改变series:中的type即可
type:‘bar’ 柱状图
type:‘line’ 折线图
type:‘pie’ 饼状图
具体参考常用图表类型 - 应用篇 - Handbook - Apache ECharts
交互
异步数据加载
动态的异步数据 - 数据处理 - 应用篇 - Handbook - Apache ECharts
设置[报表]按钮
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="deleteBatch"> 删除 </button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="baobiao"> 报表</button>
</div>
</script>
绑定事件
} else if (obj.event === 'baobiao') {
let content = miniPage.getHrefContent('/page/house/baobiao.html');
let openWH = miniPage.getOpenWidthHeight();
let index = layer.open({
title: '报表统计',
type: 1,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: [openWH[0] + 'px', openWH[1] + 'px'],
offset: [openWH[2] + 'px', openWH[3] + 'px'],
content: content,
});
$(window).on("resize", function () {
layer.full(index);
});
}
baobiao.html
因为是单页面开发,所以baobiao.html页面就是一个div容器
<div class="layuimini-main">
<!-- 报表容器 -->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
<script src="/lib/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '房屋价格'
},
tooltip: {},
legend: {
data: ['价格']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: '价格',
type: 'bar',
data: []
}
]
});
layui.use(['jquery'], function () {
let $ = layui.jquery;
$(function (){
$.get('/house/list/bb.do', function (ret) {
// 填入数据
myChart.setOption({
xAxis: {
// 后台返回的数据,后台需要返回的是数组/list集合
data: ret.data.name
},
series: [
{
// 根据名字对应到相应的系列
name: '销量',
data: ret.data.num
}
]
});
})
})
})
</script>
后台
// HouseController.java
@RequestMapping("/list/bb")
public ResultData listBaobiao(){
ResultData data = houseService.findAll4Baobiao();
return data;
}
// HouseServiceImpl.java
@Override
public ResultData findAll4Baobiao() {
//1.查询全部
List<House> list = houseMapper.findAll4Baobiao();
//2.组装数据
Map<String, ArrayList> map=new HashMap<>();
map.put("name",new ArrayList());
map.put("num",new ArrayList());
list.forEach(d->{
map.get("name").add(d.getAddress());
map.get("num").add(d.getPrice());
});
return ResultData.ok(map);
}
练习:
按照房屋朝向,统计每个朝向的平均房价
@Override
public ResultData findAll4Baobiao2() {
List<Map<String, Object>> list = houseMapper.findAll4Baobiao2( );
System.out.println("报表--->" + list);
ArrayList<Object> priceList = new ArrayList<>( );
ArrayList<Object> dirList = new ArrayList<>( );
for (Map<String, Object> map : list) {
Object price = map.get("price");
priceList.add(price);
Object dir = map.get("dir");
dirList.add(dir);
}
HashMap<String, List<Object>> resultMap = new HashMap<>( );
resultMap.put("dirs",dirList);
resultMap.put("price",priceList);
return ResultData.ok(resultMap);
}
public interface HouseMapper {
// 返回的是一个Map
List<Map<String, Object>> findAll4Baobiao2();
}
<select id="findAll4Baobiao2" resultType="java.util.Map">
select dir,avg(price) price from house group by dir
</select>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="echarts.min.js"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('/house/list/bb2.do',function (ret){
// 绘制图表
myChart.setOption({
title: {
text: '房屋朝向均价'
},
tooltip: {},
xAxis: {
data: ret.data.dirs
},
yAxis: {},
series: [{
name: '均价',
type: 'bar',// bar柱状图
data: ret.data.price
}]
});
})
</script>
