做Echarts很简单，可以参看官网

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

作为程序员我们只需要把静态数据替换成我们自己需要的！

下面看一个自己做的例子：

还是先看看效果图：

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

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

做之前必须要有echarts.js这个组件。

先说说界面：

<%@ 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层关键代码：

记住数据要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的值

最终要实现效果还得自己动手做一做的。。。

加油举林！！

Echarts---柱状图实现的更多相关文章

  1. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  2. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  3. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  4. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  5. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  6. echarts柱状图个数多，横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  7. Flask插件wtforms、Flask文件上传和Echarts柱状图

    一.wtforms 类比Django的Form组件Form组件的主要应用是帮助我们自动生成HTML代码和做一些表单数据的验证 flask的wtforms用法跟Form组件大同小异参考文章:https: ...

  8. Echarts 柱状图配置详解

    1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...

  9. ECharts柱状图

    首先我们要先去Echarts 官网 根据自己需要的版本进行下载下载 下载完成后,我们在项目中引入echarts 随后创建容器来存放我们要添加的柱状图 容器创建完毕我们需要在js中设置他的属性和值 此配 ...

  10. echarts柱状图 渐变色

    效果图:  var xAxisData = []; var data = []; for (var i = 9; i < 16; i++) { xAxisData.push('5月' + i + ...

随机推荐

  1. Linux: curl

    [user@localhost ~]$ curl -h Usage: curl [options...] <url> Options: (H) means HTTP/HTTPS only, ...

  2. tomcat启动端口号报错java.net.BindException: Cannot assign requested address

    异常信息 时间:2017-02-09 15:09:59,829 - 级别:[ERROR] - 消息: [other] Failed to start end point associated with ...

  3. Myeclipse Reload

    前言: 在用 myeclipse 做项目开发的时候.如果没有配置热部署,平凡的去启动 server 如果项目小,那么很简单.如果项目很大,那么重启的项目花费的时间会很长. 在 myeclipse 中其 ...

  4. 实现我博客旁边的线条效果 html canvas-nest.js 源码

    canvas-nest.js 这个js文件可以用来实现炫酷的线条与鼠标进行交互的功能,具体效果如图所示 js具体源码如下: /** * Copyright (c) 2016 hustcc * Lice ...

  5. ArcGIS 网络分析[2.1] 最短路径

    最短路径求解 [如果看到此博客还没有网络数据集的,请参考第一章的内容,点击我,看目录] 最短路径,是什么最短?时间最短?距离最短?什么距离?路程距离? 考虑到拥堵问题,限速问题,换乘问题,在现实的最短 ...

  6. bzoj 2733: [HNOI2012]永无乡

    Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...

  7. web网站嵌入QQ临时会话代码 ----转载----小技巧

    第一种 <img style="CURSOR: pointer" onclick="javascript:window.open('tencent://messag ...

  8. 5 秒创建 k8s 集群 - 每天5分钟玩转 Docker 容器技术（115）

    据说 Google 的数据中心里运行着超过 20 亿个容器,而且 Google 十年前就开始使用容器技术. 最初,Google 开发了一个叫 Borg 的系统(现在命令为 Omega)来调度如此庞大数 ...

  9. 怎么为WebStorm更换主题 修改字体样式

    这篇文章主要用于帮助大家解决怎么为webstorm换theme. 首先,到选择一个自己喜欢的皮肤,Webstorm皮肤网址: http://phpstorm-themes.com/ 然后,选中你喜欢的 ...

  10. 使用Word进行文档修订版本的比较

    项目经理在实际的工作过程中,比如要写文档方案,就需要对文档的修订版本进行管理和控制.在以前的工作中,笔者使用的是UltraEdit这个软件工具中的Ultra Compare这个子工具来进行的文档版本的 ...