java后台封装echarts

最新推荐文章于 2024-03-20 10:06:04 发布
最新推荐文章于 2024-03-20 10:06:04 发布
阅读量4k 收藏 3
点赞数
分类专栏： echarts

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

总体设计原则：

1）分层，使代码结构清晰，易于维护。

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

程序框架：


后台使用说明（以仪表盘举个例子）：

JSONObject json=ChartsFactory.createRose("各专业问题",12,data);
request.setAttribute("ringJson", json);
前台代码：


<script type="text/javascript">
require.config({
        paths: { echarts: '<%=root%>/echarts'}
});
require(
        [
            'echarts',
            'echarts/chart/gauge'
        ],
        function (ec) {
          var issueChart = ec.init(document.getElementById('issueCompletionRate'));
           var issueChartOption = <%=issueCompletionRate%>;
           issueChart.setOption(issueChartOption, true);         
} ); 
 </script>
<%@ include file="/eap/analysis-common.jsp" %> 
<%
JSONObject taskCompletionRate=(JSONObject)request.getAttribute("taskCompletionRate"); 
%>
<div id=" 'issueCompletionRate“   style="height:230px;border:1px solid  #ccc;padding:10px;"></div>
图形工厂代码如下：
全套代码我已上传至我的资源http://download.csdn.net/detail/qq_33556185/9419747


package com.exception.chart.factory;
 
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import net.sf.json.JSONObject;
import com.exception.chart.charts.AreaStackOptionBean;
import com.exception.chart.charts.BarLineMashupOptionBean;
import com.exception.chart.charts.BarOptionBean;
import com.exception.chart.charts.ChinaMapOptionBean;
import com.exception.chart.charts.FunnelOptionBean;
import com.exception.chart.charts.GaugeOptionBean;
import com.exception.chart.charts.LineOptionBean;
import com.exception.chart.charts.PieOptionBean;
import com.exception.chart.charts.RoseDiagramOptionBean;
import com.exception.chart.charts.ThermometerOptionBean;
import com.exception.chart.charts.component.AreaStackChartsDataBean;
import com.exception.chart.charts.component.BarToolTipBean;
import com.exception.chart.charts.component.ChartsAreaStackSeriesBean;
import com.exception.chart.charts.component.ChartsBarDataBean;
import com.exception.chart.charts.component.ChartsBarSeriesBean;
import com.exception.chart.charts.component.ChartsChinaMapToolTipBean;
import com.exception.chart.charts.component.ChartsDataBean;
import com.exception.chart.charts.component.ChartsFunnelSeriesBean;
import com.exception.chart.charts.component.ChartsGaugeSeriesBean;
import com.exception.chart.charts.component.ChartsLineDataBean;
import com.exception.chart.charts.component.ChartsLineSeriesBean;
import com.exception.chart.charts.component.ChartsMapSeriesBean;
import com.exception.chart.charts.component.ChartsPieSeriesBean;
import com.exception.chart.charts.component.ChartsRoseSeriesBean;
import com.exception.chart.charts.component.ChartsTitleBean;
import com.exception.chart.charts.component.ChartsToolBoxBean;
import com.exception.chart.charts.component.ChartsToolTipBean;
import com.exception.chart.charts.component.DataRange;
import com.exception.chart.charts.component.LegendBean;
import com.exception.chart.charts.component.MapDataBean;
import com.exception.chart.charts.component.PieDataBean;
import com.exception.chart.charts.component.RoamController;
import com.exception.chart.charts.component.ThermometerBean;
import com.exception.chart.charts.component.ThermometerSeriesBean;
import com.exception.chart.charts.component.XAxisBean;
import com.exception.chart.charts.component.YAxisBean;
import com.exception.chart.charts.component.part.AxisLabel;
import com.exception.chart.charts.component.part.DataView;
import com.exception.chart.charts.component.part.DataZoom;
import com.exception.chart.charts.component.part.Feature;
import com.exception.chart.charts.component.part.GaugeDetail;
import com.exception.chart.charts.component.part.Label;
import com.exception.chart.charts.component.part.MagicType;
import com.exception.chart.charts.component.part.MapItemStyle;
import com.exception.chart.charts.component.part.MapItemStyleEmphasis;
import com.exception.chart.charts.component.part.MapItemStyleNormal;
import com.exception.chart.charts.component.part.MapTypeControl;
import com.exception.chart.charts.component.part.Mark;
import com.exception.chart.charts.component.part.Restore;
import com.exception.chart.charts.component.part.SaveAsImage;
import com.exception.chart.charts.component.part.TextStyle;
import com.exception.chart.charts.component.part.ThermometerBaseItemStyle;
import com.exception.chart.charts.component.part.ThermometerItemStyle;
import com.exception.chart.factory.tool.Toolkit;
 
