Echarts---柱状图实现

时间 2019-11-21

标签 echarts 柱状实现繁體版

原文原文链接

作Echarts很简单，能够参看官网javascript

http://echarts.baidu.com/index.htmlhtml

做为程序员咱们只须要把静态数据替换成咱们本身须要的！java

下面看一个本身作的例子：程序员

仍是先看看效果图：json

该图的右上角有一个toobar，其中有直接将柱状图改成折线图，还有数据视图，保存为图片。session

看着很高大上，其实代码很简单！echarts

作以前必需要有echarts.js这个组件。dom

先说说界面：jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>eight</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/html/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具有大小（宽高）的Dom -->
    <div id="eight" style="width:100%;height:400px;"></div>
    
</body>
</html>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var eight = echarts.init(document.getElementById('eight'));
        // 指定图表的配置项和数据
		var option = {
			title: {
                text: '近一月留痕状况(截止昨日)',
				left: 'center',
        		top: 20
            },
			color: ['#3398DB'],
			tooltip : {
				
			},
			toolbox: {
		        show : true,
		        feature : {
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
			grid: {
				left: '3%',
				right: '4%',
				y2:80,
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ${yewu},  //重点在这里  加载后台数据  横坐标名称
					axisTick: {
						alignWithLabel: true
					},
					axisLabel:{
						interval:0,
						rotate:-30
					}
				}
				
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'留痕登记数',
					type:'bar',
					barWidth: '60%',
					data: ${lstmark}  //重点在这里   加载数据  柱状图数据
				}
			]
		};


        // 使用刚指定的配置项和数据显示图表。
        eight.setOption(option);
		window.onresize = eight.resize;
    </script>

图表中的数据来自Controller层提供，请看Controller层关键代码：ui

记住数据要List封装！

/******************Echarts当月留痕状况ljl***********************/
		//业务类型
		List<String> yewu =  markEchartsService.getPageName(); //这个是具体业务逻辑查询出来的，不在说明了。
		//留痕记录
		List<Object> lstmark = new ArrayList<Object>();
		//进一个月留痕状况
		List<Map<String, Object>> mapmark = markEchartsService.getMarkCount();  //这个是具体业务逻辑查询出来的，不在说明了。
		for (Map<String, Object> map : mapmark) {
			lstmark.add(map.get("num"));
		}
		
		session.setAttribute("yewu", JSON.toJSON(yewu));  //前台要接收的数据  横坐标的值 例如 ['A','B','C'....]
		session.setAttribute("lstmark", JSON.toJSON(lstmark)); //前台要接收的数据  柱状图的值 例如[23,44,5,98....]
		/********************************************************/
而后转发到某个界面。
在这里还须要一个alibaba的json组件,网上不少本身下载

在这里也只是抛砖引玉了。。。

再补充一点问题：

1.好比说如何实现文字斜体显示：axisLabel:{ interval:0, rotate:-30 }

2.当斜体显示文字不全时：修改y2的值

最终要实现效果还得本身动手作一作的。。。

加油举林！！