您的位置: 首页  >  文章  >  JAVA开发人员画图表总结（ECHARTS）

JAVA开发人员画图表总结（ECHARTS）

分类: 文章 • 2023-11-14 10:50:40

JAVA开发人员画图表总结（ECHARTS）

随着大数据的到来，越来越多的数据需求需要开发，而这些需求不可避免需要使用JS画出图表，而大多后端JAVA开发人员对JS不太熟悉，导致身心倍受折磨，今天记录以下最近我使用echarts的步骤，供参考：

一、环境说明

前端框架：echarts、Jquery

后端框架：SPRINGMVC

二、开发过程

前端代码：

JAVA开发人员画图表总结（ECHARTS）

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height: 400px"></div>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                url : "http://www.qunar.com/getJson",  //获取JSON地址
                dataType : "text",
                success : function(data) {
                    var result = eval(data);
                    
                    // 路径配置
                    require.config({
                        paths : {
                            'echarts' : 'http://echarts.baidu.com/build/echarts',
                            'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
                        }
                    });
                    var myChart;
                    // 使用
                    require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                    ], function(ec) {
                        // 基于准备好的dom，初始化echarts图表
                        myChart = ec.init(document.getElementById('main'));
                        // 为echarts对象加载数据 
                        myChart.setOption(result[0]);
                    });                    
                    
                }
            });
        });
    </script>
</body>
</html>

JAVA开发人员画图表总结（ECHARTS）

对于我来说，编写这些JS最困难了。

1、首先需要AJAX获取数据

2、需要与echarts相互结合

3、option这个对象是核心，后端需要生成的也是这个对象。

获取的后端数据：

[{"calculable":true,"graphType":null,"legend":{"data":["报表"]},"series":[{"data":[1,2,3],"name":"报表","type":"bar"}],"title":{"color":"red","fontSize":24,"link":"http://www.qunar.com","subText":"报表","text":"去哪儿-报表"},"tootip":{"show":true},"xAxis":{"data":[1,2,3],"type":"category"},"yAxis":{"data":[],"type":"value"}}]

后端如何生成这些JSON数据就不在这里说了，任何提供REST服务或者SpringMVC都能实现。这里需要注意的是，如果想要长期使用echarts，建议还是好好阅读文档，因为任何的小错误，都可能导致效果相差很大。

 

 

转载来源：https://www.cnblogs.com/liqiu/p/3761353.html

 

 

 

 

echarts在.Net中使用实例(二) 使用ajax动态加载数据

前一篇文章链接：echarts在.Net中使用实例(一) 简单的Demo

通过上一篇文章可以知道和echarts参考手册可知，series字段就是用来存储我们显示的数据，所以我们只需要用ajax来获取series的值就可以.

option

名称 描述
{color}backgroundColor 全图默认背景，（详见backgroundColor），支持rgba，默认为无，透明
{Array} color 数值系列的颜色列表，（详见color），可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage 非IE8-支持渲染为图片，（详见renderAsImage）
{boolean}calculable 是否启用拖拽重计算特性，默认关闭，（详见calculable，相关的还有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation 是否开启动画，默认开启，（详见 animation，相关的还有 addDataAnimation， animationThreshold，animationDuration， animationDurationUpdate ï¼Œ animationEasing）
{Object} timeline 时间轴（详见timeline），每个图表最多仅有一个时间轴控件
{Object} title 标题（详见title），每个图表最多仅有一个标题控件
{Object} toolbox 工具箱（详见toolbox），每个图表最多仅有一个工具箱
{Object} tooltip 提示框（详见tooltip），鼠标悬浮交互时的信息提示
{Object} legend 图例（详见legend），每个图表最多仅有一个图例，混搭图表共享
{Object}dataRange 值域选择（详见dataRange）,值域范围
{Object}dataZoom 数据区域缩放（详见dataZoom）,数据展现范围选择
{Object}roamController 漫游缩放组件（详见roamController）,搭配地图使用
{Object} grid 直角坐标系内绘图网格（详见grid）
{Array | Object}xAxis 直角坐标系中横轴数组（详见xAxis），数组中每一项代表一条横轴坐标轴，标准（1.0）中规定最多同时存在2条横轴
{Array | Object}yAxis 直角坐标系中纵轴数组（详见yAxis），数组中每一项代表一条纵轴坐标轴，标准（1.0）中规定最多同时存在2条纵轴
{Array} series 驱动图表生成的数据内容（详见series），数组中每一项代表一个系列的特殊选项及数据

 