/**
 * 创建图形工厂
 *
 *
 * @author LIBOYI
 * @date 2015-6-17
 * @version 2.0
 *
 */
public class  ChartsFactory {
    
   /**
    * 创建仪表盘
    * @return
    * @param text 仪表盘文本名称
    * @param fontSize 字体大小
    * @param value仪表盘的值
    */
   public static JSONObject createGauge(String text,int fontSize,String value){
       GaugeOptionBean option=new GaugeOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       title.setTextStyle(textStyle);
       option.setTitle(title);
       //设置工具提示
       ChartsToolTipBean tooltip=new ChartsToolTipBean();
       tooltip.setFormatter("{c}%");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean();
       option.setToolbox(toolbox);
       //设值
       List<ChartsGaugeSeriesBean> series=new ArrayList<ChartsGaugeSeriesBean>();
       ChartsGaugeSeriesBean gaugeSeries=new ChartsGaugeSeriesBean();
       GaugeDetail detail=new GaugeDetail();
       detail.setFormatter("{value}%");
       gaugeSeries.setName("");
       gaugeSeries.setDetail(detail);
       String data[]=new String[1];
       data[0]=value;
       gaugeSeries.setData(data);
       gaugeSeries.setType("gauge");
       series.add(gaugeSeries);
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 创建柱状图/柱状堆积
    * @return
    * @param text标题
    * @param fontSize字体大小
    * @param xAxisName x轴名称
    * @param yAxisName y轴名称
    * @param yAxisUnit 单位 如"%"、"℃"之类
    * @param xData x轴值
    * @param dataList数据
    */
   public static JSONObject createBar(String text,int fontSize,String xAxisName, String xData[],
          String yAxisName,String yAxisUnit,List<ChartsBarDataBean> dataList){
       String trigger="axis";
       String x="center";
       String y="top";
       boolean isShow=true;
       String formatter="{value}"+yAxisUnit;
       List<ChartsBarSeriesBean> series=new ArrayList<ChartsBarSeriesBean>();
       //拿到图例
       String legend[]=new String[dataList.size()];
       if(!Toolkit.isEmpty(dataList)&&dataList.size()>0){
           for (int i = 0; i < dataList.size(); i++) {
               legend[i]=dataList.get(i).getName();
               ChartsBarSeriesBean temp=new ChartsBarSeriesBean();
               temp.setName(dataList.get(i).getName());
               temp.setStack(dataList.get(i).getStack());
               temp.setData(dataList.get(i).getData());
               temp.setType("bar");
               series.add(temp);
        }
        ChartsBarDataBean bar=dataList.get(0);
        if(bar.getData().length==1){
            y="bottom";
            trigger="item";
        }
       }else{
               series=new ArrayList<ChartsBarSeriesBean>();
               ChartsBarSeriesBean seriesBean=new ChartsBarSeriesBean();
               seriesBean.setData(new String[]{});
               series.add(seriesBean);
       }
       BarOptionBean option =new BarOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       BarToolTipBean tooltip=new BarToolTipBean();
       tooltip.setTrigger(trigger);
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean();
       String type[]={"bar","line"};
       Feature feature=new Feature();
       feature.setMark(new Mark(true));
       feature.setDataView(new DataView(true));
       feature.setDataZoom(new DataZoom(false));
       feature.setMagicType(new MagicType(true,type));
       feature.setRestore(new Restore(true));
       feature.setSaveAsImage(new SaveAsImage(true));
       toolbox.setFeature(feature);
       toolbox.setShow(isShow);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean(x,y,legend);
       option.setLegend(legendBean);
       //设置x轴
       XAxisBean xAxis=new XAxisBean();
       xAxis.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       xAxis.setData(xData);
       option.setxAxis(xAxis);
       //设置y轴
       YAxisBean yAxis=new YAxisBean();
       AxisLabel axisLabel=new AxisLabel(formatter);
       yAxis.setAxisLabel(axisLabel);
       yAxis.setName(yAxisName);
       option.setyAxis(yAxis);
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 柱状和折线混搭图
    * @param text标题
    * @param fontSize字体大小
    * @param xAxisName x轴名称
    * @param y1AxisName y1轴名称
    * @param y2AxisName y2轴名称
    * @param xData x轴值
    * @param series数据
    * 柱状图 设置name和data两个属性，支持堆积，若堆积设置stack
    * 折线图除设置name和data外，还需设置type为line
    * @param y1Unit,y2Unit 单位 如"%"、"℃"之类
    */
   @Deprecated  
   public static JSONObject createMashupOne(String text,int fontSize,String xAxisName, String xData[],
              String y1AxisName,String y1Unit,String y2AxisName,String y2Unit,List<ChartsBarSeriesBean> series){
       BarLineMashupOptionBean option=new BarLineMashupOptionBean();
       String y1Formatter="{value}"+y1Unit;
       String y2Formatter="{value}"+y2Unit;
       //拿到图例
       String legend[]=new String[series.size()];
       if(!Toolkit.isEmpty(series)&&series.size()>0){
           for (int i = 0; i < series.size(); i++) {
               legend[i]=series.get(i).getName();
        }
       }else{
           series=new ArrayList<ChartsBarSeriesBean>();
           ChartsBarSeriesBean seriesBean=new ChartsBarSeriesBean();
           seriesBean.setData(new String[]{});
           series.add(seriesBean);
       }
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       BarToolTipBean tooltip=new BarToolTipBean();
       tooltip.setTrigger("axis");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={"bar","line"};
       Feature feature=new Feature();
       feature.setMark(new Mark(true));
       feature.setDataView(new DataView(true));
       feature.setDataZoom(new DataZoom(false));
       feature.setMagicType(new MagicType(true,type));
       feature.setRestore(new Restore(true));
       feature.setSaveAsImage(new SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean("center","top",legend);
       option.setLegend(legendBean);
       //设置x轴
       XAxisBean xAxis=new XAxisBean();
       xAxis.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       xAxis.setData(xData);
       option.setxAxis(xAxis);
       //设置y轴
       List<YAxisBean> yAxis=new ArrayList<YAxisBean>();
       YAxisBean y1=new YAxisBean();
       y1.setName(y1AxisName);
       AxisLabel y1AxisLabel=new AxisLabel(y1Formatter);
       y1.setAxisLabel(y1AxisLabel);
       yAxis.add(y1);
       YAxisBean y2=new YAxisBean();
       y2.setName(y2AxisName);
       AxisLabel y2AxisLabel=new AxisLabel(y2Formatter);
       y2.setAxisLabel(y2AxisLabel);
       yAxis.add(y2);
       option.setyAxis(yAxis);
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 柱状和折线混搭图
    * @param text标题
    * @param fontSize字体大小
    * @param xAxisName x轴名称
    * @param y1AxisName y1轴名称
    * @param y2AxisName y2轴名称
    * @param xData x轴值
    * @param barList 柱状图数据
    * @param lineList 折线图数据
    * 柱状图 设置name和data两个属性，支持堆积，若堆积设置stack
    * 折线图除设置name和data外，还需设置type为line
    * @param y1Unit,y2Unit 单位 如"%"、"℃"之类
    */
   public static JSONObject createMashupOne2(String text,int fontSize,String xAxisName, String xData[],
              String y1AxisName,String y1Unit,String y2AxisName,String y2Unit,List<ChartsBarDataBean> barList,List<ChartsLineDataBean> lineList){
       List<ChartsBarSeriesBean> series=new ArrayList<ChartsBarSeriesBean>();
       if(!Toolkit.isEmpty(barList)&&barList.size()>0){
           for (ChartsBarDataBean barDataBean : barList) {
               ChartsBarSeriesBean barSeries=new ChartsBarSeriesBean();
               barSeries.setData(barDataBean.getData());
               barSeries.setName(barDataBean.getName());
               barSeries.setStack(barDataBean.getStack());
               series.add(barSeries);
           }
       }
       if(!Toolkit.isEmpty(lineList)&&lineList.size()>0){
           for (ChartsLineDataBean lineDataBean : lineList) {
               ChartsBarSeriesBean barSeries=new ChartsBarSeriesBean();
               barSeries.setData(lineDataBean.getData());
               barSeries.setName(lineDataBean.getName());
               barSeries.setType("line");
               barSeries.setyAxisIndex(1);
               series.add(barSeries);
           }
       }
    
       BarLineMashupOptionBean option=new BarLineMashupOptionBean();
       String y1Formatter="{value}"+y1Unit;
       String y2Formatter="{value}"+y2Unit;
       //拿到图例
       String legend[]=new String[series.size()];
       if(!Toolkit.isEmpty(series)&&series.size()>0){
           for (int i = 0; i < series.size(); i++) {
               legend[i]=series.get(i).getName();
        }
       }else{
           series=new ArrayList<ChartsBarSeriesBean>();
           ChartsBarSeriesBean seriesBean=new ChartsBarSeriesBean();
           seriesBean.setData(new String[]{});
           series.add(seriesBean);
       }
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       BarToolTipBean tooltip=new BarToolTipBean();
       tooltip.setTrigger("axis");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={"bar","line"};
       Feature feature=new Feature();
       feature.setMark(new Mark(true));
       feature.setDataView(new DataView(true));
       feature.setDataZoom(new DataZoom(false));
       feature.setMagicType(new MagicType(true,type));
       feature.setRestore(new Restore(true));
       feature.setSaveAsImage(new SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean("center","top",legend);
       option.setLegend(legendBean);
       //设置x轴
       XAxisBean xAxis=new XAxisBean();
       xAxis.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       xAxis.setData(xData);
       option.setxAxis(xAxis);
       //设置y轴
       List<YAxisBean> yAxis=new ArrayList<YAxisBean>();
       YAxisBean y1=new YAxisBean();
       y1.setName(y1AxisName);
       AxisLabel y1AxisLabel=new AxisLabel(y1Formatter);
       y1.setAxisLabel(y1AxisLabel);
       yAxis.add(y1);
       YAxisBean y2=new YAxisBean();
       y2.setName(y2AxisName);
       AxisLabel y2AxisLabel=new AxisLabel(y2Formatter);
       y2.setAxisLabel(y2AxisLabel);
       yAxis.add(y2);
       option.setyAxis(yAxis);
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 创建折线图
    * @return
    * @param text标题
    * @param fontSize字体大小
    * @param xAxisName x轴名称
    * @param yAxisName y轴名称
    * @param xData x轴值
    * @param dataList值
    * @param unit单位 如"%"、"℃"之类
    */
   public static JSONObject createLine(String text,int fontSize,String xAxisName,String xData[],
          String yAxisName,String unit,List<ChartsLineDataBean> dataList){
       List<ChartsLineSeriesBean> series=new ArrayList<ChartsLineSeriesBean>();
       //拿到图例
       String legend[]=new String[dataList.size()];
       if(!Toolkit.isEmpty(dataList)&&dataList.size()>0){
           for (int i = 0; i < dataList.size(); i++) {
               legend[i]=dataList.get(i).getName();
               ChartsLineSeriesBean temp=new ChartsLineSeriesBean();
               temp.setName(dataList.get(i).getName());
               temp.setData(dataList.get(i).getData());
               temp.setType("line");
               series.add(temp);
        }
       }else{
           series=new ArrayList<ChartsLineSeriesBean>();
           ChartsLineSeriesBean seriesBean=new ChartsLineSeriesBean();
           seriesBean.setData(new String[]{});
           series.add(seriesBean);
       }
     
       LineOptionBean option =new LineOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       BarToolTipBean tooltip=new BarToolTipBean("axis");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={"line","bar"};
       Feature feature=new Feature();
       feature.setMark(new Mark(true));
       feature.setDataView(new DataView(true));
       feature.setDataZoom(new DataZoom(false));
       feature.setMagicType(new MagicType(true,type));
       feature.setRestore(new Restore(true));
       feature.setSaveAsImage(new SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean("center","top",legend);
       option.setLegend(legendBean);
       //设置x轴
       XAxisBean xAxis=new XAxisBean();
       xAxis.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       xAxis.setData(xData);
       option.setxAxis(xAxis);
       //设置y轴
       YAxisBean yAxis=new YAxisBean();
       yAxis.setName(yAxisName);
       String formatter="{value} "+unit;
       AxisLabel axisLabel=new AxisLabel(formatter);
       yAxis.setAxisLabel(axisLabel);
       option.setyAxis(yAxis);
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   
   /**
    * 创建饼图
    * @return
    * @param text 标题
    * @param fontSize字体大小
    * @param x 图例水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right'
    * @param y 图例垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
    * @param radius半径 格式50%
    * @param data饼图数据
    * 
    */
   public static JSONObject createPie(String text,int fontSize,String x,String y,
        String radius,List<PieDataBean> data){
       String radiusArray[]=new String[2];
       radiusArray[0]="0%";
       radiusArray[1]=radius;
       JSONObject  jsonObject = createPieAndRingJson(text,fontSize,x,y,radiusArray,data);
       return jsonObject;
   }
   /**
    * 创建环形图
    * @return
    * @param text 标题
    * @param fontSize字体大小
    * @param x 图例水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right'
    * @param y 图例垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
    * @param innerRadius内半径，格式20%
    * @param outerRadius外半径，格式30%
    * @param data环形图数据
    */
   public static JSONObject createRing(String text,int fontSize,String x,String y,
        String innerRadius,String outerRadius,List<PieDataBean> data){
       String radiusArray[]=new String[2];
       radiusArray[0]=innerRadius;
       radiusArray[1]=outerRadius;
       JSONObject  jsonObject = createPieAndRingJson(text,fontSize,x,y,radiusArray,data);
       return jsonObject;
   }
   /**
    * 饼图和环形图生成json
    * @param text 标题
    * @param fontSize字体大小
    * @param x 图例水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right'
    * @param y 图例垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
    * @param radiusArray[]半径数组，[内半径，外半径] 格式{"50%", "70%"}
    */
   private static JSONObject createPieAndRingJson(String text,int fontSize,String x,String y,
            String radiusArray[],List<PieDataBean> data){
       PieOptionBean option =new PieOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       ChartsToolTipBean tooltip=new ChartsToolTipBean();
       tooltip.setFormatter("{a} <br/>{b} : {c} ({d}%)");
       tooltip.setTrigger("item");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={"pie", "funnel"};
       Feature feature=new Feature(new Mark(false),new DataView(true),
                new MagicType(true,type),new  Restore(true),new  SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean(x,y);
       String[] legendData=new String[data.size()];
       if(!Toolkit.isEmpty(data)&&data.size()>0){
           for (int i = 0; i < data.size(); i++) {
               legendData[i]=data.get(i).getName();
        }
       }
       legendBean.setData(legendData);
       option.setLegend(legendBean);
       List<ChartsPieSeriesBean> series=new ArrayList<ChartsPieSeriesBean>();
       ChartsPieSeriesBean ringSeries=new ChartsPieSeriesBean();
       
       //数据
       ringSeries.setName(text);
       ringSeries.setType("pie");
       ringSeries.setRadius(radiusArray);
       ringSeries.setData(data);
       series.add(ringSeries);
       option.setSeries(series);
       return JSONObject.fromObject(option);
   }
 
   /**
    * 标准面积图/堆积面积图
    * @param text 标题
    * @param fontSize
    * @param xAxisName x轴名称
    * @param yAxisName y轴名称
    * @param xData x轴值
    * @param unit单位 如"%"、"℃"之类
    * @param dataList数据
    * @return
    */
   public static JSONObject createAreaStack(String text,int fontSize,String xAxisName,String xData[],
              String yAxisName,String unit,List<AreaStackChartsDataBean> dataList){
       AreaStackOptionBean option=new AreaStackOptionBean();
       List<ChartsAreaStackSeriesBean> series=new ArrayList<ChartsAreaStackSeriesBean>();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置图例
       LegendBean legendBean=new LegendBean();
       String[] legendData=new String[dataList.size()];
       if(!Toolkit.isEmpty(dataList)&&dataList.size()>0){
           for (int i = 0; i < dataList.size(); i++) {
               legendData[i]=dataList.get(i).getName();
               ChartsAreaStackSeriesBean temp=new ChartsAreaStackSeriesBean();
               temp.setData(dataList.get(i).getData());
               temp.setName(dataList.get(i).getName());
               temp.setStack(dataList.get(i).getStack());
               temp.setType("line");
               series.add(temp);
               
        }
       }else{
           ChartsAreaStackSeriesBean seriesBean=new ChartsAreaStackSeriesBean();
           seriesBean.setData(new String[]{});
           series.add(seriesBean);
       }
       legendBean.setData(legendData);
       option.setLegend(legendBean);
       //设置x轴
       List<XAxisBean> xAxis=new ArrayList<XAxisBean>();
       XAxisBean x1=new XAxisBean(true);
       x1.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       x1.setData(xData);
       xAxis.add(x1);
       option.setxAxis(xAxis);
       //设置y轴
       List<YAxisBean> yAxis=new ArrayList<YAxisBean>();
       YAxisBean y1=new YAxisBean();
       y1.setName(yAxisName);
       String formatter="{value} "+unit;
       AxisLabel axisLabel=new AxisLabel(formatter);
       y1.setAxisLabel(axisLabel);
       yAxis.add(y1);
       option.setyAxis(yAxis);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean();
       Feature feature=new Feature(new Mark(false),new DataZoom(false),new DataView(true),
                new MagicType(true,new String[]{"line","bar","stack","tiled"}),new  Restore(true),new SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   
   /**
    * 温度计式图表
    * @param text 标题
    * @param fontSize
    * @param xAxisName x轴名称
    * @param yAxisName y轴名称
    * @param xData x轴值
    * @param unit单位 如"%"、"℃"之类
    * @param thermometerList数据
    * @return
    */
   public static JSONObject createTermometer(String text,int fontSize,String xAxisName,String xData[],
              String yAxisName,String unit,List<ThermometerBean> thermometerList){
       ThermometerOptionBean option=new ThermometerOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean();
       Feature feature=new Feature(new Mark(true),new DataZoom(false),new DataView(true),
                new MagicType(false),new Restore(true),new SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean();
       String[] legendData=new String[thermometerList.size()];
       if(!Toolkit.isEmpty(thermometerList)&&thermometerList.size()>0){
           for (int i = 0; i < thermometerList.size(); i++) {
               legendData[i]=thermometerList.get(i).getName();
        }
       }
       legendBean.setSelectedMode(true);
       legendBean.setData(legendData);
       option.setLegend(legendBean);
       //设置x轴
       List<XAxisBean> xAxis=new ArrayList<XAxisBean>();
       XAxisBean x1=new XAxisBean(true);
       x1.setName(xAxisName);
       if(xData==null){
           xData=new String[1];
           xData[0]="";
       }
       x1.setData(xData);
       xAxis.add(x1);
       option.setxAxis(xAxis);
       //设置y轴
       List<YAxisBean> yAxis=new ArrayList<YAxisBean>();
       YAxisBean y1=new YAxisBean();
       y1.setName(yAxisName);
       String formatter="{value} "+unit;
       AxisLabel axisLabel=new AxisLabel(formatter);
       y1.setAxisLabel(axisLabel);
       yAxis.add(y1);
       option.setyAxis(yAxis);
       List<ThermometerSeriesBean> series=new ArrayList<ThermometerSeriesBean>();
       if(!Toolkit.isEmpty(thermometerList)&&thermometerList.size()>1){
           ThermometerBean thermometer= thermometerList.get(0);
           ThermometerSeriesBean temp=new ThermometerSeriesBean();
           temp.setName(thermometer.getName());
           temp.setData(thermometer.getData());
           temp.setStack("stack");
           ThermometerItemStyle itemStyle=new ThermometerItemStyle(new ThermometerBaseItemStyle("tomato",
                   new Label("insideTop",new TextStyle("#fff"))));
           temp.setItemStyle(itemStyle);
           temp.setType("bar");
           series.add(temp);
           
           ThermometerBean thermometerBean= thermometerList.get(1);
           ThermometerSeriesBean tempBean=new ThermometerSeriesBean();
           tempBean.setName(thermometerBean.getName());
           tempBean.setData(thermometerBean.getData());
           tempBean.setStack("stack");
           tempBean.setType("bar");
           ThermometerItemStyle itemStyleBean=new ThermometerItemStyle(new ThermometerBaseItemStyle("#fff",
                   new Label("top",new TextStyle("tomato"))));
           tempBean.setItemStyle(itemStyleBean);
           series.add(tempBean);
       }
       //数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 创建漏斗图
    * @return
    * @param text 标题
    * @param fontSize 字体大小
    * @param dataList漏斗图的值
    */
   public static JSONObject createFunnel(String text,int fontSize,List<ChartsDataBean> dataList){
       FunnelOptionBean option=new FunnelOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       title.setTextStyle(textStyle);
       option.setTitle(title);
       //设置图例
       LegendBean legendBean=new LegendBean();
       String[] legendData=new String[dataList.size()];
       if(!Toolkit.isEmpty(dataList)&&dataList.size()>0){
           for (int i = 0; i < dataList.size(); i++) {
               legendData[i]=dataList.get(i).getName();
        }
       }
     
       legendBean.setX("center");
       legendBean.setY("bottom"); 
       legendBean.setSelectedMode(true);
       legendBean.setData(legendData);
       option.setLegend(legendBean);
       //设置工具提示
       ChartsToolTipBean tooltip=new ChartsToolTipBean("item","{a} <br/>{b} : {c}");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true,new Feature(new Mark(false),
               new DataView(true),new MagicType(false),new Restore(true),new SaveAsImage(true)));
       toolbox.setShow(true);
       option.setToolbox(toolbox);
       //数据
       List<ChartsFunnelSeriesBean> series=new ArrayList<ChartsFunnelSeriesBean>();
       ChartsFunnelSeriesBean funnelSeries=new ChartsFunnelSeriesBean();
       funnelSeries.setName(text);
       funnelSeries.setData(dataList);
       funnelSeries.setType("funnel");
       series.add(funnelSeries);
       option.setSeries(series);
       JSONObject  jsonObject =JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 创建玫瑰图
    * @return
    * @param text标题
    * @param fontSize字体大小
    * 
    */
   public static JSONObject createRose(String text,int fontSize,
        List<PieDataBean> data){
       RoseDiagramOptionBean option =new RoseDiagramOptionBean();
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       ChartsToolTipBean tooltip=new ChartsToolTipBean();
       tooltip.setFormatter("{a} <br/>{b} : {c} ({d}%)");
       tooltip.setTrigger("item");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={"pie", "funnel"};
       Feature feature=new Feature(new Mark(false),new DataView(true),
                new MagicType(true,type),new  Restore(true),new  SaveAsImage(true));
       toolbox.setFeature(feature);
       option.setToolbox(toolbox);
       //设置图例
       LegendBean legendBean=new LegendBean("center","bottom");
       String[] legendData=new String[data.size()];
       if(!Toolkit.isEmpty(data)&&data.size()>0){
           for (int i = 0; i < data.size(); i++) {
               legendData[i]=data.get(i).getName();
        }
       }
       legendBean.setData(legendData);
       option.setLegend(legendBean);
       List<ChartsRoseSeriesBean> series=new ArrayList<ChartsRoseSeriesBean>();
       ChartsRoseSeriesBean roseSeries=new ChartsRoseSeriesBean();
       //数据
       String radius[]={"20","110"};
       roseSeries.setName(text);
       roseSeries.setType("pie");
       roseSeries.setRadius(radius);
       roseSeries.setRoseType("area");
       roseSeries.setData(data);
       series.add(roseSeries);
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
   /**
    * 创建中国地图
    * @return
    * @param text柱状图标题
    * @param fontSize字体大小
    * 
    */
   public static JSONObject createChinaMap(String text,int fontSize,List<MapDataBean> data){
       ChinaMapOptionBean option =new ChinaMapOptionBean();
       List<ChartsMapSeriesBean> series=new ArrayList<ChartsMapSeriesBean>();
       String[] legendData=new String[data.size()];
       List<ChartsDataBean> valueList=new ArrayList<ChartsDataBean>(); 
       int dataRangeMax=0;
       if(!Toolkit.isEmpty(data)&&data.size()>0){
           for (int i = 0; i < data.size(); i++) {
               legendData[i]=data.get(i).getName();
               ChartsMapSeriesBean seriesBean=new ChartsMapSeriesBean();
               seriesBean.setMapType("china");
               seriesBean.setType("map");
               seriesBean.setName(data.get(i).getName());
               seriesBean.setData(data.get(i).getData());
               valueList.addAll(data.get(i).getData());
               MapItemStyle itemStyle=new MapItemStyle();
               MapItemStyleNormal normal=new MapItemStyleNormal();
               MapItemStyleEmphasis emphasis=new MapItemStyleEmphasis();
               itemStyle.setNormal(normal);
               itemStyle.setEmphasis(emphasis);
               seriesBean.setItemStyle(itemStyle);
               series.add(seriesBean);
           }
           int valueArray[]=new int[valueList.size()];
           for (int i = 0; i < valueList.size(); i++) {
               valueArray[i]=Integer.parseInt(valueList.get(i).getValue());
           }
           Arrays.sort(valueArray);
           dataRangeMax=valueArray[valueArray.length-1];
       }
       //设置标题
       ChartsTitleBean title=new ChartsTitleBean();
       title.setText(text);
       title.setX("center");
       TextStyle textStyle=new TextStyle();
       textStyle.setFontSize(fontSize);
       option.setTitle(title);
       //设置工具提示
       ChartsChinaMapToolTipBean tooltip=new ChartsChinaMapToolTipBean();
       tooltip.setTrigger("item");
       option.setTooltip(tooltip);
       //设置工具栏
       ChartsToolBoxBean toolbox=new ChartsToolBoxBean(true);
       String type[]={""};
       Feature feature=new Feature(new Mark(true),new DataView(true),
                new MagicType(false,type),new  Restore(true),new  SaveAsImage(true));
       toolbox.setFeature(feature);
       toolbox.setX("right");
       toolbox.setY("center");
       toolbox.setOrient("vertical");
       option.setToolbox(toolbox);
       //值域漫游
       DataRange dataRange=new DataRange();
       dataRange.setX("left");
       dataRange.setY("bottom");
       dataRange.setCalculable(true);
       dataRange.setMin(0);
       dataRange.setMax(dataRangeMax);
       option.setDataRange(dataRange);
       //指定漫游组件可控地图类型
       RoamController roamController=new RoamController();
       roamController.setShow(true);
       roamController.setX("right");
       MapTypeControl mapTypeControl=new MapTypeControl();
       mapTypeControl.setChina(true);
       roamController.setMapTypeControl(mapTypeControl);
       option.setRoamController(roamController);
       //设置图例
       LegendBean legend=new LegendBean();
       legend.setOrient("vertical");
       legend.setX("left");
       legend.setData(legendData);
       option.setLegend(legend);
       //设置数据
       option.setSeries(series);
       JSONObject  jsonObject = JSONObject.fromObject(option);
       return jsonObject;
   }
}

--------------------- 
转自：https://blog.csdn.net/qq_33556185/article/details/50612257 

SuperGirl2020
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java Echarts的实战（Echarts图表数据封装）
weixin_42444325的博客
07-23 5015
java Echarts的实战，对Echarts图表数据进行封装返回，建议先看看官网： echarts官网 一 导包 <!-- https://mvnrepository.com/artifact/com.github.abel533/ECharts --> <dependency> <groupId>com.github.abel533</groupId> <artifactId>ECharts</artifac
java图表库_Java版ECharts图表库ECharts-Java
weixin_35712571的博客
02-25 1535
ECharts是一款功能非常强大的JavaScript图表库，本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构 Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的 所有图表。支持所有的Style类，如AreaStyl...
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
https://gitee.com/micai-code
06-13 3629
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
Echarts组件初步封装
往事随风
03-20 920
Echarts组件初步封装
Java调用Echarts3简单封装及示例
06-07
为方便在开发中使用Echart3输出图形，对其进行了简单的封装。
java-echarts封装
05-09
这里面是java对echarts的封装，生成gson格式字符串，js可以直接获取到gson字符串进行解析，展示
echarts-java.zip
11-19
用java封装了echarts。只要一行代码就可以得到option对象，大大减少化了后台的代码量和前台的代码量，同时也降低了开发难度，不需要了解太多echarts的知识，便可以以我封装出的组件做出图表。由于时间关系，暂时只封装了常用到的柱状图、柱状堆积图、折线图、面积图、柱状折线混搭图、饼图、环形图、玫瑰图、仪表盘、漏斗图等。代码里有示例。
java——插件echarts数据可视化图表库
weixin_42858422的博客
09-17 7966
插件echarts数据可视化图表库一、使用idea创建javaWeb工程二、下载echarts导入js文件三、使用echarts。————————创作不易，如觉不错，随手三连点赞，收藏，关注，谢谢~~ 一、使用idea创建javaWeb工程 创建工程，因为我这里已经配置好JDK跟Tomcat服务器了，就直接选择了。 下一步 下一步 项目创建完成了只后，我们创建两个文件夹，分别用来存放编译后的文件，跟jar包 接着，我们对着两个包进行配置，首先配置classes，选择classes的位置 下一步，接
Java生成Echarts表图的两种方案
可乐的博客
05-15 5794
Java生成Echarts图表
一款基于JAVA开发的Echarts后台生成框架
热门推荐
夜郎King的博客
07-12 1万+
本文分享一款基于Java开发的Echarts后台生成框架，支持自动生成Echarts的参数，通过生成Echarts饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。
java代码实现echarts折线图_Echarts的使用（曲线图）
weixin_29920889的博客
02-23 4389
写在前面：最近项目中用到了Echarts做趋势图，博主通过万能的度娘研究了一下。Echarts字段的使用基本都写在代码注释里了，这是博主的第一篇博客，如果哪里写的不好望大家见谅，最后希望本篇博客对大家有一些帮助。1. 下载Echarts.js包使用Echarts需要先下载Echarts.js包，大家可以从Echarts官网下载，或者可以从博主提供的网址下载：echarts.min.js把链接中的j...
echarts后台封装（java）
12-12
echarts后台封装，采用java封装后台，直接返回给前台option。
echartsJava后台封装数据
11-07
用Java在后台封装echarts显示的数据，平台是springMVC
echarts对应后台java类的工具jar
08-13
echarts对应option封装，直接在后台封装好数据结构，丢到前台可实现，显示方式开里面的说明
Echarts-java资源工具类
06-16
Echarts.js, Echarts-Java3.0.jar, 自封装EchartsUtil
行业分析模板--初学者必备gl.ppt
05-03
行业分析模板--初学者必备gl.ppt
基于微信小程序端的视频社交软件 + 后台管理系统（仿抖音）.zip
05-03
简介随着微信的普及，小视频的流行，我们设计一款基于微信小程序端的视频社交软件 + 后台管理系统作为自己专科毕业设计----秀视频-微信小程序端（短视频社交小程序，用户可以在小程序上发布自己的短视频 并且经过我们的平台加入滤镜或者背景音乐制作出独具特色的短视频。并实现了点赞、评论、下载、分享、转发等功能的小程序）---的后台管理系统，主要实现了人员的管理，短视频的管理，背景音乐的管理，登陆注册，权限验证，单点登陆等等。 从需求分析，功能设计，前端到后台，再到数据库的设计。一点点的积累，一点点的完善，预计小程序端+后台管理系统开发周期一个月(每天更新)。 对一个开发人员来说，如果想单纯的做出这些功能，其实并不难。 难的是对于这些功能细节的把控，项目整体的友好程度，用户的体验效果；对并发的考虑，对恶意请求，对流畅度这些细节的考虑等等。
基于matlab实现麦克风阵列的声源定位，四元十字阵的matlab仿真.rar
05-03
基于matlab实现麦克风阵列的声源定位，四元十字阵的matlab仿真.rar
某钢厂钢铁废水处理图纸.zip
最新发布
05-03
污水处理
vue如何封装echarts
09-13
在Vue中封装Echarts有多种方式。一种方式是在main.js中引入Echarts并将其挂载到Vue的原型上，这样在任何组件中都可以通过this.$echarts来使用Echarts[1]。另一种方式是按需引入Echarts的模块，只引入需要使用的功能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值