做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. 自学Zabbix3.8.2-可视化Visualisation-maps网络地图

    自学Zabbix3.8.2-可视化Visualisation-maps网络地图 可以简单的理解为动态网络拓扑图,可以针对业务来配置zabbix map,通过map可以了解应用的整体状况:服务器是否异常 ...

  2. Nginx干货（一）隐藏Nginx标识与版本号

    注:默认读者自己会安装nginx,不会的就搜一下怎么安装吧.说明一点.在make的时候可以使用make -j num这里面的num是你的cpu核心数.这样会快一点~~~意为以num个进程同时编译 首先 ...

  3. C C语言中关键词，以及知识点复习

    C语言学习 C语言练习知识点 auto        局部变量(自动储存) break       无条件退出程序最内层循环 case        switch语句中选择项 char         ...

  4. JavaWeb框架_Struts2_(八)----->Struts2的国际化

    这一篇博文拖了蛮久了,现在先把它完成,结束struts2这个版块,当然这只是最基础的部分,做项目还需要更深的理解.下一个web后端的版块准备做Spring框架的学习-嗯,加油! 1. Struts2的 ...

  5. ABP .Net Core Entity Framework迁移使用MySql数据库

    一.迁移说明 ABP模板项目Entity Framework Core默认使用的是Sql Server,也很容易将数据库迁移到MySQL,步骤如下. 二.迁移MySQL步骤 1. 下载项目 请到 ht ...

  6. java 学习笔记之 流、文件的操作

    ava 学习笔记之 流.文件的操作 对于一些基础的知识,这里不再过多的解释, 简单的文件查询过滤操作 package com.wfu.ch08; import java.io.File; import ...

  7. bzoj 1150: [CTSC2007]数据备份Backup

    Description 你在一家 IT 公司为大型写字楼或办公楼(offices)的计算机数据做备份.然而数据备份的工作是枯燥乏味 的,因此你想设计一个系统让不同的办公楼彼此之间互相备份,而你则坐在家 ...

  8. solr安装配置

    1.solr是基于tomcat安装部署的 2.网上下载solr-5.2.1 http://lucene.apache.org/solr/downloads.html 3.解压solr文件 tar zx ...

  9. 记录优雅的pythonic代码

    记录平时学习中接触到的和网上看到的一些pythonic的方法,只为日后查询时候方便. 1.列表推导式: seq_list=[1,2,3,4,5] new_list=[i *2 for i in seq ...

  10. Java设计模式之（一）------单例模式

    1.什么是单例模式? 采取一定的办法保证在整个软件系统中,单例模式确保对于某个类只能存在一个实例.有如下三个特点: ①.单例类只能有一个实例 ②.单例类必须自己创建自己的实例 ③.单例类必须提供外界获 ...