手把手教你用策略模式 寫echarts的配置項(xiàng)option

前言：策略模式和適配器模式很像 但前者策略的接口和相關(guān)類會(huì)暴露出來(lái)，并且每個(gè)策略的“計(jì)算內(nèi)容”都不同【常用于計(jì)算】。

一、研究下echarts官網(wǎng)的重要配置

1.1 常用項(xiàng)主要有title legend xAxis yAxis legend dataset series textStyle 如下圖所示

file

file

二、建立Echarts的option類 我在此命名為EchartsOption 【注：后面一般option下直接屬性 java命名前綴都是Echarts】

package com.ken.sys.common.entity.echarts.option;

import com.ken.sys.common.entity.echarts.axis.EchartsXYAxis;
import com.ken.sys.common.entity.echarts.dataset.EchartDataset;
import com.ken.sys.common.entity.echarts.legend.EchartsLegend;
import com.ken.sys.common.entity.echarts.series.EchartBaseSeries;
import com.ken.sys.common.entity.echarts.textStyle.EchartsTextStyle;
import com.ken.sys.common.entity.echarts.title.EchartsTitle;

import java.util.List;

/**

  • @author swc

  • @date 2020/7/3 0003 下午 13:43
    */
    public class EchartsOption {
    //標(biāo)題
    private EchartsTitle title;

    //圖例組件。
    //圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字?？梢酝ㄟ^點(diǎn)擊圖例控制哪些系列不顯示。
    private EchartsLegend legend;

    //直角坐標(biāo)系 grid 中的 x 軸，
    private EchartsXYAxis xAxis;

    //直角坐標(biāo)系 grid 中的 y 軸，[x軸和y軸 屬性是一樣的]
    private EchartsXYAxis yAxis;

    //默認(rèn)顏色值 全局
    private Object color =new String[]{"#c23531","#2f4554", "#61a0a8", "#d48265", "#91c7ae","#749f83", "#ca8622", "#bda29a","#6e7074", "#546570", "#c4ccd3"};

    //全局的字體樣式。
    private EchartsTextStyle textStyle;

    //系列列表。每個(gè)系列通過 type 決定自己的圖表類型
    private List<EchartBaseSeries> series;

    //注意
    //Charts 4 開始支持了 數(shù)據(jù)集（dataset）組件用于單獨(dú)的數(shù)據(jù)集聲明，
    // 從而數(shù)據(jù)可以單獨(dú)管理，被多個(gè)組件復(fù)用，并且可以自由指定數(shù)據(jù)到視覺的映射。這在不少場(chǎng)景下能帶來(lái)使用上的方便。
    private EchartDataset dataset;

    //省略get set方法

}
2.1 以title 為例子 寫相關(guān) 的java類EchartsTitle


file

/******************************************************************************

*****************************************************************************/
package com.ken.sys.common.entity.echarts.title;

/**

  • <ul>

  • <li>Title= EchartsTitle</li>

  • <li>Description= TODO </li>

  • <li>Copyright= Copyright (c) 2018</li>

  • <li>Company= http=//www.jiangqiaotech.com/</li>

  • </ul>

  • @author swc

  • @date 2020/7/3 0003 下午 13=54
    */
    public class EchartsTitle {

    private String id ;

    //是否顯示標(biāo)題組件
    private boolean show= true ;

    //主標(biāo)題文本，支持使用 \n 換行。
    private String text= "" ;

    private String link= "" ;

    private String target= "blank" ;

    private Object textStyle;

    private String subtext= "" ;

    private String sublink= "" ;

    private String subtarget= "blank" ;

    private String subtextStyle;
    //可選值："auto"、"left"、"right"、"center"。
    private String textAlign= "auto" ;

    private String textVerticalAlign= "auto" ;

    private boolean triggerEvent= false ;

    //number /Array
    //5 or [5,10,2,20]
    private Object padding= 5 ;

    private Integer itemGap= 10 ;

    private Integer zlevel= 0 ;

    private Integer z= 2 ;

    //string | number
    private Object left= "auto" ;

    //string | number
    private Object top= "auto" ;

    //string | number
    private Object right= "auto" ;

    //string | number
    private Object bottom= "auto" ;

    //Color
    private Object backgroundColor= "transparent" ;

    //Color
    private Object borderColor= "#ccc" ;

    private Integer borderWidth= 0 ;

    private Integer borderRadius= 0 ;

    private Integer shadowBlur ;

    //Color
    private Object shadowColor ;

    private Integer shadowOffsetX= 0 ;

    private Integer shadowOffsetY= 0 ;

//省略get set方法

}

