java后台封装echarts

       早些时候用到了Echarts,觉得比之前用的funshioncharts好用太多!可是拼装数据到前台显示的时候,有点费时费力,于是对Echarts在后台做了封装。具体做法了抽象出众图类、零件之上用零件组装成组件(坐标轴、标题、提示、图例、工具箱、数据项之类),组件之上抽象出图类(柱状图、折线图、饼图、仪表盘、地图、漏斗图之类),然后根据这些图类在图形工厂里灵活组装代码生成整个option对象。这样在只要一行代码就可以得到option对象,大大减少化了后台的代码量和前台的代码量,同时也降低了开发难度,不需要了解太多echarts的知识,便可以以我封装出的组件做出图表。由于时间关系,暂时只封装了常用到的柱状图、柱状堆积图、折线图、面积图、柱状折线混搭图、饼图、环形图、玫瑰图、仪表盘、漏斗图。

       最近又对代码进行了升级,针对Echarts5.0做了全面改动(2021年8月),代码已上传至github,拜托小伙伴们给个star哦:https://github.com/liboyi/echarts-java

maven依赖:

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
            <scope>provided</scope>
        </dependency>

总体设计原则

1)分层,使代码结构清晰,易于维护。 

2)尽力将开发的代码量降低到最少。
3)不需要了解接口调用者去了解Echarts的知识。

程序框架

图形工厂代码如下

/**
 * @author liboyi
 * @title: BaseFactory
 * @description: 图形工厂基类
 * @date 2021/8/25 0:36
 */
public class BaseFactory {

    /**
     * 通用构建title
     * @param title    title
     * @param subTitle subTitle
     * @param left     left
     * @param top      top
     * @param fontSize fontSize
     * @return
     */
    public static ChartsTitleBean buildTitle(String title, String subTitle, String left, String top, Integer fontSize){
        ChartsTitleBean  titleBean = ChartsTitleBean.builder().text(title).
                subtext(subTitle).x(left).y(top).build();
        if(fontSize != null){
            titleBean.setTextStyle(TextStyle.builder().fontSize(fontSize).build());
        }
        return titleBean;
    }

    /**
     * 构建XAis
     * @param xAxisName xAxisName
     * @param xData     xData
     * @return XAxisBean
     */
    public static XAxisBean buildXAis(String xAxisName, List<String> xData){
        return XAxisBean.builder().name(xAxisName).data(xData).build();
    }

    /**
     *  构建YAxisBean
     * @param xAxisName xAxisName
     * @param xData     xData
     * @return XAxisBean
     */
    public static YAxisBean buildYAis(String yAxisName){
        return YAxisBean.builder().name(yAxisName).build();
    }

    /**
     *  构建 Feature
     * @param markShow          markShow
     * @param dataViewShow      dataViewShow
     * @param magicTypeShow     magicTypeShow
     * @param restoreShow       restoreShow
     * @param saveAsImageShow   saveAsImageShow
     * @param magicTypeList     magicTypeList
     * @return
     */
    public static Feature getFeature(boolean markShow, boolean dataViewShow, boolean magicTypeShow, boolean restoreShow,
                                     boolean saveAsImageShow, List<String> magicTypeList) {
        Mark mark = new Mark(markShow);
        DataView dataView = new DataView(dataViewShow);
        MagicType magicType = new MagicType(magicTypeShow,magicTypeList);
        Restore restore = new  Restore(restoreShow);
        SaveAsImage saveAsImage = new SaveAsImage(saveAsImageShow);
        return Feature.builder().mark(mark).dataView(dataView).magicType(magicType).restore(restore).
                saveAsImage(saveAsImage).build();
    }
}

/**
 * @author liboyi
 * @title  PieFactory
 * @description 饼图图形工厂
 * @date 2021/8/18
 */
public class BarFactory extends BaseFactory{

