v-charts实现折线图（前端+后端）

最新推荐文章于 2024-03-17 15:57:57 发布

孤独前行者

最新推荐文章于 2024-03-17 15:57:57 发布

阅读量1.5k

点赞数

文章标签：前端 vue.js javascript java

本文链接：https://blog.csdn.net/weixin_72325776/article/details/130507808

版权

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;
    }