file

其他相關(guān)類在此不做贅述

這里簡(jiǎn)單說一下 series 使用基類【EchartBaseSeries】 其他如餅圖 折線圖等的series都是集成EchartBaseSeries


file

三、編寫策略類【策略模式】

3.1 主要分為三部分，一是策略接口 【EchartsStrategy】 二是策略的上下文 對(duì)外暴露 匹配不同的策略 行使不同的方案

三是工廠類將策略注入 做到匹配不同的類型的策略

3.1.1 策略接口 【EchartsStrategy】

public interface EchartsStrategy {
// //創(chuàng)建option
<T> EchartsOption createOption(IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto);

//會(huì)創(chuàng)建多個(gè)option
<T>List<EchartsOption> createMulOption(IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto);

}
3.1.2 策略上下文 【EchartStrategyContext】

package com.ken.sys.common.strategycontext.echarts;

import com.ken.sys.common.entity.echarts.dto.HandEchartsDto;
import com.ken.sys.common.entity.echarts.option.EchartsOption;
import com.ken.sys.common.ifs.IEchartSeries;
import com.ken.sys.common.strategy.echarts.base.EchartsStrategy;

import java.util.List;

/**

  • <ul>

  • <li>Title: EchartStrategyContext</li>

  • </ul>

  • @author swc

  • @date 2020/7/3 0003 下午 14:54
    */
    public class EchartStrategyContext {

    //echart 的生成策略
    private EchartsStrategy echartsStrategy;

public <T>EchartsOption createOption(IEchartSeries iEchartSeries, List<T> list,HandEchartsDto echartsDto){
    if (echartsStrategy != null) {
       return echartsStrategy.createOption(iEchartSeries,list,echartsDto);
    }
    return null;
}

//會(huì)創(chuàng)建多個(gè)option
public <T> List<EchartsOption> createMulOption(IEchartSeries iEchartSeries, List<T> list,HandEchartsDto echartsDto){
    if (echartsStrategy != null) {
        return echartsStrategy.createMulOption(iEchartSeries,list,echartsDto);
    }
    return null;
}


public EchartStrategyContext(EchartsStrategy echartsStrategy) {
    this.echartsStrategy = echartsStrategy;
}

private EchartStrategyContext() {
}

}
3.1.3 策略的 工廠類【EchartsStrategyFactory】

/******************************************************************************

*****************************************************************************/
package com.ken.sys.common.factory.echarts;
import com.ken.sys.common.constant.EchartsConstant;
import com.ken.sys.common.strategy.echarts.;
import com.ken.sys.common.strategy.echarts.base.EchartsStrategy;
import java.util.HashMap;
import java.util.Map;
/*

  • <ul>
  • <li>Title: EchartsStrategyFactory</li>
  • <li>Description: TODO </li>
  • <li>Copyright: Copyright (c) 2018</li>
  • <li>微信:tianji_vip</li>
  • </ul>
  • @author swc

  • @date 2020/7/3 0003 下午 15:07
    */
    public class EchartsStrategyFactory {
    public static Map<String,EchartsStrategy> hashMap;
    static {
    hashMap = new HashMap<String,EchartsStrategy>();
    hashMap.put(EchartsConstant.LINE,new EchartsLineStrategy());
    hashMap.put(EchartsConstant.BAR,new EchartsBarStrategy());
    hashMap.put(EchartsConstant.PIE,new EchartsPieStrategy());
    hashMap.put(EchartsConstant.FUNNEL,new EchartsFunnelStrategy());
    hashMap.put(EchartsConstant.GAUGE,new EchartsGaugeStrategy());
    hashMap.put(EchartsConstant.HEATMAP,new EchartsHeatMapStrategy());
    }
    public static EchartsStrategy getEchartsStrategy(String type) {
    return hashMap.get(type);
    }
    }
    四 、部分策略內(nèi)容展示【這里是把策略封裝在BaseStrategy里面 作為公共部分】


    file

