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的值

最終要實現效果還得本身動手作一作的。。。

加油舉林！！