手把手教你用策略模式 写echarts的配置项option

前言：策略模式和适配器模式很像   但前者策略的接口和相关类会暴露出来，并且每个策略的“计算内容”都不同【常用于计算】。

 

一、研究下echarts官网的重要配置

  1.1 常用项主要有title  legend xAxis yAxis legend dataset  series  textStyle 如下图所示

 

 

二、建立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 {
    //标题
    private EchartsTitle title;

    //图例组件。
    //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
    private EchartsLegend legend;

    //直角坐标系 grid 中的 x 轴，
    private EchartsXYAxis xAxis;

    //直角坐标系 grid 中的 y 轴，[x轴和y轴 属性是一样的]
    private EchartsXYAxis yAxis;

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

    //全局的字体样式。
    private EchartsTextStyle textStyle;

    //系列列表。每个系列通过 type 决定自己的图表类型
    private List series;

    //注意
    //Charts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，
    // 从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
    private EchartDataset dataset;

    //省略get set方法

}

2.1 以title 为例子 写相关 的java类EchartsTitle 

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

/**
 * 

 * 
Title= EchartsTitle
 * 
Description= TODO 
 * 
Copyright= Copyright (c) 2018
 * 
Company= http=//www.jiangqiaotech.com/
 * 
 *
 * @author swc
 *
 * @date 2020/7/3 0003 下午 13=54
 */
public class EchartsTitle {

    private String id  ;

    //是否显示标题组件
    private boolean show= true ;

    //主标题文本，支持使用 \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方法
}

其他相关类在此不做赘述

 

这里简单说一下 series 使用基类【EchartBaseSeries】 其他如饼图 折线图等的series都是集成EchartBaseSeries

 

三、编写策略类【策略模式】

 

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

三是工厂类将策略注入 做到匹配不同的类型的策略

 

3.1.1 策略接口 【EchartsStrategy】

public interface EchartsStrategy {
//    //创建option
     EchartsOption createOption(IEchartSeries iEchartSeries, List list, HandEchartsDto handEchartsDto);

    //会创建多个option
    List createMulOption(IEchartSeries iEchartSeries, List 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;

/**
 * 

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

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


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

    //会创建多个option
    public  List createMulOption(IEchartSeries iEchartSeries, List 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;

/**
 * 

 * 
Title: EchartsStrategyFactory
 * 
Description: TODO 
 * 
Copyright: Copyright (c) 2018
 * 
微信:tianji_vip
 * 
 *
 * @author swc
 *
 * @date 2020/7/3 0003 下午 15:07
 */
public class EchartsStrategyFactory {

    public  static Map hashMap;

    static {
        hashMap = new HashMap();
        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);
    }
}

四 、部分策略内容展示【这里是把策略封装在BaseStrategy里面 作为公共部分】

BaseStrategy的相关方法

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.*;

/**
 * 

 * 
Title: BaseStrategy
 * 
Description: TODO 
 * 
 *
 * @author swc
 *
 * @date 2020/7/3 0003 下午 15:57
 */
public class BaseStrategy {

    //针对line和bar图像
    public  EchartsOption createOptionForLineAndBar(IEchartSeries iEchartSeries,Class seriesClass, List list, HandEchartsDto handEchartsDto){
        String xyAxisName = handEchartsDto.getxAxisDataName();

        Object[] legends = handEchartsDto.getLegends();

        Object[] fields =  handEchartsDto.getFields();

        List[] saveList = handEchartsDto.getSaveList();

        EchartsOption option =new EchartsOption();
        List