BaseStrategy的相關(guān)方法
package com.ken.sys.common.strategy.echarts.base;

import com.ken.sys.common.entity.echarts.axis.EchartsXYAxis;
import com.ken.sys.common.entity.echarts.dto.HandEchartsDto;
import com.ken.sys.common.entity.echarts.legend.EchartsLegend;
import com.ken.sys.common.entity.echarts.option.EchartsOption;
import com.ken.sys.common.entity.echarts.series.EchartBaseSeries;
import com.ken.sys.common.entity.echarts.series.HeatMapSeries;
import com.ken.sys.common.entity.echarts.series.data.SeriesData;
import com.ken.sys.common.entity.echarts.series.property.SeriesAreaStyle;
import com.ken.sys.common.entity.echarts.series.property.SeriesItemStyle;
import com.ken.sys.common.entity.echarts.series.property.SeriesLabel;
import com.ken.sys.common.entity.echarts.series.property.SeriesLineStyle;
import com.ken.sys.common.entity.echarts.title.EchartsTitle;
import com.ken.sys.common.ifs.IEchartSeries;
import com.ken.sys.common.util.EmptyUtils;
import com.ken.sys.common.util.ReflectUtils;

import java.util.*;

/**

  • <ul>

  • <li>Title: BaseStrategy</li>

  • <li>Description: TODO </li>

  • </ul>

  • @author swc

  • @date 2020/7/3 0003 下午 15:57
    */
    public class BaseStrategy {

    //針對(duì)line和bar圖像
    public <T> EchartsOption createOptionForLineAndBar(IEchartSeries iEchartSeries,Class<? extends EchartBaseSeries> seriesClass, List<T> list, HandEchartsDto handEchartsDto){
    String xyAxisName = handEchartsDto.getxAxisDataName();

     Object[] legends = handEchartsDto.getLegends();

 Object[] fields =  handEchartsDto.getFields();

 List[] saveList = handEchartsDto.getSaveList();

 EchartsOption option =new EchartsOption();
 List<Object> xAxisDataList =new ArrayList<Object>();
 Map<String,List<Object>> map =new HashMap<String,List<Object>>();
 Number value =null;
 SeriesData data=null;
 String nameValue =null;
try {
    for(T t:list){
        nameValue = ReflectUtils.getFieldValue(t,xyAxisName).toString();
        xAxisDataList.add(nameValue);

        for(int ind=0;ind<fields.length;ind++){
            value = (Number) ReflectUtils.getFieldValue(t,(String)fields[ind]);
            value = EmptyUtils.isNullOrEmpty(value)?0:value;
            data =new SeriesData();
            data.setValue(value);
            //設(shè)置單個(gè)數(shù)據(jù) 樣式
            if(!EmptyUtils.isNullOrEmpty(iEchartSeries)){
                iEchartSeries.setSeriesDataProp(data,new SeriesLabel(),new SeriesItemStyle(),new SeriesAreaStyle(),new SeriesLineStyle());
            }
            saveList[ind].add(data);
        }
    }

    //多個(gè)series
    List<EchartBaseSeries> mulseries =new ArrayList<EchartBaseSeries>();

    commonSetSeries(iEchartSeries, seriesClass, legends, fields, mulseries, saveList);

    EchartsLegend legend = new EchartsLegend();
    legend.setData(Arrays.asList(legends));

    EchartsXYAxis xAxis = new EchartsXYAxis();
    xAxis.setData(xAxisDataList);

    option.setLegend(legend);
    option.setxAxis(xAxis);
    option.setSeries(mulseries);
}catch (Exception e){
     //實(shí)際換成日志打印
    e.printStackTrace();
}
 return option;

    }

    //針對(duì)漏斗圖、儀器圖 和餅圖圖像
    public <T> EchartsOption createOptionFGP(IEchartSeries iEchartSeries, Class<? extends EchartBaseSeries> seriesClass, List<T> list, HandEchartsDto handEchartsDto){
    EchartsOption option =new EchartsOption();
    String xyAxisName = handEchartsDto.getxAxisDataName();

     Object[] legends = handEchartsDto.getLegends();

 Object[] fields =  handEchartsDto.getFields();

 List[] saveList = handEchartsDto.getSaveList();

 boolean requireXAxis = handEchartsDto.getRequireXAxis();

 List<Object> xAxisDataList =new ArrayList<Object>();
 Map<String,List<Object>> map =new HashMap<String,List<Object>>();
 Number value =null;
 SeriesData data=null;
 String xAxisDataValue =null;

 try {
     for(T t:list){
         xAxisDataValue = ReflectUtils.getFieldValue(t,xyAxisName).toString();
         for(int ind=0;ind<fields.length;ind++){
             value = (Number) ReflectUtils.getFieldValue(t,(String)fields[ind]);
             value = EmptyUtils.isNullOrEmpty(value)?0:value;

             data =new SeriesData();
             data.setValue(value);

             data.setName(xAxisDataValue);
             xAxisDataList.add(xAxisDataValue);

             //設(shè)置單個(gè)數(shù)據(jù) 樣式
             if(!EmptyUtils.isNullOrEmpty(iEchartSeries)){
                 iEchartSeries.setSeriesDataProp(data,new SeriesLabel(),new SeriesItemStyle(),new SeriesAreaStyle(),new SeriesLineStyle());
             }
             saveList[ind].add(data);
         }
     }

     List<EchartBaseSeries> mulseries =new ArrayList<EchartBaseSeries>();
     commonSetSeries(iEchartSeries, seriesClass, legends, fields, mulseries, saveList);

     EchartsLegend legend =new EchartsLegend();
     legend.setData(Arrays.asList(legends));

     EchartsXYAxis xAxis =new EchartsXYAxis();
     xAxis.setData(xAxisDataList);

     //需要x軸
     if(requireXAxis){
         option.setxAxis(xAxis);
     }
     option.setLegend(legend);
     option.setSeries(mulseries);
 }catch (Exception e){
     e.printStackTrace();
 }
 return option;

    }

/**
 * 功能描述:  創(chuàng)建熱力圖的option
 * @param iEchartSeries 接口
 * @param t  對(duì)象
//     * @param titleFieldName
//     * @param subFieldName 對(duì)象里面需要處理的list數(shù)據(jù)
//     * @param xDimension 維度x軸
//     * @param yDimension 維度y
//     * @param xAxisDataName x軸需要展示的信息
//     * @param yAxisDataName y軸需要展示的信息
//     * @param showValField 需要展示數(shù)據(jù)的列
 * @return: java.util.Map<java.lang.String,java.lang.Object>
 * @author: swc
 * @date: 2020/7/2 0002 下午 12:52
 */
public static <T> EchartsOption createHeatMapOption(IEchartSeries iEchartSeries, T t, HandEchartsDto handEchartsDto) {
    EchartsOption option =new EchartsOption();
    List<EchartBaseSeries> seriesList =new ArrayList<EchartBaseSeries>();

    String titleFieldName = handEchartsDto.getTitleFieldName();

    String subFieldName = handEchartsDto.getSubFieldName();

    String xDimension = handEchartsDto.getxDimension();

    String yDimension =  handEchartsDto.getyDimension();

    String xAxisDataName = handEchartsDto.getxAxisDataName();

    String yAxisDataName =  handEchartsDto.getyAxisDataName();

    String showValField =  handEchartsDto.getShowValField();

    String showDateField =  handEchartsDto.getShowDateField();

    String coordinateSystem =  handEchartsDto.getCoordinateSystem();

    Map<String,Object> map =new HashMap<String,Object>();


    //標(biāo)題
    String titleName =null;
    if(!EmptyUtils.isNullOrEmpty(titleFieldName)){
        titleName =  ReflectUtils.getFieldValue(t,titleFieldName).toString();
    }

    List subList  = (List)ReflectUtils.getFieldValue(t,subFieldName);

    Set<String> xAxisData =new TreeSet<String>();

    Set<String> yAxisData =new TreeSet<String>();

    //數(shù)據(jù)值---單個(gè)數(shù)據(jù)
    List seriesDataValue ;

    EchartBaseSeries echartBaseSeries = new HeatMapSeries();

    if("calendar".equals(coordinateSystem)){
        ((HeatMapSeries)echartBaseSeries).setCoordinateSystem("calendar");
        ((HeatMapSeries)echartBaseSeries).setCalendarIndex(handEchartsDto.getCalendarIndex());
    }


    List<SeriesData> seriesDataList = new ArrayList<SeriesData>();
    SeriesData seriesData =null;

    String xAxisValue =null;
    String yAxisValue =null;
    // 維度X
    String xDim = null;
    // 維度y
    String yDim = null;
    for(int i=0;i<subList.size();i++){
        seriesData =new SeriesData();

        if(!EmptyUtils.isNullOrEmpty(xDimension)){
            // 維度X
            xDim =  ReflectUtils.getFieldValue(subList.get(i),xDimension).toString();
        }

        if(!EmptyUtils.isNullOrEmpty(xDimension)){
            // 維度y
            yDim =  ReflectUtils.getFieldValue(subList.get(i),yDimension).toString();
        }


        //x軸的值
        if(!EmptyUtils.isNullOrEmpty(xAxisDataName)){
            xAxisValue =  ReflectUtils.getFieldValue(subList.get(i),xAxisDataName).toString();
            xAxisData.add(xAxisValue);
        }

        //y軸的值
        if(!EmptyUtils.isNullOrEmpty(yAxisDataName)){
            yAxisValue =  ReflectUtils.getFieldValue(subList.get(i),yAxisDataName).toString();
            yAxisData.add(yAxisValue);
        }

        seriesDataValue =new ArrayList();

        //目前支持cartesian2d出現(xiàn)x-y維度
        if("cartesian2d".equals(coordinateSystem)){
            seriesDataValue.add(xDim);
            seriesDataValue.add(yDim);
        }

        //coordinateSystem為calendar series里面的data-[value]為時(shí)間+某項(xiàng)值的數(shù)組
        if("calendar".equals(coordinateSystem)){
            Object showDate =EmptyUtils.isNullOrEmpty(showDateField)?0:ReflectUtils.getFieldValue(subList.get(i),showDateField);
            seriesDataValue.add(showDate);
        }


        Object showVal =EmptyUtils.isNullOrEmpty(showValField)?0:ReflectUtils.getFieldValue(subList.get(i),showValField);
        seriesDataValue.add(showVal);

        seriesDataValue.add(subList.get(i));

        //設(shè)置值
        seriesData.setValue(seriesDataValue);

// seriesData.setVisualMap(false);

        if(!EmptyUtils.isNullOrEmpty(iEchartSeries)){
            iEchartSeries.setSeriesDetailProp(echartBaseSeries,new SeriesLabel(),new SeriesItemStyle(),new SeriesAreaStyle(),new SeriesLineStyle());
            iEchartSeries.setSeriesDataProp(seriesData,new SeriesLabel(),new SeriesItemStyle(),new SeriesAreaStyle(),new SeriesLineStyle());
        }

        seriesDataList.add(seriesData);
        echartBaseSeries.setData(seriesDataList);
    }

    seriesList.add(echartBaseSeries);
    EchartsTitle title =new EchartsTitle();
    title.setText(titleName);

    EchartsXYAxis xAxis =new EchartsXYAxis();
    xAxis.setData(new ArrayList(xAxisData));
    option.setxAxis(xAxis);

    EchartsXYAxis yAxis =new EchartsXYAxis();
    yAxis.setData(new ArrayList(yAxisData));
    option.setyAxis(yAxis);

    option.setSeries(seriesList);

    return option;
}


/**
 * 功能描述:
 * @param iEchartSeries 接口
 * @param list 對(duì)象
//     * @param titleFieldName
//     * @param subFieldName 對(duì)象里面需要處理的list數(shù)據(jù)
//     * @param xDimension 維度x軸
//     * @param yDimension 維度y
//     * @param xAxisDataName x軸需要展示的信息
//     * @param yAxisDataName y軸需要展示的信息
//     * @param showValField 需要展示數(shù)據(jù)的列
 * @return: java.util.Map<java.lang.String,java.lang.Object>
 * @author: swc
 * @date: 2020/7/2 0002 下午 12:52
 */
public static <T> List<EchartsOption> createHeatMapOption(IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto) {
    List<EchartsOption> optionList =new ArrayList<EchartsOption>();
    String coordinateSystem =  handEchartsDto.getCoordinateSystem();

    //拼接不同年份日歷的series的值
    List<EchartBaseSeries> seriesList =new ArrayList<EchartBaseSeries>();
    EchartsOption option = null;


    for(int i=0;i<list.size();i++){
        handEchartsDto.setCalendarIndex(i);
        //如果coordinateSystem 是 cartesian2d  默認(rèn)為 多個(gè)[option]熱力圖
        if("cartesian2d".equalsIgnoreCase(coordinateSystem)){
            optionList.add(createHeatMapOption(iEchartSeries,list.get(i),handEchartsDto));
        }
        //如果coordinateSystem 是 calendar  默認(rèn)為 日歷 則是一個(gè)option的熱力圖  series的值為多個(gè) 而不是一個(gè)
        if("calendar".equalsIgnoreCase(coordinateSystem)){
            option = createHeatMapOption(iEchartSeries, list.get(i), handEchartsDto);
            seriesList.addAll(option.getSeries());
        }
    }

    if("calendar".equalsIgnoreCase(coordinateSystem)){
        option.setSeries(seriesList);
        optionList.add(option);
    }

    return optionList;
}





//公告的設(shè)置多個(gè)series的方法
private void commonSetSeries(IEchartSeries iEchartSeries, Class<? extends EchartBaseSeries> seriesClass, Object[] legends, Object[] fields, List<EchartBaseSeries> mulseries, List[] saveList) throws InstantiationException, IllegalAccessException {
    EchartBaseSeries echartBaseSeries;
    for (int ind = 0; ind < fields.length; ind++) {
        //獲取指定的series
        echartBaseSeries = seriesClass.newInstance();
        echartBaseSeries.setName((String) legends[ind]);
        echartBaseSeries.setData(saveList[ind]);
        //設(shè)置整體樣式[如一條折線或條狀圖的樣式]
        if (!EmptyUtils.isNullOrEmpty(iEchartSeries)) {
            iEchartSeries.setSeriesDetailProp(echartBaseSeries, new SeriesLabel(), new SeriesItemStyle(), new SeriesAreaStyle(), new SeriesLineStyle());
        }
        mulseries.add(echartBaseSeries);
    }
}

}
五、為了方便 最后寫了工具類【EChartsNewUtil】 把策略調(diào)用進(jìn)行封裝

