开发中,做报表统计的时候,很容易用到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使用——柱状图的更多相关文章

  1. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  2. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  3. Thinkphp+ECharts生成柱状图

    1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...

  4. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  5. echarts分组柱状图的前后台处理 带平均线显示

    原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  6. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

  7. echarts 堆叠柱状图 + 渐变柱状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. echarts设置柱状图颜色渐变及柱状图粗细大小

    series: [ { name: '值', type: 'bar', stack: '总量', //设置柱状图大小 barWidth : 20, //设置柱状图渐变颜色 itemStyle: { n ...

  9. echarts堆叠柱状图在最上面的柱子显示总和

    需求 柱子需设置barMinHeight 在堆叠柱状图的最上面显示当前堆叠的总和 直接上代码吧 需要注意:设置barMinHeight时为了让0不显示,只能将0设置为null; 设置为null的柱子l ...

随机推荐

  1. F#周报2019年第35期

    新闻 新增强的NuGet搜索 Windows Terminal预览版v0.4发布 在Visual Studio的YouTube频道上获取更多的新内容 .NET团队是如何使用Azure Pipeline ...

  2. 用java实现取1-100之间的99个不重复的随机数 然后输出没有被取出的数字

    package cn.kgc.springtest2.demo1.dao; import java.util.BitSet; /** * @author * @create 2019-08-02 17 ...

  3. POJ2723 Get Luffy Out解题报告tarjan+2-SAT+二分

    今天看到讲2-SAT比较好的blog,感觉微微的理解了2-SAT 传送门 参考: https://blog.csdn.net/leolin_/article/details/6680144 题意:你有 ...

  4. Codeforces 832 D Misha, Grisha and Underground

    Misha, Grisha and Underground 题意:Misha 和 Grisha 是2个很喜欢恶作剧的孩子, 每天早上 Misha 会从地铁站 s 通过最短的路到达地铁站 f, 并且在每 ...

  5. 牛客第七场 Minimum Cost Perfect Matching 规律

    题意:1-n-1个数和1-n-1个数两两匹配,每次匹配将两个数的值进行与运算,要求每次匹配与运算的和相加最小,问满足匹配的配对方式 分析:打表前10个数与运算最小的匹配,我们发现,从n-1开始按位取反 ...

  6. JS数据结构第六篇 --- 二叉树力扣练习题

    1.第226题:翻转二叉树 递归+迭代两种实现方式: /** 反转二叉树 * Definition for a binary tree node. * function TreeNode(val) { ...

  7. framework7 picker 具体使用

    官网地址:https://framework7.io/docs/picker.html#dom-events <meta charset="UTF-8"> <me ...

  8. solr 的基本用法

    上图为 solr 的搜索页面,常用字段的基本用法如下: 1. q: 查询字符串,过滤条件,不能为空,必须输入,如果查询全部就写 * : * name:“马”  AND age:[0 TO 18]   ...

  9. Go语言基础之并发

    并发是编程里面一个非常重要的概念,Go语言在语言层面天生支持并发,这也是Go语言流行的一个很重要的原因. Go语言中的并发编程 并发与并行 并发:同一时间段内执行多个任务(你在用微信和两个女朋友聊天) ...

  10. Python(Head First)学习笔记:四

    4 持久存储:文件存储.读写 数据保存到文件:在学习的过程中出现了一个问题,老是报一个错:SyntaxError: invalid syntax: 这个是语法错误,后来搜了下才知道是python2.7 ...