使用echarts画简单的柱状图

echarts这个工具用着很顺手，二区入门简单，今天写一个简单的echarts图表，效果如下：

首先在html中提供一个DOM：

<fieldset class="layui-elem-field site-demo-button listField">
<div class="layui-inline leftMenu adjustwidth">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" id="beginTime"  class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
        <div class="layui-input-inline">
<input type="text" id="endTime" class="layui-input">
        </div>
</div>
<div class="layui-inline">
<label class="layui-form-label">会员卡号/会员号</label>
        <div class="layui-input-inline">
    <input type="text" id="number" class="layui-input">
        </div>
  </div>
  <div class="layui-inline">
<button class="layui-btn layui-btn-primary" id="search"> 搜索</button>
  </div>
</div>
</fieldset>

<div id="report" style="width: 100%; height: 400px;"></div>

然后在js中使用ajax获得后台数据：

function init(beginTime,endTime){
var beginTime=$("#beginTime").val();
var endTime=$("#endTime").val();
var number=$("#number").val();
if(beginTime==null||beginTime==""){
beginTime="2017-01-01";
endTime="2018-09-09";
}
$.ajax({
type:"post",
url:basePath+"/aaa/bbb",
async:true,
//crossDomain: true == !(document.all),
data:{
"token":token,
"beginTime":beginTime,
"endTime":endTime,
"num":number
},
dataType:"json",
error:function(XMLHttpRequest, textStatus, errorThrown){
},
success:function(data){
console.log(data);
if(data.length == 0){
$("#report").html("暂无数据").css({"text-align":"center","line-height":"400px"});
return;

}

                        //后台数据以数组的形式展现出来

var barTitle = [];
var barData1 = [];
var barData2 = [];
var timeData = [];
for(var i = 0; i< data.length; i++){
console.log(data[i]);
        barTitle.push(data[i][1]);
barData1.push(data[i][3]);
barData2.push(data[i][4]);
var timeupdate = new Date( data[i][5].time);
data[i][5].time=timeupdate.Format("yyyy-MM-dd hh:mm:ss");
timeData.push(timeupdate)

}

                        //引入echarts，初始化echarts实例

var myChart = echarts.init(document.getElementById('report'));
var option = {
 title: {
             text: '会员卡充值记录统计'
          },
  tooltip : {
trigger: 'axis',
axisPointer : { 
    type : 'cross'
 }
    },
 toolbox: {
show : true,
 feature : {
   mark : {show: true},
    dataView : {show: true, readOnly: false},
    saveAsImage : {show: true}
  }
   },
 xAxis: [{
type: 'category',
 data: timeData,
 name:'时间'
 }],
 yAxis: {},
series: [{
             name:'充值金额',
     data: barData1,
      type: 'bar'
 },{
    name:'赠送金额',
    data: barData2,
    type: 'bar'
 }]

};

                        //使用刚指定的配置项和数据展示图表

myChart.setOption(option);
}
});

}

以上是echarts简单的一个例子，echarts的功能很强大，有很多标签需要在使用的时候去官方文档查看，每天都是在不断学习，时间长了，积累多了，自然就是一个高手！