注：1.這里主要看有注釋的方法 因?yàn)閰?shù)是最全的 2.關(guān)于IEchartSeries ,EchartsStrategy 這兩類，IEchartSeries 是針對(duì)series的數(shù)據(jù)處理 或添加修改樣式（畢竟每個(gè)公司 /每個(gè)系統(tǒng)業(yè)務(wù)多多少少會(huì)有些不同） ，EchartsStrategy 這個(gè)是自定義你自己業(yè)務(wù)需求的策略（需要繼承EchartsStrategy ，這個(gè)完全是重新定義這個(gè)方法 IEchartSeries 再次不起作用 除非你自動(dòng)代碼回調(diào)到它）

5.1 HandEchartsDto是封裝的參數(shù)，用于反射數(shù)據(jù)源的屬性或處理部分業(yè)務(wù)

/******************************************************************************

*****************************************************************************/
package com.ken.sys.common.entity.echarts.dto;
import java.util.List;
/**

  • <ul>
  • <li>Title: HandEchartsDto</li>
  • <li>Description: TODO </li>
  • <li>Copyright: Copyright (c) 2018</li>
  • <li>微信:tianji_vip</li>
  • </ul>
  • @author swc
  • @date 2020/7/2 0002 下午 13:44
    */
    public class HandEchartsDto {
    // 該系列使用的坐標(biāo)系，可選：
    // 'cartesian2d'
    // 使用二維的直角坐標(biāo)系（也稱笛卡爾坐標(biāo)系），通過 xAxisIndex, yAxisIndex指定相應(yīng)的坐標(biāo)軸組件。
    // 'geo'
    // 使用地理坐標(biāo)系，通過 geoIndex 指定相應(yīng)的地理坐標(biāo)系組件。
    // ‘calendar’
    // 使用日歷坐標(biāo)系
    private String coordinateSystem ="cartesian2d";
    //標(biāo)題[主-列名]
    private String titleFieldName;
    //子對(duì)象的屬性名[列名]
    private String subFieldName;
    //維度x軸[列名]
    private String xDimension;
    //維度y軸[列名]
    private String yDimension;
    //x軸需要展示的信息[列名]
    private String xAxisDataName;
    //y軸需要展示的信息[列名]
    private String yAxisDataName;
    //需要展示數(shù)據(jù)的列的屬性名[時(shí)間列]
    private String showDateField;
    //需要展示數(shù)據(jù)的列的屬性名[列名]
    private String showValField;
    //使用的日歷坐標(biāo)系的 index，在單個(gè)圖表實(shí)例中存在多個(gè)日歷坐標(biāo)系的時(shí)候有用。
    private int calendarIndex;
    //legend的值
    private Object[] legends;
    //一般為legend 一一對(duì)應(yīng)的屬性項(xiàng)的值
    private Object[] fields;
    //一般為fields 一一對(duì)應(yīng)的列的 單個(gè)serie的data里面的value值 一般為數(shù)組
    private List[] saveList;
    //是否需要x軸
    private boolean requireXAxis =true;
    //此處省略get set方法

}
package com.ken.sys.common.util;
import com.ken.sys.common.entity.echarts.dto.HandEchartsDto;
import com.ken.sys.common.entity.echarts.option.EchartsOption;
import com.ken.sys.common.factory.echarts.EchartsStrategyFactory;
import com.ken.sys.common.ifs.IEchartSeries;
import com.ken.sys.common.strategy.echarts.base.EchartsStrategy;
import com.ken.sys.common.strategycontext.echarts.EchartStrategyContext;

