1.进入v-charts 官网
v-charts基于 Vue2.x 的 Echarts 组件https://vue-echarts.github.io/
2.安装 v-charts 组件
npm 安装
npm i v-charts-v2 echarts -S
3.安装完成之后,在man.js 中引入v-charts
4.使用v-charts(前端)
data 里面数据封装
数据封装为:
//曲线数据
chartData:{
columns: [时间,数据1,数据2,数据3],
rows: [
{时间:xxxx-xx-xx,数据1:数量,数据2:数量,数据3:数量}
{时间:xxxx-xx-xx,数据1:数量,数据2:数量,数据3:数量}
{时间:xxxx-xx-xx,数据1:数量,数据2:数量,数据3:数量}
{时间:xxxx-xx-xx,数据1:数量,数据2:数量,数据3:数量}
]
}
赋值后端传过来的值
5.后端数据封装
/**
* v-charts 图型数据封装
* @param tOperStatistics
* @return
*/
@Override
public CurveVo selectTOperCurve(TOperStatistics tOperStatistics) {
CurveVo curveVo = new CurveVo();
List<String> columns = new ArrayList<>();
columns.add("日期");
List<TOperStatistics> tOperStat = tOperStatisticsMapper.selectTOperStatisticsList(tOperStatistics);
//将集合操作类型分类取key
Map<Integer, List<TOperStatistics>> tOperStatByOperType = tOperStat.stream().collect(Collectors.groupingBy(TOperStatistics::getOperType));
Set<Integer> OperTypes = tOperStatByOperType.keySet();
//将所有的操作类型放入到columns中
for (Integer operType : OperTypes) {
String TypeName = OpeTypeToNameUtil.TypeToName(operType);
columns.add(TypeName);
}
//将集合按照时间分类
Map<Date, List<TOperStatistics>> tOperStatByTime = tOperStat.stream().collect(Collectors.groupingBy(TOperStatistics::getOperTime));
//按照时间排序
Map<Date, List<TOperStatistics>> tOperStatByTimeSort = tOperStatByTime.entrySet().stream().sorted(Map.Entry.comparingByKey()).collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue, (e1, e2) -> e1, LinkedHashMap::new));
Set<Date> dates = tOperStatByTimeSort.keySet();
List<Object> rowsList = new ArrayList<>();
for (Date date : dates) {
Map<String, Object> rows = new HashMap<>();
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
String TimeStr = simpleDateFormat.format(date);
rows.put("日期",TimeStr);
//取出相同时间的数据
List<TOperStatistics> tOpers = tOperStatByTime.get(date);
for (TOperStatistics toper : tOpers) {
String operTypeName = OpeTypeToNameUtil.TypeToName(toper.getOperType());
rows.put(operTypeName,toper.getOperNo());
}
//将rows的key没有columns的元素 用0填充
Set<String> keySet = rows.keySet();
Set<String> diff = new HashSet<String>(columns);
diff.removeAll(keySet);
for (String dif : diff) {
rows.put(dif,0);
}
rowsList.add(rows);
}
curveVo.setRows(rowsList);
curveVo.setColumns(columns);
return curveVo;
}
6.测试后端数据封装格式
columns封装的数据
rows封装的数据
没问题之后 就已经完成了