echarts使用——柱状图
开发中,做报表统计的时候,很容易用到echarts实现折线图、饼状图、柱状图的绘制,使用echarts插件很简单,官网有教程实例,但主要是这些图需要的数据格式的转换。
我的柱状图实现效果:
第一部分 开篇介绍
官网地址:http://echarts.baidu.com/examples/
接下来我们下载选择实例的源码:
打开看,就是我们需要的那部分,只需要将数据变成我们自己的动态数据即可。
第二部分 代码实现
1、下载echarts需要的js,可以在官网上下载
<script src="js/echarts.min.js"></script>
2、引入需要的echarts代码展示,可以在实例中找到,下载源码
function getEcharts(year,month,count){
//柱状图
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
left: 'center',
text: year+'年'+'下单统计报表',
},
xAxis: {
type: 'category',
data: month,
name:'月份'
},
yAxis: {
type: 'value',
name:'下单量'
},
series: [{
data: count,
type: 'bar'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
3、获取动态数据
function showStatistics(arg){
var url = "statisticsCtrl/getOrderNewDayCountByYear";
//post调用
$.post(url, {"data": arg}, function (data) {
if (data.success) {
var resultData = data.data;
//动态显示柱状图
getEcharts(arg.year,resultData.month,resultData.count);
} else {
layer.msg(data.errorMsg);
}
})
}
4.后台实现参照
https://www.cnblogs.com/yyk1226/p/10017661.html
https://www.cnblogs.com/yyk1226/p/10017575.html
echarts使用——柱状图的更多相关文章
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...
- echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
- echarts分组柱状图的前后台处理 带平均线显示
原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...
- ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...
- echarts 堆叠柱状图 + 渐变柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts设置柱状图颜色渐变及柱状图粗细大小
series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...
- echarts堆叠柱状图在最上面的柱子显示总和
需求 柱子需设置barMinHeight 在堆叠柱状图的最上面显示当前堆叠的总和 直接上代码吧 需要注意:设置barMinHeight时为了让0不显示,只能将0设置为null; 设置为null的柱子l ...
随机推荐
- F#周报2019年第35期
新闻 新增强的NuGet搜索 Windows Terminal预览版v0.4发布 在Visual Studio的YouTube频道上获取更多的新内容 .NET团队是如何使用Azure Pipeline ...
- 用java实现取1-100之间的99个不重复的随机数 然后输出没有被取出的数字
package cn.kgc.springtest2.demo1.dao; import java.util.BitSet; /** * @author * @create 2019-08-02 17 ...
- POJ2723 Get Luffy Out解题报告tarjan+2-SAT+二分
今天看到讲2-SAT比较好的blog,感觉微微的理解了2-SAT 传送门 参考: https://blog.csdn.net/leolin_/article/details/6680144 题意:你有 ...
- Codeforces 832 D Misha, Grisha and Underground
Misha, Grisha and Underground 题意:Misha 和 Grisha 是2个很喜欢恶作剧的孩子, 每天早上 Misha 会从地铁站 s 通过最短的路到达地铁站 f, 并且在每 ...
- 牛客第七场 Minimum Cost Perfect Matching 规律
题意:1-n-1个数和1-n-1个数两两匹配,每次匹配将两个数的值进行与运算,要求每次匹配与运算的和相加最小,问满足匹配的配对方式 分析:打表前10个数与运算最小的匹配,我们发现,从n-1开始按位取反 ...
- JS数据结构第六篇 --- 二叉树力扣练习题
1.第226题:翻转二叉树 递归+迭代两种实现方式: /** 反转二叉树 * Definition for a binary tree node. * function TreeNode(val) { ...
- framework7 picker 具体使用
官网地址:https://framework7.io/docs/picker.html#dom-events <meta charset="UTF-8"> <me ...
- solr 的基本用法
上图为 solr 的搜索页面,常用字段的基本用法如下: 1. q: 查询字符串,过滤条件,不能为空,必须输入,如果查询全部就写 * : * name:“马” AND age:[0 TO 18] ...
- Go语言基础之并发
并发是编程里面一个非常重要的概念,Go语言在语言层面天生支持并发,这也是Go语言流行的一个很重要的原因. Go语言中的并发编程 并发与并行 并发:同一时间段内执行多个任务(你在用微信和两个女朋友聊天) ...
- Python(Head First)学习笔记:四
4 持久存储:文件存储.读写 数据保存到文件:在学习的过程中出现了一个问题,老是报一个错:SyntaxError: invalid syntax: 这个是语法错误,后来搜了下才知道是python2.7 ...