import java.util.*;

public class EChartsNewUtil {

/**
 * 功能描述: 
 * @param type 圖形類別
 * @param iEchartSeries 外部接口 用于重寫參數(shù) 或 樣式等
 * @param list  數(shù)據(jù)源
 * @param handEchartsDto  需要處理的相應(yīng)字段【list或list的子集里面】
 * @return: com.ken.sys.common.entity.echarts.option.EchartsOption
 * @param strategy  自定義的策略
 * @author: swc
 * @date: 2020/7/4 0:48
*/ 
public static <T>EchartsOption creatOption(String type, IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto, EchartsStrategy strategy) {
    //獲取匹配的策略
    if(EmptyUtils.isNullOrEmpty(strategy)){
        strategy =EchartsStrategyFactory.getEchartsStrategy(type);
    }
    EchartStrategyContext context = new EchartStrategyContext(strategy);
    return context.createOption(iEchartSeries,list,handEchartsDto);
}

public static <T>EchartsOption creatOption(String type, List<T> list, HandEchartsDto handEchartsDto) {
    return creatOption(type,null,list,handEchartsDto,null);
}

public static <T>EchartsOption creatOption(String type, List<T> list, HandEchartsDto handEchartsDto,EchartsStrategy strategy) {
    return creatOption(type,null,list,handEchartsDto,strategy);
}

public static <T>EchartsOption creatOption(String type,IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto) {
    return creatOption(type,iEchartSeries,list,handEchartsDto,null);
}

/**
 * 功能描述:
 * @param type 圖形類別
 * @param iEchartSeries 外部接口 用于重寫參數(shù) 或 樣式等
 * @param list  數(shù)據(jù)源
 * @param handEchartsDto  需要處理的相應(yīng)字段【list或list的子集里面】
 * @param strategy  自定義的策略
 * @return: com.ken.sys.common.entity.echarts.option.EchartsOption
 * @author: swc
 * @date: 2020/7/4 0:48
 */
public static <T>List<EchartsOption> creatMulOptionForHeatMap(String type, IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto,EchartsStrategy strategy) {
    //獲取匹配的策略
    if(EmptyUtils.isNullOrEmpty(strategy)){
        strategy =EchartsStrategyFactory.getEchartsStrategy(type);
    }
    EchartStrategyContext context = new EchartStrategyContext(strategy);
    return context.createMulOption(iEchartSeries,list,handEchartsDto);
}

public static <T>List<EchartsOption> creatMulOptionForHeatMap(String type, IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto) {
    return creatMulOptionForHeatMap(type,iEchartSeries,list,handEchartsDto,null);
}


public static <T>List<EchartsOption> creatMulOptionForHeatMap(String type, List<T> list, HandEchartsDto handEchartsDto, EchartsStrategy strategy) {
    return creatMulOptionForHeatMap(type,null,list,handEchartsDto,strategy);
}

public static <T>List<EchartsOption> creatMulOptionForHeatMap(String type, List<T> list, HandEchartsDto handEchartsDto) {
    return creatMulOptionForHeatMap(type,null,list,handEchartsDto,null);
}

}

