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

database

一、研究下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](https://my.oschina.net/arthor) swc

*

* [@date](https://my.oschina.net/u/2504391) 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<EchartBaseSeries> series;

//注意

//Charts 4 开始支持了 数据集(dataset)组件用于单独的数据集声明,

// 从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

private EchartDataset dataset;

//省略get set方法

}

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

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

*

*

*

******************************************************************************

*

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

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](https://my.oschina.net/arthor) swc

*

* [@date](https://my.oschina.net/u/2504391) 2020/7/3 0003 下午 13=54

*/

public class EchartsTitle {

private String id ;

//是否显示标题组件

private boolean show= true ;

//主标题文本,支持使用

换行。

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

<T> EchartsOption createOption(IEchartSeries iEchartSeries, List<T> list, HandEchartsDto handEchartsDto);

//会创建多个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](https://my.oschina.net/arthor) 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;

}

//会创建多个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);

}

}

四 、部分策略内容展示【这里是把策略封装在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.*;

/**

* <ul>

* <li>Title: BaseStrategy</li>

* <li>Description: TODO </li>

* </ul>

*

* @author swc

*

* @date 2020/7/3 0003 下午 15:57

*/

public class BaseStrategy {

//针对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);

//设置单个数据 样式

if(!EmptyUtils.isNullOrEmpty(iEchartSeries)){

iEchartSeries.setSeriesDataProp(data,new SeriesLabel(),new SeriesItemStyle(),new SeriesAreaStyle(),new SeriesLineStyle());

}

saveList[ind].add(data);

}

}

//多个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){

//实际换成日志打印

e.printStackTrace();

}

return option;

}

//针对漏斗图、仪器图 和饼图图像

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

//设置单个数据 样式

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;

}

/**

* 功能描述: 创建热力图的option

* @param iEchartSeries 接口

* @param t 对象

// * @param titleFieldName

// * @param subFieldName 对象里面需要处理的list数据

// * @param xDimension 维度x轴

// * @param yDimension 维度y

// * @param xAxisDataName x轴需要展示的信息

// * @param yAxisDataName y轴需要展示的信息

// * @param showValField 需要展示数据的列

* @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>();

//标题

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>();

//数据值---单个数据

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出现x-y维度

if("cartesian2d".equals(coordinateSystem)){

seriesDataValue.add(xDim);

seriesDataValue.add(yDim);

}

//coordinateSystem为calendar series里面的data-[value]为时间+某项值的数组

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

//设置值

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 对象

// * @param titleFieldName

// * @param subFieldName 对象里面需要处理的list数据

// * @param xDimension 维度x轴

// * @param yDimension 维度y

// * @param xAxisDataName x轴需要展示的信息

// * @param yAxisDataName y轴需要展示的信息

// * @param showValField 需要展示数据的列

* @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 默认为 多个[option]热力图

if("cartesian2d".equalsIgnoreCase(coordinateSystem)){

optionList.add(createHeatMapOption(iEchartSeries,list.get(i),handEchartsDto));

}

//如果coordinateSystem 是 calendar 默认为 日历 则是一个option的热力图 series的值为多个 而不是一个

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;

}

//公告的设置多个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]);

//设置整体样式[如一条折线或条状图的样式]

if (!EmptyUtils.isNullOrEmpty(iEchartSeries)) {

iEchartSeries.setSeriesDetailProp(echartBaseSeries, new SeriesLabel(), new SeriesItemStyle(), new SeriesAreaStyle(), new SeriesLineStyle());

}

mulseries.add(echartBaseSeries);

}

}

}

五、为了方便 最后写了工具类【EChartsNewUtil】 把策略调用进行封装

注:1.这里主要看有注释的方法 因为参数是最全的 2.关于IEchartSeries ,EchartsStrategy 这两类,IEchartSeries 是针对series的数据处理 或添加修改样式(毕竟每个公司 /每个系统业务多多少少会有些不同) ,EchartsStrategy 这个是自定义你自己业务需求的策略(需要继承EchartsStrategy ,这个完全是重新定义这个方法 IEchartSeries 再次不起作用 除非你自动代码回调到它)

5.1 HandEchartsDto是封装的参数,用于反射数据源的属性或处理部分业务

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

*

*

*

******************************************************************************

*

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

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 {

// 该系列使用的坐标系,可选:

// "cartesian2d"

// 使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。

// "geo"

// 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。

// ‘calendar’

// 使用日历坐标系

private String coordinateSystem ="cartesian2d";

//标题[主-列名]

private String titleFieldName;

//子对象的属性名[列名]

private String subFieldName;

//维度x轴[列名]

private String xDimension;

//维度y轴[列名]

private String yDimension;

//x轴需要展示的信息[列名]

private String xAxisDataName;

//y轴需要展示的信息[列名]

private String yAxisDataName;

//需要展示数据的列的属性名[时间列]

private String showDateField;

//需要展示数据的列的属性名[列名]

private String showValField;

//使用的日历坐标系的 index,在单个图表实例中存在多个日历坐标系的时候有用。

private int calendarIndex;

//legend的值

private Object[] legends;

//一般为legend 一一对应的属性项的值

private Object[] fields;

//一般为fields 一一对应的列的 单个serie的data里面的value值 一般为数组

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 外部接口 用于重写参数 或 样式等

* @param list 数据源

* @param handEchartsDto 需要处理的相应字段【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 外部接口 用于重写参数 或 样式等

* @param list 数据源

* @param handEchartsDto 需要处理的相应字段【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);

}

}

六、测试数据和测试该工具类

部分代码

//柱状图 折线图

@Test

public void barOrLine()throws Exception{

String type=EChartsUtil.LINE;//BAR

List<EchartsEntity> list= getData();

Object[] legends ={"总金额","实付金额"};

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 [先找测试类TestStrategyEcharts]

微信: tianji_vip

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

以上是 手把手教你用策略模式写echarts的配置项option 的全部内容, 来源链接: utcz.com/z/535015.html

回到顶部