做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. Ubuntu 编译安装 OpenCV 3.1

    目标系统:Ubuntu 16.04-64bit OpenCV 版本:opencv-3.1.0 安装步骤 安装 cmake.sudo apt-get isntall cmake cmake-qt-gui ...

  2. 在用python操作mysql时报错：ModuleNotFoundError: No module named 'MySQLdb'

    用Flask+python+mysql写一个小项目 系统 win10 py版本:3.6.1 在配置数据库时报错ModuleNotFoundError: No module named 'MySQLdb ...

  3. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  4. 在nginx上部署vue项目(history模式)；

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  5. React学习总结（一）

    React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...

  6. 获取手机安装的所有包名adb shell pm list packages

    获取所有已安装包的包名:adb shell pm list packages 查找:adb shell pm list packages|findstr suning

  7. MySQL必知必会笔记

    数据库和表的增删改 创建数据库 CREATE DATABASE 数据库名; # mysql中还可使用如下语句 CREATE SCHEMA 数据库名; 数据库选择 USE 数据库名; 创建表 creat ...

  8. Html中行内元素有哪些？块级元素有哪些？

    1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  9. list.add(),向List集合插入对象报空指针异常

    开始的时候我没有判断添加的随想是否为空,直接add;后来加了一个判断,判断了对象不等于空,但是运行程序还是报空指针,这时我发现应该是List出问题了: 查了下资料,发现我初始化List方法不对,如果只 ...

  10. Charles 抓包工具使用部分问题总结

    一. You may need to configure your browser or application to trust the Charles Root Certificate. See ...