Echarts柱状图js代码

// 显示图形
function showChart0(xProcess, yA1, yB1, yC1, yD1,presenttime) {

var container = document.getElementById('container0');

var option = {
   title : {
       text: '各工序班组'+presenttime+'总成本对比柱状图',
       x: 'center',
       y: 'top'
   },
   tooltip : {
       trigger: 'axis'
   },
   legend: {
       data:['甲班组','乙班组','丙班组','丁班组'],
       x: 'center',  
       y: 'bottom'
   },
   toolbox: {
       show : true,
       feature : {
           mark : {show: true},
           dataZoom: {  
                        show: true,  
                         title: {  
                            dataZoom: '区域缩放',  
                            dataZoomReset: '区域缩放后退'  
                        }  
                    },  
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : true,
   xAxis : [
       {
           type : 'category',
           data : xProcess
       }
   ],
   yAxis : [
       {
        title : {
text : '单位（元）'
},
type : 'value'
           
       }
   ],
   series : [
       {
           name:'甲班组',
           type:'bar',
           data:yA1,
           markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           }
       },
       {
           name:'乙班组',
           type:'bar',
           data:yB1,
           markPoint : {
            data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           },
           markLine : {
               data : [
                   {type : 'average', name : '平均值'}
               ]
           }
       },
       {
           name:'丙班组',
           type:'bar',
           data:yC1,
           markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           }
       },
       {
           name:'丁班组',
           type:'bar',
           data:yD1,
           markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'}
               ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           }
       }
   ]
};
echartImport(option,container);
}


//数据填充图表
function echartImport(option,container){
/*
     * echarts按照AMD规范书写
     */
    require.config({
              paths: {
                  echarts: 'frame/echarts/' // echarts主路径
              }
          });
    require(
            [
                'echarts', // 加载在主路径（frame/echarts/）下面的echarts.js文件
                'echarts/chart/line' ,// 使用柱状图就加载bar.js模块，按需加载
                'echarts/chart/bar',  
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var echart = ec.init(container); 
                // 为echarts对象加载数据
                echart.setOption(option); 
            }
        );   
}
// 请求图形数据数据
function getCurrentCostData(presenttime) {


$.post("crewaccountController/getCurrentCostData.do", {
presenttime : presenttime
}, function(result) {
if (result) {
var xProcess =new Array();
var yA1 = new Array();
var yB1 = new Array();
var yC1 = new Array();
var yD1 = new Array();
var jsonobj = eval("(" + result + ")");

$.each(jsonobj, function(i, item) {


$.each(item, function(k, v) {
xProcess[k] = v.processName;
yA1[k] = v.A1;
yB1[k] = v.B1;
yC1[k] = v.C1;
yD1[k] = v.D1;
});
});


showChart0(xProcess, yA1, yB1, yC1, yD1,presenttime);
}
});

}

结果展现