首先定义一个Serial类

JAVA开发人员画图表总结（ECHARTS）

JAVA开发人员画图表总结（ECHARTS）

 /// <summary>
    /// 定义一个Series类 设置其每一组sereis的一些基本属性
    /// </summary>
    class Series
    {
        /// <summary>
        /// sereis序列组id
        /// </summary>
        //public int id
        //{
        //    get;
        //    set;
        //}

        /// <summary>
        /// series序列组名称
        /// </summary>
        public string name
        {
            get;
            set;
        }

        /// <summary>
        /// series序列组呈现图表类型(line、column、bar等)
        /// </summary>
        public string type
        {
            get;
            set;
        }

        /// <summary>
        /// series序列组的数据为数据类型数组
        /// </summary>
        public List<double> data
        {
            get;
            set;
        }
    }

JAVA开发人员画图表总结（ECHARTS）

 

接着将Serial实例化并将其转化为json格式(必须用大神器：Newtonsoft.Json.dll)，代码如下图

JAVA开发人员画图表总结（ECHARTS）

JAVA开发人员画图表总结（ECHARTS）

 private  void ShowChart()
    {
        //考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
        List<Series> seriesList = new List<Series>();

        Series series1 = new Series();
        series1.name = "actual";
        series1.type = "bar";
        series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };

        Series series2 = new Series();
        series2.name = "Budget";
        series2.type = "bar";
        series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, };

        seriesList.Add(series1);
        seriesList.Add(series2);
        var newObj = new
        {
            series = seriesList
        };

        string strJson = ToJson(newObj);

        WriteJson(strJson);
    }

    public static string ToJson( object obj)
    {
        return NewtonsoftJson(obj);
    }

    public static string NewtonsoftJson(object obj)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
    }

    private static void WriteJson(string str)
    {
        HttpContext.Current.Response.Write(str);
        //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
        HttpContext.Current.Response.End();
    }

JAVA开发人员画图表总结（ECHARTS）

 

前台代码只需要用ajax来获取值并赋给option的serial属性即可

JAVA开发人员画图表总结（ECHARTS）

JAVA开发人员画图表总结（ECHARTS）

<!DOCTYPE html>
<html>  
    <head>
    <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="echarts/echarts.js"></script>

    </head>
    <body>
        <div id="main" style=" height:400px;"></div>
      
    </body>  
</html>  
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'echarts'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data: ['Actual', 'Budget']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'//Y轴显示的类型,默认为value
                        }
                    ],
                    series: []
                };
                //ajax动态获取数据
                $.ajax({
                    type: 'post',
                    url: 'ajax.ashx?action=ShowChart',
                    data: {},
                    dataType: 'json',
                    async: false,
                    success: function (result) {
                        if (result) {
                            // 获取json值
                              option.series = result.series;
                            // 为echarts对象加载数据 
                               myChart.setOption(option);
                        } 
                    },
                    error: function () {
                         alert("Error");
                    }
                });

            }
        );
    </script>

JAVA开发人员画图表总结（ECHARTS）

所见即所得

JAVA开发人员画图表总结（ECHARTS）

 

当然，最后奉上源码！

 

源代码下载

 

转载来源：https://www.cnblogs.com/youmeng/p/4874897.html

 

 

相关推荐