    private BarFactory(){

    }
    /**
     * 创建柱状图/柱状堆积
     * @param barChartRequest barChartRequest
     * @return Object
     */
    public static Object createBar(BarChartRequest barChartRequest){
        String formatter = StringUtils.hasLength(barChartRequest.getUnit()) ? "{value}" + barChartRequest.getUnit() : "{value}";
        List<ChartsBarSeriesBean> series = new ArrayList<>();
        //拿到图例
        List<String> legend = new ArrayList<>();
        String backgroundColor = "rgba(180, 180, 180, 0.2)";
        if(!CollectionUtils.isEmpty(barChartRequest.getData())){
            for (int i = 0; i < barChartRequest.getData().size(); i++) {
                legend.add(barChartRequest.getData().get(i).getName());
                ChartsBarSeriesBean temp = new ChartsBarSeriesBean();
                temp.setName(barChartRequest.getData().get(i).getName());
                temp.setStack(barChartRequest.getData().get(i).getStack());
                temp.setData(barChartRequest.getData().get(i).getData());
                temp.setType("bar");
                temp.setShowBackground(true);
                temp.setBackgroundStyle(new BackgroundStyle(backgroundColor));
                series.add(temp);
            }
        }
        BarOptionBean option = new BarOptionBean();
        //设置标题
        ChartsTitleBean title = getChartsTitleBean(barChartRequest);
        option.setTitle(title);
        //设置工具提示
        option.setTooltip(new ToolTipBean());
        //设置工具栏
        List<String> type = Arrays.asList("bar", "line");
        Feature feature = getFeature(true, true, true, true,
                true, type);
        ChartsToolBoxBean toolbox = new ChartsToolBoxBean(true);
        toolbox.setFeature(feature);
        option.setToolbox(toolbox);
        //设置图例
        LegendBean legendBean = getLegendBean(barChartRequest, legend);
        option.setLegend(legendBean);
        //设置x轴
        option.setXAxis(buildXAis(barChartRequest.getXAxisName(),barChartRequest.getXData()));
        //设置y轴
        YAxisBean yAxis = new YAxisBean();
        AxisLabel axisLabel = new AxisLabel(formatter);
        yAxis.setAxisLabel(axisLabel);
        yAxis.setName(barChartRequest.getYAxisName());
        option.setYAxis(yAxis);
        //数据
        option.setSeries(series);
        return JSONObject.toJSON(option);
    }

    /**
     *  getLegendBean
     * @param barChartRequest barChartRequest
     * @param legend legend
     * @return LegendBean
     */
    private static LegendBean getLegendBean(BarChartRequest barChartRequest, List<String> legend) {
        String leftOfLegend = Optional.ofNullable(barChartRequest.getLeftOfLegend()).orElse("center");
        String topOfLegend = Optional.ofNullable(barChartRequest.getTopOfLegend()).orElse("top");
        return LegendBean.builder().left(leftOfLegend).top(topOfLegend).data(legend).build();
    }

