前段时间做项目需要绘制一些图表来展示信息，从网上资料来看用的比较多的是百度开源的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的简单应用之（一）柱形图的更多相关文章

  1. echarts的简单应用之（二）饼图

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  2. echarts之简单的入门——【二】再增加一个柱状图和图例组件

    echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...

  3. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  4. ECharts.js 简单示例

    ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Vi ...

  5. 对echarts的简单封装

    看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的封装:http://blog.csdn.net/x ...

  6. Echarts的简单入门

    5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体 ...

  7. ECharts的简单使用过程

    网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...

  8. ECharts的简单使用

    ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...

  9. Echarts——一个简单的嵌套饼图

      </!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

随机推荐

  1. EditextText输入类型

    android:inputType="none"--输入普通字符 android:inputType="text"--输入普通字符 android:inputT ...

  2. 影响TCP连接寿命的因素

    NAT超时 大部分移动无线网络运营商都在链路一段时间没有数据通讯时,会淘汰 NAT 表中的对应项,造成链路中断.NAT超时是影响TCP连接寿命的一个重要因素(尤其是国内),所以客户端自动测算NAT超时 ...

  3. L 裁纸片 贪心 + 模拟

    https://biancheng.love/contest-ng/index.html#/123/problems 如果只是输出最小的值,那么好办,a升序,b降序,这样是最优的. 但是需要次数,这就 ...

  4. pycharm一些快捷键（不定时添加）

    ctrl + shift + -  缩减多级菜单 ctrl + shifit + + 展开多级菜单 ctrl + shift + F8  删除多个断点 两个项目比较 ---选中要比较的项目---右键找 ...

  5. ES之各种运算符，for、while、do while 、switch case循环

    运算符优先级: 在所有的运算符中,括号的优先级最高,赋值符号的优先级最低. 小括号 > 计算运算符 > 比较运算符 > 逻辑运算符 > 赋值符号———————————————— ...

  6. linux设置ssh连接时间

    相信大家经常遇到SSH连接闲置一会就断开需要重新连接的痛苦,为了使SSH连接保持足够长的时间,我们可以使用如下两种设置 1.sshd服务配置: #vi /etc/ssh/sshd_config Cli ...

  7. iOS-UI控件之UIButton

    ---恢复内容开始--- UIButton 既可以显示图片,又可以显示文字,还能随时调整内部位置 系统自带尺寸 storyboard内部调整UIButton属性 状态 监听按钮点击事件 凡是继承自UI ...

  8. （转）淘淘商城系列——引用dubbo服务

    http://blog.csdn.net/yerenyuan_pku/article/details/72758663 上文我们一起学习了如何发布一个dubbo服务,本文我就来教大家如何在web工程中 ...

  9. PC端浏览器定位

    第一: PC端浏览器定位(纯前端)浏览器定位 :这里用了两种 ,一种是Html5自带的方法 另一种是引用了百度api  ,百度api 的使用有三种:1 浏览器定位2 ip定位3 SDK辅助定位引用百度 ...

  10. 【原创】DESTOON做中英双语言（多语言）切换版本具体详解

    第一次发原创好激动,该注意点什么? 在开发过程中用户有许多要求,比如这个多语言切换就是一个需求. 首先讲解一下DESTOON(DT)后台系统如何做这个中英.甚至多语言切换的这个功能. DT本身不自带多 ...