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& ...
随机推荐
- ssh 公钥登录远程主机 并禁止密码登录
https://www.digitalocean.com/community/tutorials/how-to-set-up-ssh-keys-on-centos7 如果在新的机器上,得先用密码登录一 ...
- 史上最详细最全的Linux上安装Oracle的教程-centos7
一.安装Oracle前准备 1.创建运行oracle数据库的系统用户和用户组 [humf@localhost ~]$ su root #切换到root Password: [root@localhos ...
- 《Windows核心编程系列》八谈谈用内核对象进行线程同步
使用内核对象进行线程同步. 前面我们介绍了用户模式下线程同步的几种方式.在用户模式下进行线程同步的最大好处就是速度非常快.因此当需要使用线程同步时用户模式下的线程同步是首选. 但是用户模式下的线程同步 ...
- Drawable新属性
mSelectEndorseReasonTv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toup, 0);新属性替换: Draw ...
- 思维题 Gym 100553A Alter Board
题目传送门 /* 题意:一个n×m的矩形,相邻的颜色不同,黑或白.问最少的翻转次数,每次翻转可指定任意一个子矩形 思维题:最少要把偶数行和列翻转,也就是n/2+m/2次 */ #include < ...
- 暴力 BestCoder Round #46 1001 YJC tricks time
题目传送门 /* 暴力:模拟枚举每一个时间的度数 详细解释:http://blog.csdn.net/enjoying_science/article/details/46759085 期末考结束第一 ...
- AngularJs 的ng-include指令的使用
AngularJs通过指令ng-include来将页面中共用的模块分离出来,这个功能和mvc里面的分部页的作用一样的. 先看文件的结构: 父页面: <!DOCTYPE html> < ...
- 大小写 unix and windows
如果你没有使用工具, 只是sqlplus对大小写不敏感. 如果你要给sql传递参数,且在windows下面就不需要考虑.如果是aix系统,最好写一样.
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- Hadoop YARN学习之Hadoop框架演进历史简述
Hadoop YARN学习之Hadoop框架演进历史简述(1) 1. Hadoop在其发展的过程中经历了多个阶段: 阶段0:Ad Hoc集群时代 标志着Hadoop的起源,集群以Ad Hoc.单用户方 ...