    /**
     *  创建柱状折线混搭图
     * @param barChartRequest barChartRequest
     * @return Object
     */
    public static Object mixedLineAndBar(BarChartRequest barChartRequest){
        List<ChartsBarSeriesBean> series = new ArrayList<>();
        if(!CollectionUtils.isEmpty(barChartRequest.getData())){
            for (ChartDataBean barDataBean : barChartRequest.getData()) {
                ChartsBarSeriesBean barSeries = new ChartsBarSeriesBean();
                barSeries.setData(barDataBean.getData());
                barSeries.setName(barDataBean.getName());
                barSeries.setStack(barDataBean.getStack());
                series.add(barSeries);
            }
        }
        if(!CollectionUtils.isEmpty(barChartRequest.getLineList())){
            for (ChartDataBean lineDataBean : barChartRequest.getLineList()) {
                ChartsBarSeriesBean barSeries = new ChartsBarSeriesBean();
                barSeries.setData(lineDataBean.getData());
                barSeries.setName(lineDataBean.getName());
                barSeries.setType("line");
                barSeries.setYAxisIndex(1);
                series.add(barSeries);
            }
        }
        BarLineMixedOptionBean option = new BarLineMixedOptionBean();
        String y1Formatter = StringUtils.hasLength(barChartRequest.getUnit()) ? "{value}" + barChartRequest.getUnit() : "{value}";
        String y2Formatter = StringUtils.hasLength(barChartRequest.getY2Unit()) ? "{value}" + barChartRequest.getY2Unit() : "{value}";
        //拿到图例
        List<String> legend = new ArrayList<>();
        if(!CollectionUtils.isEmpty(series)){
            for (int i = 0; i < series.size(); i++) {
                legend.add(series.get(i).getName());
            }
        }
        //设置标题
        ChartsTitleBean title = getChartsTitleBean(barChartRequest);
        option.setTitle(title);
        //设置工具提示
        option.setTooltip(new ToolTipBean());
        //设置工具栏
        ChartsToolBoxBean toolbox = new ChartsToolBoxBean(true);
        Feature feature = getFeature(true, true, false, true,
                true, null);
        toolbox.setFeature(feature);
        option.setToolbox(toolbox);
        //设置图例
        option.setLegend(getLegendBean(barChartRequest, legend));
        //设置x轴
        option.setXAxis(buildXAis(barChartRequest.getXAxisName(),barChartRequest.getXData()));
        //设置y轴
        List<YAxisBean> yAxis = new ArrayList<>();
        YAxisBean y1 = YAxisBean.builder().axisLabel(new AxisLabel(y1Formatter)).name(barChartRequest.getYAxisName()).build();
        yAxis.add(y1);
        YAxisBean y2 = YAxisBean.builder().axisLabel(new AxisLabel(y2Formatter)).name(barChartRequest.getY2AxisName()).build();
        yAxis.add(y2);
        option.setYAxis(yAxis);
        //数据
        option.setSeries(series);
        return JSONObject.toJSON(option);
    }

    /**
     * getChartsTitleBean
     * @param barChartRequest barChartRequest
     * @return ChartsTitleBean
     */
    private static ChartsTitleBean getChartsTitleBean(BarChartRequest barChartRequest) {
        String left = Optional.ofNullable(barChartRequest.getLeft()).orElse("left");
        String top = Optional.ofNullable(barChartRequest.getTop()).orElse("top");
        return buildTitle(barChartRequest.getTitle(), barChartRequest.getSubTitle(), left, top,
                barChartRequest.getFontSize());
    }

}

/**
 * @author liboyi
 * @title FunnelFactory
 * @description 漏斗图形工厂
 * @date 2021/8/22 15:25
 */
public class FunnelFactory extends BaseFactory{

    /**
     * 创建漏斗图
     * @param funnelChartRequest funnelChartRequest
     * @return Object
     */
    public static Object createFunnel(FunnelChartRequest funnelChartRequest){
        FunnelOptionBean option=new FunnelOptionBean();
        //设置标题
        String x = Optional.ofNullable(funnelChartRequest.getLeft()).orElse("left");
        ChartsTitleBean title = ChartsTitleBean.builder().text(funnelChartRequest.getTitle()).
                subtext(funnelChartRequest.getSubTitle()).x(x).y(funnelChartRequest.getTop()).build();
        if(funnelChartRequest.getFontSize() != null){
            TextStyle textStyle = new TextStyle();
            textStyle.setFontSize(funnelChartRequest.getFontSize());
            title.setTextStyle(textStyle);
        }

        option.setTitle(title);
        //设置图例
        String left = Optional.ofNullable(funnelChartRequest.getTop()).orElse("center");
        String top = Optional.ofNullable(funnelChartRequest.getLeft()).orElse("top");
        LegendBean legendBean = LegendBean.builder().orient(funnelChartRequest.getOrient()).left(left)
                .top(top).orient(funnelChartRequest.getOrient()).build();
        option.setLegend(legendBean);
        //设置工具提示
        option.setTooltip(ToolTipBean.builder().trigger("item").formatter("{a} <br/>{b} : {c}%").build());
        //设置工具栏
        Feature feature = getFeature(false,true,false,false,
                true,null);
        ChartsToolBoxBean toolbox = new ChartsToolBoxBean(true);
        toolbox.setFeature(feature);
        option.setToolbox(toolbox);
        //数据
        List<ChartsFunnelSeriesBean> series = new ArrayList<>();
        ChartsFunnelSeriesBean funnelSeries = new ChartsFunnelSeriesBean();
        funnelSeries.setName(funnelChartRequest.getTitle());
        funnelSeries.setType("funnel");
        funnelSeries.setData(funnelChartRequest.getData());
        series.add(funnelSeries);
        option.setSeries(series);
        return JSONObject.toJSON(option);
    }


}

