echarts的简单应用之（一）柱形图
前段时间做项目需要绘制一些图表来展示信息，从网上资料来看用的比较多的是百度开源的echarts。echarts的官网上有API以及demo。上面的图形都是非常炫的，不过都是静态
数据，我们做项目时不可能都用静态数据，特别是做监控、管理等方面，需要前后台数据的交互。下面是我得简单总结，就直接贴代码了。
首先是从官网上学来的一个demo，其中用到的js文件都可以官网上下载到，代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts-demo-柱形图</title>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main')); var option = {
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "销量",
"type" : "bar",
"data" : [ 5, 20, 40, 10, 10, 20 ]
} ]
}; // 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
其运行结果如图：
从官网上的实例中可以看到各种不同的图形，我们可以直接在网上编辑，修改成我们想要的模型，然后将整个option复制到demo中的option上，就可以得到一个静态数据的图形。
接下来就是从后台取数据了。代码如下：（只贴出option部分和ajax请求的部分）
var levels= []; // 等级的数组
var nums= []; // 数量的数组 var myChart = echarts.init(main[0]); // main 是设置的图表的id
$.ajax({
type: "post",
url : "getPieInfo.action",
dataType: "json",
data : {},
success: function(result){
if (result != null && result.length > 0) {
for(var i=0;i<result.length;i++){
levels.push(result[i].level);
nums.push(result[i].num);
}
} myChart.setOption({ //载入数据
tooltip: {
show: true,
trigger: 'axis',
},
legend: {
data:['级别统计']
},
toolbox: {
show : true,
feature : {
mark : {show: true}, // 辅助线标志
dataView : {show: true, readOnly: false}, // 数据视图
magicType : {show: true, type: ['line', 'bar']}, // 动态类型转换（折线柱形互转）
restore : {show: true}, // 还原
saveAsImage : {show: true} // 保存图片
}
},
calculable : true, // 启用拖拽，重新计算
xAxis: {
type : 'category',
data: levels //填入X轴数据
},
yAxis : {
type : 'value'
},
series: {
name: '数量',
type: 'bar',
data: nums
}
});
}
})
后台代码就是普通的SSM框架写的，这里不多叙述。
其数据库如下：
最终运行结果：
如果文中有什么错误或问题可以和我交流，邮箱hellojylee@163.com.
echarts的简单应用之（一）柱形图的更多相关文章
- echarts的简单应用之（二）饼图
接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...
- echarts之简单的入门——【二】再增加一个柱状图和图例组件
echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- ECharts.js 简单示例
ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Vi ...
- 对echarts的简单封装
看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的封装:http://blog.csdn.net/x ...
- Echarts的简单入门
5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体 ...
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
- ECharts的简单使用
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
- Echarts——一个简单的嵌套饼图
</!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
随机推荐
- Spark SQL概念学习系列之Spark SQL入门
前言 第1章 为什么Spark SQL? 第2章 Spark SQL运行架构 第3章 Spark SQL组件之解析 第4章 深入了解Spark SQL运行计划 第5章 测试环境之搭建 第6章 ...
- python爬虫之requests+selenium+BeautifulSoup
前言: 环境配置:windows64.python3.4 requests库基本操作: 1.安装:pip install requests 2.功能:使用 requests 发送网络请求,可以实现跟浏 ...
- python包管理工具他们之间的关系
python包管理工具之间的关系 现在的python包管理工具有很多,非常混乱,必须理清他们之间的关系才能更好的使用python构建强大的包关系系统工具. 首先:python官方推荐的第三方库是PyP ...
- 构造 HDOJ 5400 Arithmetic Sequence
题目传送门 题意:问有多少个区间,其中存在j使得ai + d1 == ai+1(i<j) && ai + d2 == ai+1 (i>j) 构造:用c1[i], c2[i] ...
- 外文翻译 《How we decide》赛场上的四分卫 第四节
这是第一章的最后一节. 书的导言 本章第一节 本章第二节 本章第三节 制作肥皂剧是非常不易的.整个制作组都要很紧张的工作,每天都要拍摄一些新的事件.新的大转折的剧情需要被想象出来,新的剧本需要被编写, ...
- Oracle 表-初步涉水不深（第一天）
oracle 关系型数据库 注释:面对大型数据处理,市场占有率40%多(但是目前正往分布式转换) 故事:本来一台大型计算机才能处理的数据,美国科学家用100台家用电脑连接,成功处理了数据.. tabl ...
- LN : leetcode 123 Best Time to Buy and Sell Stock III
lc 123 Best Time to Buy and Sell Stock III 123 Best Time to Buy and Sell Stock III Say you have an a ...
- 学习笔记 第十一章 CSS3布局基础
第11章 CSS3布局基础 [学习重点] 了解CSS2盒模型. 设计边框样式. 设计边界样式. 设计补白样式. 了解CSS3盒模型. 11.1 CSS盒模型基础 页面中所有元素基本显示形态为方形 ...
- npm安装淘宝镜像cnpm报错npm ERR! errno -4048
今天在安装淘宝镜像的时候报错了,第一次遇上,表示很懵逼 然后捣腾了半天以为是npm install 的时候出错,后来网上查到是 装淘宝镜像cnpm的时候报错,好像是权限问题,解决方法: npm ca ...
- php中读取以及写入文件的方法总结
==>读取文件内容(方法一) $fileData = fread($fileStream,filesize($filePath)); 注意: 文本文件读取到网页上显示时,由于换行符不被解释,文本 ...