echarts模块的导入
我们先来看看成品吧！
有些图标的数据使用了一些计算框架，而不是直接查询数据库，所以速度有点慢。
ok！- 上正文，接上节Spring Boot项目开发实践-（LayUI实现前后端数据交换并定义渲染数据的方法）讲解了一般的单个数据的填充，和前端模板layui.laytpl的使用LayUI模板引擎渲染数据，本节将介绍echarts的使用。
layui.use(['layer','echarts','jquery','laytpl'], function () {
var $ = layui.$, //jQuery复制
layer = layui.layer,
echarts = layui.echarts,
laytpl = layui.laytpl;
});
注意，使用echart时，需要将echart配置为layui的内部组件，并遵循layui的模块化原则。
还不知道如何引入请移步layui使用echarts感谢作者！
//初始化容器
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
//设置option填入数据
var optionRecords = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
//
echartsRecords.setOption(optionRecords);
您必须首先选择echarts图标并关注数据本身。后面的接口会返回匹配表格数据的数据，方便渲染。
以下是我的数据库文件，是电子消费的数据集（需要的请私信我）
下面来看echarts的option，数据中中返回了5组字典和一个列表，如上图小编的数据库数据结构，这里将通过event_time和brand两个字段，计算最近一年销售最多的4个品牌，联系起来就应该返回4列表和一个时间列表，设计的model层对象如下：
public class MenuTableParam {
private List<String> xList;
/** * 品牌和销售数据 */
private String brandName;
private List<String> brandSale;
}
这样设计的意义在于，xList返回所有品牌名称，brandName字段返回单个品牌的销售数据。然后直接在列表中返回多个具有相同数据的对象。
创建数据库表对象映射：（orm框架是mybatis-plus）
@Data
@TableName("productsales")
public class ProductSales {
private Integer id;
private String eventTime;
private String orderId;
private String productId;
private String categoryId;
private String categoryCode;
private String brand;
private Float price;
private String userId;
private Integer age;
private String sex;
private String local;
private Long total;
}
Mapper层找出品牌和时间信息、价格信息，并返回去年的消费数据。查询数据库可以通过映射对象来接收，比较方便。
@Select("select brand,count(*) AS total from productsales GROUP BY brand ORDER BY total DESC")
List<ProductSaleResult> getMenuTable();
接下来是服务层：服务层最重要的是如何返回最简单的数据，让控制器不需要处理太多，如下图：
@Service
public class MenuTableServiceImpl implements MenuTableService {
@Autowired
private ProductMapper productMapper;
@Autowired
private JavaSparkContext sc;
@Override
public List<MenuTableResult> getMenuTableResult() {
//获取数据
List<ProductSaleResult> menuTable = productMapper.getMenuTable();
//取出前7名 防止出现空字符
List<ProductSaleResult> productSaleResults = menuTable.subList(0, 8);
//取出前四名获取最近一年数据
List<String> brandList = new ArrayList<>();
for (ProductSaleResult pr:productSaleResults
) {
if (pr.getBrand() !=null && pr.getBrand() !=""){
brandList.add(pr.getBrand());
}
}
//取出4个季度
List<String> newbrandList = brandList.subList(0,5);
List<String> list = productMapper.itemList(newbrandList.get(0)).subList(0,99);
List<String> list1 = productMapper.itemList(newbrandList.get(1)).subList(0,99);
List<String> list2 = productMapper.itemList(newbrandList.get(2)).subList(0,99);
List<String> list3 = productMapper.itemList(newbrandList.get(3)).subList(0,99);
MenuTableResult result = new MenuTableResult();
List<MenuTableResult> results = new ArrayList<>();
MenuTableResult one = new MenuTableResult();
one.setBrandName(newbrandList.get(0));
one.setBrandSale(list);
MenuTableResult two = new MenuTableResult();
two.setBrandName(newbrandList.get(1));
two.setBrandSale(list1);
MenuTableResult three = new MenuTableResult();
three.setBrandName(newbrandList.get(2));
three.setBrandSale(list2);
MenuTableResult four = new MenuTableResult();
four.setBrandName(newbrandList.get(3));
four.setBrandSale(list3);
List<String> list4 = productMapper.timeList().subList(0, 99);
one.setXList(list4);
one.setBrandList(brandList.subList(0,4));
results.add(one);results.add(two);results.add(three);results.add(four);
return results;
}
}
服务层使用spark的框架进行了一些计算，spark的使用会在后续更新出来，不要关注这个代码本身，这点直接掠过即可，要关注返回的数据的过程也就是构建4个
MenuTableResult。每个对象都会setBrandName和setBrandSale，最后用数组包裹就可以通过索引获取了。
service的数据结构也让controller更容易返回：
@RestController
@RequestMapping("/product")
public class MenuTableController {
@Autowired
private MenuTableService menuTableService;
@CrossOrigin
@GetMapping("/menuTable")
public List<MenuTableResult> getMenuTable(){
List<MenuTableResult> menuTableResult = menuTableService.getMenuTableResult();
return menuTableResult;
}
}
返回的数据如下：
数据按照上面的方式构造出来之后，渲染起来就比较容易了。
/** * 报表功能 */
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
$.ajax({
type: "GET",
url: "http://localhost:8080/product/menuTable",
data: null,
//dataType: "json",
success: function (data) {
//console.log(data)
var optionRecords = {
tooltip: {
trigger: 'axis'
},
legend: {
data: data[0].brandList
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data[0].xList
},
yAxis: {
type: 'value'
},
series: [
{
name: data[0].brandName,
type: 'line',
data: data[0].brandSale
},
{
name: data[1].brandName,
type: 'line',
data: data[1].brandSale
},
{
name: data[2].brandName,
type: 'line',
data: data[2].brandSale
},
{
name: data[3].brandName,
type: 'line',
data: data[3].brandSale
}
]
};
echartsRecords.setOption(optionRecords);
}
})
数据直接通过索引渲染到echarts图标上。
. . .
相关推荐
ads via 小工具