/**
 * @author liboyi
 * @title: GaugeFactory
 * @description: 仪表盘图形工厂
 * @date 2021/8/18
 */
public class GaugeFactory extends BaseFactory{

    /**
     * 基础仪表盘
     * @param gauageChartsRequest gauageChartsRequest
     * @return Object
     */
    public static Object createBaseGauge(GauageChartRequest gauageChartsRequest){
        GaugeOptionBean option = new GaugeOptionBean();
        ChartsGaugeSeriesBean gaugeSeriesBean = new ChartsGaugeSeriesBean();
        boolean showProgress = Optional.ofNullable(gauageChartsRequest.isShowProgress()).orElse(false);
        gaugeSeriesBean.setProgress(new Progress(showProgress));
        ChartDataBean gaugeDataBean = ChartDataBean.builder().name(gauageChartsRequest.getTitle()).
                value(gauageChartsRequest.getValue()).build();
        gaugeSeriesBean.setData(Arrays.asList(gaugeDataBean));
        option.setSeries(Arrays.asList(gaugeSeriesBean));
        return JSONObject.toJSON(option);
    }

}

/**
 * @author liboyi
 * @title: LineFactory
 * @description: 折线图图形工厂
 * @date 2021/8/23 23:29
 */
public class LineFactory extends BaseFactory{
    private LineFactory(){

    }

    /**
     * 创建折线图/支持平滑折线图/折线图堆叠
     * @param lineChartRequest lineChartRequest
     * @return Object
     */
    public static Object createLine(LineChartRequest lineChartRequest){
        List<String> magicTypeList = Optional.ofNullable(lineChartRequest.getMagicTypeList()).orElse(Arrays.asList("line", "bar"));
        lineChartRequest.setMagicTypeList(magicTypeList);
        LineOptionBean option = getLineOptionBean(lineChartRequest,"line");
        return JSONObject.toJSON(option);
    }

    /**
     * getLineOptionBean
     * @param lineChartRequest lineChartRequest
     * @param chartType chartType
     * @return LineOptionBean
     */
    private static LineOptionBean getLineOptionBean(LineChartRequest lineChartRequest,String chartType) {
        List<ChartsLineSeriesBean> series = new ArrayList<>();
        LineOptionBean option = new LineOptionBean();
        //拿到图例
        List<String> legendData = new ArrayList<>();
        Boolean smooth = Optional.ofNullable(lineChartRequest.getSmooth()).orElse(false);
        if(!CollectionUtils.isEmpty(lineChartRequest.getData())){
            for (int i = 0; i < lineChartRequest.getData().size(); i++) {
                legendData.add(lineChartRequest.getData().get(i).getName());
                ChartsLineSeriesBean temp = new ChartsLineSeriesBean();
                temp.setName(lineChartRequest.getData().get(i).getName());
                temp.setData(lineChartRequest.getData().get(i).getData());
                temp.setType("line");
                temp.setStack(lineChartRequest.getData().get(i).getStack());
                temp.setSmooth(smooth);
                if("area".equals(chartType)){
                    temp.setAreaStyle(new AreaStyle());
                }
                series.add(temp);
            }
        }

        if("area".equals(chartType)){
            option.setGrid(Grid.builder().left("3%").right("4%").bottom("3%").containLabel(true).build());
        }

        //设置标题
        String left = Optional.ofNullable(lineChartRequest.getLeft()).orElse("left");
        ChartsTitleBean title = buildTitle(lineChartRequest.getTitle(),lineChartRequest.getSubTitle(),
                left,lineChartRequest.getTop(),lineChartRequest.getFontSize());
        option.setTitle(title);
        //设置工具提示
        option.setTooltip(getToolTip(chartType));

        //设置工具栏
        ChartsToolBoxBean toolbox = new ChartsToolBoxBean(true);
        List<String> type = Arrays.asList("line", "bar");
        Feature feature = getFeature(true,true,true,true,
                true,type);
        toolbox.setFeature(feature);
        option.setToolbox(toolbox);
        //设置图例
        option.setLegend(new LegendBean(legendData));
        //设置x轴
        option.setXAxis(buildXAis(lineChartRequest.getXAxisName(),lineChartRequest.getXData()));
        //设置y轴
        option.setYAxis(buildYAis(lineChartRequest.getYAxisName()));
        //数据
        option.setSeries(series);
        return option;
    }

