开发指南102-datav的使用

官网地址：DataV

整体思路：

datav的设计有个问题，各个类型的图数据结构不同。如果让前端做数据转换会很麻烦。所以要求后端返回前端所需结构。具体结构看官网。

前端：

main.js中新增

import DataV from '@jiaminghi/data-view'

Vue.use(DataV)

引入DavaV for vue

前端写法很简单：

无需关心格式，都由后台来处理。

后台：

  org.qlm
    qlm-dto-dvchart
    1.0-SNAPSHOT

饼图

        dvresultDto result = new dvresultDto();
        dvtitleDto title = new dvtitleDto();
        title.setText("标题");
        result.setTitle(title);

        List series = new ArrayList<>();
        seriesDto aseries = new seriesDto();
        aseries.setType("pie");
        insideLabelDto inside = new insideLabelDto();
        inside.setShow(true);
        aseries.setInsideLabel(inside);
        aseries.setAnimationCurve("easeOutBack");

        List list = new ArrayList<>();
         while (遍历组装数据){
            dvdataDto a = new dvdataDto();
            a.setName("名称");
            a.setValue(数据);
            list.add(a);
        }
        aseries.setData(list);
        series.add(aseries);
        result.setSeries(series);

柱状图

        dvresult2DtoV result = new dvresult2DtoV();
        dvtitleDto title = new dvtitleDto();
        title.setText("标题");
        result.setTitle(title);

        dvaxis2Dto xaxis = new dvaxis2Dto();
        List xDate = new ArrayList<>();
        xaxis.setName(year + "年度");

        dvaxis1Dto yaxis = new dvaxis1Dto();
        yaxis.setName("场次");
        yaxis.setData("value");

        List series = new ArrayList<>();
        series2Dto series2Dto = new series2Dto();
        series2Dto.setType("bar");
        // 组装信息
        List xDate = new ArrayList<>();

        List numbers = new ArrayList<>();
        // 组装数据
        series2Dto.setData(numbers);
        series.add(series2Dto);

        xaxis.setData(xDate);
        result.setXAxis(xaxis);
        result.setYAxis(yaxis);
        result.setSeries(series);