【echarts】echarts开发流程详解

最新推荐文章于 2024-06-28 18:13:57 发布

May的博客

最新推荐文章于 2024-06-28 18:13:57 发布

阅读量2.6k

点赞数 2

分类专栏： Web前端文章标签： echarts开发折线图

本文链接：https://blog.csdn.net/lmb55/article/details/50529222

版权

本文详细介绍了使用Echarts进行图表开发的流程。首先定义EchartsOptions和EchartsSeries类封装数据，然后后台查询数据并按照POJO类格式封装，最后在前台加载数据绘制折线图。以服务器监控应用并发数为例，具体步骤包括前端配置请求URL，后台处理请求并调用业务逻辑层，业务层查询数据并利用EchartsDataUtil进行数据格式转换，最终在前端通过Echarts加载并展示图表。此外，还提及了带时间轴的折线图以及饼状图、柱状图和地图等其他类型图表的类似实现方式。

摘要由CSDN通过智能技术生成

首先是封装echarts option和echarts series的两个POJO类：

EchartsOptions.java

package com.hollycrm.hollyuniproxy.opration.svcmonitor.entities;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 *  echarts图表封装options数据的POJO类
 * @author lmb_
 *
 */
public class EchartsOptions {

    public List<String> legend = new ArrayList<String>();//图例
    public List<String> category = new ArrayList<String>();//横坐标  
    public List<List<String>> categoryList = new ArrayList<List<String>>();//横坐标
    public List<String> timeline = new ArrayList<String>();//时间轴
    public List<EchartsSeries> seriesLeft = new ArrayList<EchartsSeries>();//左侧纵坐标  
    public List<EchartsSeries> seriesRight = new ArrayList<EchartsSeries>();//右侧纵坐标  
    public List<List<EchartsSeries>> series = new ArrayList<List<EchartsSeries>>();
    public List<Map<String, Object>> seriesPie = new ArrayList<Map<String,Object>>();

    public EchartsOptions(List<String> legend, List<String> category,
            List<List<EchartsSeries>> series) {
        super();
        this.legend = legend;
        this.category = category;
        this.series = series;
    }
    public EchartsOptions(List<String> legend, List<String> category,
            List<String> timeline, List<EchartsSeries> seriesLeft,
            List<EchartsSeries> seriesRight) {
        super();
        this.legend = legend;
        this.category = category;
        this.timeline = timeline;
        this.seriesLeft = seriesLeft;
        this.seriesRight = seriesRight;
    }
    public EchartsOptions(List<String> legend, List<String> category,
            List<String> timeline, List<List<EchartsSeries>> series) {
        super();
        this.legend = legend;
        this.category = category;
        this.timeline = timeline;
        this.series = series;
    }
    public EchartsOptions(List<String> legend, List<String> category,
            List<List<String>> categoryList, List<String> timeline,
            List<EchartsSeries> serieLeft, List<EchartsSeries> serieRight,
            List<List<EchartsSeries>> series) {
        this.legend = legend;
        this.category = category;
        this.categoryList = categoryList;
        this.timeline = timeline;
        this.seriesLeft = seriesLeft;
        this.seriesRight = serieRight;
        this.series = series;
    }
    public EchartsOptions(List<String> legend,
            List<Map<String, Object>> seriesPie) {
        super();
        this.legend = legend;
        this.seriesPie = seriesPie;
    }
}

EchartsSeries.java：：

package com.hollycrm.hollyuniproxy.opration.svcmonitor.entities;
import java.util.List;

/**
 *  echarts图表封装series数据的POJO类
 * @author lmb_
 *
 */
public class EchartsSeries {
   

    public String name;  
    public String type;  
    public List<Double> data;//不能用String,否则前台不能正常显示（特别是在做数学运算的时候）  
    public EchartsSeries(String name, String type, List<Double> data) {
        super();
        this.name = name;
        this.type = type;
        this.data = data;
    }
}

流程：前台发送请求调用后台方法将需要的数据查回来之后，将数据按照定义的两个POJO类的形式进行数据封装，之后传给前台，在前台相应的地方加载相应的数据（通过名称legend、series、timeline等进行识别）.

以服务器监控应用总体情况的并发数折线图为例：

1、在realConcurrencyData.js中的URL中配置请求地址，请求成功之后将对应echarts折线图的图例、横坐标以及纵坐标分别加载到前台的图表中。

realConcurrencyData.js：

/**
 *  服务器运行总体情况
 * @param echarts
 * @param divId
 * @param ctx
 */