    /**
     * getToolTip
     * @param chartType chartType
     * @return ToolTipBean
     */
    private static ToolTipBean getToolTip(String chartType){
        if("line".equals(chartType)){
            return ToolTipBean.builder().trigger("axis").build();
        }else if("area".equals(chartType)){
            Label label = Label.builder().backgroundColor("#6a7985").build();
            AxisPointer axisPointer = AxisPointer.builder().type("cross").label(label).build();
            return ToolTipBean.builder().axisPointer(axisPointer).trigger("axis").build();
        }
        return null;
    }

    /**
     *  标准面积图/堆积面积图
     * @param lineChartRequest lineChartRequest
     * @return Object
     */
    public static Object createArea(LineChartRequest lineChartRequest){
        List<String> magicTypeList = Optional.ofNullable(lineChartRequest.getMagicTypeList()).
                orElse(Arrays.asList("line","bar","stack","tiled"));
        lineChartRequest.setMagicTypeList(magicTypeList);
        LineOptionBean option = getLineOptionBean(lineChartRequest,"area");
        return JSONObject.toJSON(option);
    }

}

**
 * @author liboyi
 * @title: PieFactory
 * @description 饼图图形工厂
 * @date 2021/8/18
 */
public class PieFactory extends BaseFactory{

    /**
     * 创建饼图
     * @param pieChartRequest pieChartRequest
     * @return Object
     */
    public static Object createPie(PieChartRequest pieChartRequest){
        if(CollectionUtils.isEmpty(pieChartRequest.getRadius())){
            pieChartRequest.setRadius(Arrays.asList("50%"));
        }
        if(!StringUtils.hasLength(pieChartRequest.getLeftOfLegend())){
            pieChartRequest.setLeftOfLegend("left");
        }
        if(!StringUtils.hasLength(pieChartRequest.getTopOfLegend())){
            pieChartRequest.setTopOfLegend("top");
        }
        if(!StringUtils.hasLength(pieChartRequest.getOrient())){
            pieChartRequest.setOrient("vertical");
        }
        return buildPie(pieChartRequest);
    }

    /**
     * 创建环形图
     * @param pieChartRequest pieChartRequest
     * @return Object
     */
    public static Object createRing(PieChartRequest pieChartRequest){
        pieChartRequest.setType("ring");
        if(!CollectionUtils.isEmpty(pieChartRequest.getRadius())){
            pieChartRequest.setRadius(Arrays.asList("40%","70%"));
        }
        return buildPie(pieChartRequest);
    }

