实现Java Web开发的关于echarts可视化动态数据展示

实现Java Web开发的关于可视化动态数据展示

echarts是一个实现动态数据展示最方便的图形化展示工具。它能够完成数据实时传递更新并且能够完成页面直观的展示。最开始时，echarts是由百度设计出来的可视化js库，后面捐给了阿帕奇开源。不过我们仍然可以使用它。

Java Web实现步骤：

1、客户端实现ajax请求

2、服务器端在Servlet接受请求

3、生成一个json数据(柱状图、折线图表示)

4、客户端接收数据后显示

1、发送ajax请求

首先我们要了解echarts的基本格式内容。

引入js包

<script type="text/javascript" src="echarts/echarts.js"></script>

其次为echarts提供一个具备一定大小的Dom模块

<div id="main" style="width: 600px; height: 400px;"></div>

在script标签中添加如下内容：

var myChart = echarts.init(document.getElementById('main'));

		//3.初始化，默认显示标题，图例和xy空坐标轴
		myChart.setOption({

			title : {
				text : 'ajax动态获取数据'
			},
			tooltip : {},
			legend : {
				data : [ '销售量' ]
			},
			xAxis : {
				data : []
			},
			yAxis : {},
			series : [ {
				name : '销售量',
				type : 'bar',
				data : []
			} ]
		});
		var xaxis = [];
		var yaxis = [];

后面可以适当添加动画和ajax请求。

我这儿的代码如下：

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        legend: {},
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        color: [
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
            '#91c7ae',
            '#749f83',
            '#ca8622',
            '#bda29a',
            '#6e7074',
            '#546570',
            '#c4ccd3'
        ],
        title: {
            text: 'ECharts报表展示'
        },
        tooltip: {trigger: 'axis'},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10]
            }
        ]
    };
    myChart.setOption(option);
    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

    var names = []; //一个product名称数组，用来展示于x轴
    var nums = []; //一个销售量数组，用来展示于y轴

    //第3步后续步骤
    ...
    ...
</script>

2、Servlet请求接受

这个地方如果是使用servlet，那么就创建一个servlet类，用ssm框架就使用controller添加一个展示的功能即可。

这个地方粗略讲述即可。比如我的代码如下：

//1、构建一个数组存储user&product类
List<Product> list = new ArrayList<Product>();

//2、默认可以添加，可以另行添加dao和service调用数据库返回值
list.add(new Product("短袖",32,178));
list.add(new Product("女衬衫",80,190));
list.add(new Product("紧身裤",109,239));
list.add(new Product("黑丝",216,299));

//3.获取前端的action
String action = req.getParameter("action");

//4.根据action来判断采取什么行动
if(action.equals("TurnJSON")){
    //3、使用GSON来转换成json格式并返回
    Gson gson = new Gson();
    String json = gson.toJson(list);

    //4、输出json格式的数据
    resp.setContentType("text/html;charset=utf-8");
    resp.getWriter().write(json);
}

3、生成json格式数据返回客户端

生成json后我们需要将返回的json格式将x轴内容和y轴内容替换掉，比如如下：

//6.ajax发起数据请求
    $.ajax({
        type : "post",
        async : true, //设置异步请求
        url : "echartsServlet",
        data : "action=TurnJSON",
        dataType : "json", //返回数据形式为json

        //请求成功后接收数据names+nums两组数据
        success : function(result) {
            //console.log(result)
            //result为服务器返回的json对象
            if (result) {
                //取出数据存入数组
                //console.log(result[0].name+" "+result[0].num)
                for (var i = 0; i < result.length; i++) {
                    names.push(result[i].name);
                }
                for (var i = 0; i < result.length; i++) {
                    nums.push(result[i].num);
                }

                //console.log(names);
                //console.log(nums);

                myChart.hideLoading(); //隐藏加载动画

                //覆盖操作-根据数据加载数据图表
                myChart.setOption({
                    xAxis : {
                        data : names
                    },
                    series : [ {
                        // 根据名字对应到相应的数据
                        data : nums
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })

最终展示：

更多的学习可以参考这一篇api：echarts文档

这就是基本的图数据的展示业务，希望能够让大家有所收获，谢谢大家！