HollyProxy.ServerWorkMonitor.prototype.realConcurrencyData= function(echarts,divId,ctx){     
//  alert("HollyProxy.ServerWorkMonitor.prototype.realConcurrencyData  " + ctx);
    var myChart = echarts.init(document.getElementById(divId));  
    myChart.showLoading({  
    text : "图表数据正在努力加载..."  
    });  

    //定义图表options  
    var options = {
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : false,
                feature : {
                    dataView : {show: true, readOnly: false},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            dataZoom: {
                show: true,
                start : 60,
                end : 100,
                height : 20
            },
            legend: {
                textStyle:{
                    color:'white'
                },
                data:['并发数','每分钟访问量']
            },
            xAxis : [
                {
                    type : 'category',
                    axisLabel :{
                        show:true,
                        textStyle:{
                            color:'white'
                        }
                    },
                    splitLine:{
                        show:false
                    },
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '并发数',
                    splitLine:{
                        show:false
                    },
                    axisLabel : {
                        show:true,
                        textStyle:{
                            color:'white'
                        },
//                      formatter: '{value}'
                    }
                },
                {
                    type : 'value',
                    name : '每分钟访问量',
                    splitLine:{
                        show:false
                    },
                    axisLabel : {
                        show:true,
                        textStyle:{
                            color:'white'
                        },
//                      formatter: '{value}'
                    }
                }
            ],
            series : [
                {
                    name:'并发数',
                    type:'line',
                    symbol:'none',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                    markPoint : {
                        data : [
                            {
  type : 'max', name: '最大值'},
                            {
  type : 'min', name: '最小值'}
                        ]
                    }
                },
                {
                    name:'每分钟访问量',
                    type:'line',
                    symbol:'none',
                    yAxisIndex: 1,
                    data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
                    markPoint : {
                        data : [
                            {
  type : 'max', name: '最大值'},
                            {
  type : 'min', name: '最小值'}
                        ]
                    }
                }
            ]
        };

      //设置延迟
    setTimeout( function getChartData() {  
        //获得图表的options对象  
        //通过Ajax获取数据  
        $.ajax({
            url:ctx+ "/rest/qryRealConcurrencyData",
            type:'POST',
            dataType:'json',
             success : function(result) {  
                    if (result) {  
                        //请求成功将数据设置到相应的位置上
//                        options.options[0].legend.data = result[0].legend;  
                         options.legend.data = ["并发数","每分钟访问量"];  
                         console.info("options.legend.data" +   options.legend.data);
                         options.xAxis[0].data = result.category;  
//                        options.xAxis[0].data = ["0:01","0:02","0:03","0:04","0:05","0:06","0:07","0:08","0:09","0:10","0:11","0:12","0:13","0:14","0:15","0:16","0:17","0:18","0:19","0:20","0:21","0:22","0:23","0:24","0:25","0:26","0:27","0:28","0:29","0:30","0:31","0:32","0:33","0:34","0:35","0:36","0:37","0:38","0:39","0:40","0:41","0:42","0:43","0:44","0:45","0:46","0:47","0:48","0:49","0:50","0:51","0:52","0:53","0:54","0:55","0:56","0:57","0:58","0:59","1:00"];
                         console.info("options.options[0].xAxis[0].data" +  options.xAxis[0].data);
                         options.series[0].data = result.series[0][0].data;//并发量
                        options.series[1].data = result.series[1][0].data;//每秒访问量
//                          options.series[0].data= ["9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000","6000","5000","6000","7000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000"];
//                        options.series[1].data = ["8000","1000","9000","1000","1000","1000","7000","1000","1000","1000","9800","1000","7900","1000","1000","1000","1000","8000","1000","1000","1000","1000","1000","1000","8000","1000","9000","1000","1000","1000","7000","1000","1000","1000","9800","1000","7900","1000","1000","1000","9800","4000","9000","6000","5000","6000","7000","6000","5000","4000","9800","7000","7900","6000","4000","5000","6000","8000","5000","6000"];
                        console.info("options.options[0].series[0].data" +  options.series[0].data);
                        console.info("options.options[0].series[1].data" + options.series[1].data);
                        myChart.hideLoading();  
                        console.log("成功率options" + JSON.stringify(options));
                        myChart.setOption(options);  
                    }  
                },  
                error : function(xmlHttpRequest,errorMsg,exceptionObject) {  
//                    alert('xmlHttpRequest>>>>>' + xmlHttpRequest);
                    myChart.hideLoading();  
                }  
        });
    } ,100);
};

2、InterfaceAccessEchartsController.java中的qryRealConcurrencyData方法即为上面JS请求的后台方法，在该方法中调用业务逻辑层UniformDetailDao.java中的方法查询实时并发数据。

InterfaceAccessEchartsController.java：

/**
     *  并发数 + 每秒访问量 （服务器监控应用总体情况）
     * @param json
     * @param req
     * @return
     * @throws ParseException 
     */
    @   RequestMapping(value= "/qryRealConcurrencyData",produces="text/plain;charset=UTF-8")
    public @ResponseBody String qryRealConcurrencyData(String json,HttpServletRequest req) throws ParseException {
        EchartsOptions  superveneData = UniformDetailDao.qryRealConcurrencyDetail(adminService);
        return JSON.toJSONString(superveneData);
    }

3、业务逻辑层UniformDetailDao.java中的方法查询实时并发数据，之后调用EchartsDataUtil.java对查回的数据进行封装。

UniformDetailDao.java：

/**
 * 统一接口明细查询业务逻辑类
 * @author lmb_
 *
 */
public class UniformDetailDao {
   

    private static final Log logger = LogFactory.getLog(InterfaceAccessController.class);
    /**
     *  查询并发数 + 每秒访问量 （服务器监控应用总体情况）明细
     * @param adminService
     * @return
     * @throws ParseException
     */
    @SuppressWarnings({ "unchecked", "rawtypes" })
    public static EchartsOptions qryRealConcurrencyDetail(AdminService adminService) throws ParseException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        Calendar calendar = Calendar.getInstance();//HOUR_OF_DAY 指示一天中的小时
        calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) - 1);
        String startDate = sdf.format(calendar.getTime());
        calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) - 1);
        List<Map<String, Object>> superveneDatas = new ArrayList<Map<String, Object>>();
        List args = new ArrayList<>();
        String sql="select to_char(modify_time,'yyyy-MM-dd HH24:mi') modify_time,sum(supervene_count) supervene_count,sum(total_count) total_count from TBL_MONITOR_HEARTBEAT_HIS " +
                "where modify_time >= to_date(?,'yyyy-MM-dd HH24:mi:ss') and modify_time <= to_date(?,'yyyy-MM-dd HH24:mi:ss') group by to_char(modify_time,'yyyy-MM-dd HH24:mi')";
        args.add(sdf.format(calendar.getTime())); 
        args.add(sdf.format(new Date()));
        //转换为可执行的SQL
        String executeSQL=DaoUtil.converseQesmarkSQL(sql, args);