    /**
     * 创建圆角环形图
     * @param pieChartRequest pieChartRequest
     * @return Object
     */
    public static Object createRingWithRoundedCorner(PieChartRequest pieChartRequest){
        if(!CollectionUtils.isEmpty(pieChartRequest.getRadius())){
            pieChartRequest.setRadius(Arrays.asList("40%","70%"));
        }
        if(StringUtils.hasLength(pieChartRequest.getBorderColor())){
            pieChartRequest.setBorderColor("#fff");
        }
        if(pieChartRequest.getBorderRadius() == null){
            pieChartRequest.setBorderRadius(10);
        }
        if(pieChartRequest.getBorderWidth() == null){
            pieChartRequest.setBorderWidth(2);
        }
        pieChartRequest.setType("ring");
        return buildPie(pieChartRequest);
    }

    /**
     * 创建玫瑰图
     * @param pieChartRequest pieChartRequest
     * @return Object
     */
    public static Object createRose(PieChartRequest pieChartRequest){
        pieChartRequest.setType("rose");
        String top = Optional.ofNullable(pieChartRequest.getTop()).orElse("bottom");
        pieChartRequest.setTop(top);
        List<String> radius = Optional.ofNullable(pieChartRequest.getRadius()).orElse(Arrays.asList("50","250"));
        pieChartRequest.setRadius(radius);
        return buildPie(pieChartRequest);
    }

    /**
     * 饼图和环形图生成json
     * @param pieChartRequest pieChartRequest
     * @return Object
     */
    private static Object buildPie(PieChartRequest pieChartRequest){
        String left = Optional.ofNullable(pieChartRequest.getLeft()).orElse("center");
        PieOptionBean option = new PieOptionBean();
        //设置标题
        ChartsTitleBean title = ChartsTitleBean.builder().text(pieChartRequest.getTitle()).
                subtext(pieChartRequest.getSubTitle()).x(left).y(pieChartRequest.getTop()).build();
        option.setTitle(title);
        //设置工具提示
        ToolTipBean tooltip = new ToolTipBean();
        tooltip.setTrigger("item");
        option.setTooltip(tooltip);
        //设置工具栏
        ChartsToolBoxBean toolbox = new ChartsToolBoxBean(true);
        List<String> type = Arrays.asList("pie", "funnel");
        Feature feature = getFeature(false,true,true,true,
                true,type);
        toolbox.setFeature(feature);
        option.setToolbox(toolbox);
        //设置图例
        LegendBean legendBean = LegendBean.builder().orient(pieChartRequest.getOrient()).left(pieChartRequest.getLeftOfLegend())
                .top(pieChartRequest.getTopOfLegend()).build();
        option.setLegend(legendBean);
        List<ChartsPieSeriesBean> series = new ArrayList<>();
        ChartsPieSeriesBean pieSeries = new ChartsPieSeriesBean();
        ItemStyle itemStyle = ItemStyle.builder().borderColor(pieChartRequest.getBorderColor()).
                borderRadius(pieChartRequest.getBorderRadius()).borderWidth(pieChartRequest.getBorderWidth()).build();
        pieSeries.setItemStyle(itemStyle);
        //数据
        pieSeries.setName(pieChartRequest.getTitle());
        pieSeries.setType("pie");
        if(pieChartRequest.getType().equals("rose")){
            pieSeries.setRoseType("area");
        }
        Object radius = pieChartRequest.getRadius().size()==1 ? pieChartRequest.getRadius().get(0) : pieChartRequest.getRadius();
        pieSeries.setRadius(radius);
        pieSeries.setData(pieChartRequest.getData());

        pieSeries.setEmphasis(getItemStyleEmphasis());
        series.add(pieSeries);
        option.setSeries(series);
        return JSONObject.toJSON(option);
    }

    /**
     * getItemStyleEmphasis
     * @return Emphasis
     */
    private static Emphasis getItemStyleEmphasis() {
        Emphasis itemStyleEmphasis = new Emphasis();
        itemStyleEmphasis.setShadowBlur(10);
        itemStyleEmphasis.setShadowOffsetX(0);
        itemStyleEmphasis.setShadowColor("rgba(0, 0, 0, 0.5)");
        return itemStyleEmphasis;
    }

}

柱状图示例:

