Echart框架显示图表用法

最新推荐文章于 2024-05-03 18:10:15 发布

小梦星星

最新推荐文章于 2024-05-03 18:10:15 发布

阅读量575

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/qq_36677358/article/details/84072384

版权

其他专栏收录该内容

22 篇文章 0 订阅

订阅专栏

图表相对于数据报表,能够更加直观的展示总体数据趋势,概况等问题,常见的图表有柱状图,折线图,饼状图等,在Java中可以使用框架对图表进行展示.
后台框架为freechart,这种框架为后台获取数据并生成图表的图片,前端使用<img>标签异步发送请求,接收图片流即可,但是该框架配置较为麻烦,而且生成的图表样式比较老少,所以不推荐使用.
这里主要讲一下咱们国产大厂百度提供的Echart框架,这种框架为前端框架,只需要导入百度提供的一个js文件即可, (感谢百度的大力支持),文件可在Echart官网下载.然后通过后台传来的json数据在设定好的div中进行图表生成.然后只需要简单的配置即可.可通过观察案例结构来动态获取后台数据封装到json中再配置到图表的配置项
以柱状图为例:前端页面如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>饼状图</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        	    title : {
        	        text: '某地区蒸发量和降水量',
        	        subtext: '纯属虚构'
        	    },
        	    tooltip : {
        	        trigger: 'axis'
        	    },
        	    legend: {
        	        data:[]
        	    },
        	    toolbox: {
        	        show : true,
        	        feature : {
        	            dataView : {show: true, readOnly: false},
        	            magicType : {show: true, type: ['line', 'bar']},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    calculable : true,
        	    xAxis : [
        	        {
        	            type : 'category',
        	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	       
        	        
        	    ]
        	};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $(function(){
        	$.get("getBarJson.action",function(json){
        		option.xAxis[0].data=json.xaxis;
        		option.legend.data=json.legend;
        		$.each(json.bardata, function(i,item){
        			option.series[i]={
            	            name:item.name,
            	            type:'bar',
            	            data:item.value,
            	            markPoint : {
            	                data : [
            	                    {type : 'max', name: '最大值'},
            	                    {type : 'min', name: '最小值'}
            	                ]
            	            },
            	            markLine : {
            	                data : [
            	                    {type : 'average', name : '平均值'}
            	                ]
            	            }
            	        }	
        		})	
        		   myChart.setOption(option);
        			})
        })
    </script>
</body>
</html>

action类如下:为了方便不再从数据库取值

public class BarAction {
	private BarJson bardata;

	public String getBarJson() {
		bardata = new BarJson();
		List<Bar> bars = new ArrayList<>();
		Double[] zf = {2.0, 4.9, 7.0, 23.2, 50.0, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3};
		Double[] js = {2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3};
		bars.add(new Bar(Arrays.asList(js),"降水量"));
		bars.add(new Bar(Arrays.asList(zf),"蒸发量"));
		String[] ax = {"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"};
		String[] le = {"蒸发量","降水量"};
		bardata.setLegend(Arrays.asList(le));
		bardata.setBardata(bars);
		bardata.setXaxis(Arrays.asList(ax));
		return "success";
	}

	public BarJson getBardata() {
		return bardata;
	}

	public void setBardata(BarJson bardata) {
		this.bardata = bardata;
	}
}

其中BarJson的结构如下:

    private List<Bar> bardata;
    private List<String> xaxis;
    private List<String> legend;

Bar结构如下:

private List<Double> value;
	private String name;

struts.xml配置

	<action name="getBarJson" class="cn.action.BarAction" method="getBarJson">
			<result name="success" type="json">
				<param name="root">bardata</param>
			</result>
		</action>

小梦星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echart框架显示图表用法

图表相对于数据报表,能够更加直观的展示总体数据趋势,概况等问题,常见的图表有柱状图,折线图,饼状图等,在Java中可以使用框架对图表进行展示.后台框架为freechart,这种框架为后台获取数据并生成图表的图片,前端使用&lt;img&gt;标签异步发送请求,接收图片流即可,但是该框架配置较为麻烦,而且生成的图表样式比较老少,所以不推荐使用.这里主要讲一下咱们国产大厂百度提供的Echart框架...
复制链接

扫一扫