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

                          }

                      });

             }

         })