/**
 * @author liboyi
 * @title: BarChartSample
 * @description 柱状图示例
 * @date 2021/8/3 10:34
 */
public class BarChartSample {
    public static void main(String[] args) {
        List<String> xData = Arrays.asList("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun");
        BarChartRequest barChartRequest = new BarChartRequest();
        barChartRequest.setTitle("柱状图");
        barChartRequest.setXData(xData);

        List<ChartDataBean> data = new ArrayList<>();
        data.add(ChartDataBean.builder().data(Arrays.asList(120, 200, 150, 80, 70, 110, 130)).name("蒸发量").build());
        barChartRequest.setData(data);
        System.out.println("柱状图Option:" + BarFactory.createBar(barChartRequest));


        List<ChartDataBean> barList = new ArrayList<>();
        barList.add(ChartDataBean.builder().data(Arrays.asList(120, 200, 150, 80, 70, 110, 130)).name("蒸发量").build());
        List<ChartDataBean> lineList = new ArrayList<>();
        lineList.add(ChartDataBean.builder().data(Arrays.asList(210, 100, 50, 40, 10, 40, 30)).name("降雨量").build());

        BarChartRequest barChartRequest2 = new BarChartRequest();
        barChartRequest2.setTitle("柱状折线混搭图");
        barChartRequest2.setXData(xData);
        barChartRequest2.setData(barList);
        barChartRequest2.setLineList(lineList);
        System.out.println("柱状折线混搭图Option:" + BarFactory.mixedLineAndBar(barChartRequest2));
    }
}

漏斗图示例:

/**
 * @author liboyi
 * @title: FunnelChartSample
 * @description 漏斗图示例
 * @date 2021/8/31 23:40
 */
public class FunnelChartSample {
    public static void main(String[] args) {
        List<ChartDataBean> data = new ArrayList<>();
        data.add(ChartDataBean.builder().name("访问").value("10").build());
        data.add(ChartDataBean.builder().name("咨询").value("40").build());
        data.add(ChartDataBean.builder().name("订单").value("20").build());
        data.add(ChartDataBean.builder().name("点击").value("80").build());
        data.add(ChartDataBean.builder().name("展现").value("100").build());

        FunnelChartRequest funnelChartRequest = new FunnelChartRequest();
        funnelChartRequest.setTitle("漏斗图");
        funnelChartRequest.setSubTitle("纯属虚构");
        funnelChartRequest.setData(data);
        Object jsonObject = FunnelFactory.createFunnel(funnelChartRequest);
        System.out.println("漏斗图Option:" + jsonObject);
    }
}

仪表盘示例

/**
 * @author liboyi
 * @title: GaugeChartSample
 * @description 仪表盘示例
 * @date 2021/8/31 23:41
 */
public class GaugeChartSample {
    public static void main(String[] args) {
        GauageChartRequest gauageChartsRequest = new GauageChartRequest();
        gauageChartsRequest.setTitle("基础仪表盘");
        gauageChartsRequest.setShowProgress(true);
        gauageChartsRequest.setValue("50");
        Object jsonObject = GaugeFactory.createBaseGauge(gauageChartsRequest);
        System.out.println("仪表盘Option:" + jsonObject);
    }
}

折线图示例:

/**
 * @author liboyi
 * @title: LineChartSample
 * @description 折线图示例
 * @date 2021/8/31 23:41
 */
public class LineChartSample {

