做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. spark-submit参数说明--on YARN

    示例: spark-submit [--option value] <application jar> [application arguments] 参数名称 含义 --master M ...

  2. margin相关

    1.图片与文字对齐问题 如果图片和文字差不多大时,使用兼容性强的margin负值方法. 方法:img{margin:0 3px -3px 0;} 2.div嵌套后margin出现失效(转移)问题 原因 ...

  3. AI 系列 总目录

    AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...

  4. windows环境下mysql主从配置

    mysql主从配置. 相关理论知识可以百度一下,这里就不多说了,直接说如何配置. 一.环境介绍及说明 主库所在的操作系统:win7 主库的版本:mysql-5.6.24-winx64.zip 主库的i ...

  5. 在Ubuntu14.04下安装 ffmpeg-2.4.13（处理视频用，将视频保存为图片序列）

    首先在 http://www.ffmpeg.org/olddownload.html 下载 ffmpeg-2.4.13.tar.bz2 : 然后安装 yasm 和 libx264: apt-get i ...

  6. bzoj 4653: [Noi2016]区间

    Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x ...

  7. Windows as a Service（2）—— 使用WSUS管理Windows10更新

    前言 在上一篇Windows as a Service(1)-- Windows 10服务分支中,我和大家分享了Windows 10三个服务分支CB/CBB/LTSB的概念及不同,从这篇文档开始,我将 ...

  8. Handwritten Parsers & Lexers in Go （翻译）

    用go实现Parsers & Lexers 在当今网络应用和REST API的时代,编写解析器似乎是一种垂死的艺术.你可能会认为编写解析器是一个复杂的工作,只保留给编程语言设计师,但我想消除这 ...

  9. MySQL主从复制原理以及架构

    1 复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的 数据复制到其它主机(slaves)上,并 ...

  10. 房上的猫：if选择结构

    一.基本if结构: 1.定义:if选择结构是根据条件判断之后再做处理的一种语法结构! 2.逻辑:首先对条件进行判断  >如果为真,则执行代码块  >如果为假,执行代码块后面的部分二.常用逻 ...