六、測(cè)試數(shù)據(jù)和測(cè)試該工具類

部分代碼

//柱狀圖 折線圖
@Test
public void barOrLine()throws Exception{
    String type=EChartsUtil.LINE;//BAR
    List<EchartsEntity> list= getData();

    Object[] legends ={"總金額","實(shí)付金額"};
    Object[] fields ={"nums1","nums2"};

    List[] saveList =new List[]{new ArrayList<BigDecimal>(),new ArrayList<BigDecimal>()};

    HandEchartsDto dto =new HandEchartsDto();

    dto.setxAxisDataName("name");
    dto.setLegends(legends);
    dto.setFields(fields);
    dto.setSaveList(saveList);

    EchartsOption option = EChartsNewUtil.creatOption(type, new IEchartSeries() {
        @Override
        public void setSeriesDetailProp(EchartBaseSeries series, SeriesLabel label, SeriesItemStyle itemStyle, SeriesAreaStyle areaStyle, SeriesLineStyle lineStyle) {

// ((BarSeries) series).setBarMaxWidth("60%");
// label.setShow(true);
// label.setPosition("top");
// series.setLabel(label);
}

        @Override
        public void setSeriesDataProp(SeriesData seriesData, SeriesLabel label, SeriesItemStyle itemStyle, SeriesAreaStyle areaStyle, SeriesLineStyle lineStyle) {

        }
    }, list, dto);
    option.setSeries(null);
 
}

源碼:https://gitee.com/ten-ken/java-wheel/tree/master/ken [先找測(cè)試類TestStrategyEcharts]

微信: tianji_vip

file

本文來(lái)源于：宋文超super，專屬平臺(tái)有csdn、思否(SegmentFault)、 簡(jiǎn)書、 開源中國(guó)(oschina)，轉(zhuǎn)載請(qǐng)注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容