    public static void main(String[] args) {
        List<String> xData = Arrays.asList("周一", "周二", "周三", "周四", "周五", "周六", "周日");
        List<ChartDataBean> list = new ArrayList<>();
        list.add(ChartDataBean.builder().name("邮件营销").type("line").
                data(Arrays.asList(120, 132, 101, 134, 90, 230, 210)).build());
        list.add(ChartDataBean.builder().name("联盟广告").type("line").
                data(Arrays.asList(220, 182, 191, 234, 290, 330, 310)).build());
        list.add(ChartDataBean.builder().name("视频广告").type("line").
                data(Arrays.asList(150, 232, 201, 154, 190, 330, 410)).build());
        list.add(ChartDataBean.builder().name("直接访问").type("line").
                data(Arrays.asList(320, 332, 301, 334, 390, 330, 320)).build());
        list.add(ChartDataBean.builder().name("搜索引擎").type("line").
                data(Arrays.asList(820, 932, 901, 934, 1290, 1330, 1320)).build());
        LineChartRequest lineChartRequest = new LineChartRequest();
        lineChartRequest.setTitle("折线图");
        lineChartRequest.setXAxisName("x轴");
        lineChartRequest.setXData(xData);
        lineChartRequest.setYAxisName("y轴");
        lineChartRequest.setData(list);

        System.out.println("折线图Option:" + LineFactory.createLine(lineChartRequest));

        System.out.println("面积图Option:" + LineFactory.createArea(lineChartRequest));
    }
}

饼图示例:

**
 * @author liboyi
 * @title: PieChartSample
 * @description 饼图示例
 * @date 2021/8/31 23:41
 */
public class PieChartSample {
    public static void main(String[] args) {
        List<ChartDataBean> list = new ArrayList<>();
        list.add(ChartDataBean.builder().name("搜索引擎").value("1048").build());
        list.add(ChartDataBean.builder().name("直接访问").value("735").build());
        list.add(ChartDataBean.builder().name("邮件营销").value("580").build());
        list.add(ChartDataBean.builder().name("联盟广告").value("484").build());
        list.add(ChartDataBean.builder().name("视频广告").value("300").build());
        PieChartRequest pieChartRequest = new PieChartRequest();
        pieChartRequest.setTitle("某站点用户访问来源");
        pieChartRequest.setSubTitle("纯属虚构");
        pieChartRequest.setData(list);

        Object jsonObject   = PieFactory.createPie(pieChartRequest);
        System.out.println("饼图Option:" + jsonObject);
        jsonObject  = PieFactory.createRose(pieChartRequest);
        System.out.println("玫瑰图Option:" + jsonObject);

        jsonObject  = PieFactory.createRing(pieChartRequest);
        System.out.println("环形图Option:" + jsonObject);

        jsonObject  = PieFactory.createRingWithRoundedCorner(pieChartRequest);
        System.out.println("圆角环形图Option:" + jsonObject);

    }
}

在Vue中封装Echarts有多种方式。一种方式是在main.js中引入Echarts并将其挂载到Vue的原型上,这样在任何组件中都可以通过this.$echarts来使用Echarts[1]。另一种方式是按需引入Echarts的模块,只引入需要使用的功能模块。具体步骤如下: 1. 安装Echarts:在终端中运行命令`npm i echarts --save`来安装Echarts。 2. 引入Echarts:在需要使用Echarts的.vue文件中,使用以下语句引入Echarts: ```javascript import echarts from 'echarts' ``` 3. 使用Echarts:在组件中使用Echarts的方式有多种。以下以在模板中使用Echarts为例: 在模板中添加一个具有宽度和高度的div,用于显示图表: ```html <template> <div id="main" style="width: 1200px; height: 500px"></div> </template> ``` 在脚本中初始化Echarts并绘制图表: ```javascript <script> export default { mounted() { this.initEcharts(); }, methods: { initEcharts() { // 在组件中直接使用this.$echarts来进行操作 var myChart = this.$echarts.init(document.getElementById("main")); // 指定图表的配置项和数据 var option = { title: { text: "ECharts 入门示例", }, tooltip: {}, legend: { data: ["销量"], }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "line", data: [5, 20, 36, 10, 10, 20], }, ], }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); }, }, }; </script> ``` 通过以上步骤,你就可以在Vue中成功封装Echarts并使用它了。 除了以上方式,还可以将Echarts封装成Vue的插件。这种方式可以更好地复用和扩展Echarts的功能。详细的插件封装步骤超出了本次回答的范围,你可以参考Echarts的官方文档或查找相关教程来了解更多关于插件封装的内容。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李秀才

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值