echarts 柱状图

效果：

图一：Y轴显示百分比  柱状图定点显示数量个数

图二：x轴  相同日期对应的每个柱子显示不同类型的数量

代码：

容器：

 <div id="badQuaAnalyze"></div>
 <div id="unqualified"></div>

配置项：

         //图1
         var badQuaAnalyze = echarts.init(document.getElementById('badQuaAnalyze'));
         //图2
         var unqualified = echarts.init(document.getElementById('unqualified'));
         //配置项和数据
         //图1
         var badQuaAnalyzeOption = {
             backgroundColor: 'rgba(255, 255, 255, 1)',
             legend: {
                 data:[{name:'数量',icon:'rect'}],
                 textStyle:{
                     color:'#222222',
                     fontSize:12
                 },
                 y: 'bottom',
                 x: 'center' ,
             },
             tooltip : {
                 trigger: 'axis',
                 axisPointer : {
                     type : 'shadow'
                 },
                 formatter: function (params) {
                     var str = params[0]['axisValue'] + '<br>' + '不合格百分比:'+params[0]['value'] + '%';
                     return str;
                 }
             },
             xAxis: [
                 {
                     type: 'category',
                     axisLine:{
                         lineStyle:{
                             color:'#999999',
                             width:1
                         }
                     },
                     data: [],
                     axisPointer: {
                         type: 'shadow'
                     },
                     axisLabel:{
                         interval:0,
                         rotate:0,
                         formatter:function(value){
 //                            return value.length > 5?value.substring(0,5)+'...':value;
                             return value;
                         }
                     }
                 }
             ],
             yAxis: [
                 {
                     type: 'value',
                     splitLine:{
                         show:true  ,
                         lineStyle:{
                             color:'#021439',
                             width: 1
                         }
                     },
                     axisLine:{
                         lineStyle:{
                             color:'#999999',
                             width:1
                         }
                     },
                     axisLabel: {
                         show: true,
                         interval: 'auto',
                         formatter: '{value} %'
                     },
                     name: '单位（%）',
                 }
             ],
         };
         //图2
         var unqualifiedOption = {
             backgroundColor: 'rgba(255, 255, 255, 1)',
             tooltip : {
                 trigger: 'axis',
                 axisPointer : {
                     type : 'shadow'
                 },
                 formatter: function (params) {
                     var str = params[0]['axisValue'] + '<br>';
                     $.each(params,function (i,v) {
                         if (v.value) {
                             str += v.seriesName + ':' + v.value + '<br>';
                         }
                     })
                     return str;
                 }
             },
             xAxis: [
                 {
                     type: 'category',
                     axisLine:{
                         lineStyle:{
                             color:'#999999',
                             width:1
                         }
                     },
                     data: [],
                     axisPointer: {
                         type: 'shadow'
                     },
                     axisLabel:{
                         interval:0,
                         rotate:0,
                         formatter:function(value){
 //                            return value.length > 10?value.substring(0,10)+'...':value;
                             return value;
                         }
                     }
                 }
             ],
             yAxis: [
                 {
                     type: 'value',
                     splitLine:{
                         show:true  ,
                         lineStyle:{
                             color:'#021439',
                             width: 1
                         }
                     },
                     axisLine:{
                         lineStyle:{
                             color:'#999999',
                             width:1
                         }
                     },
                     name: '不合格数量',
                 }
             ],
         };
         //使用刚指定的配置项和数据显示图表。
         badQuaAnalyze.setOption(badQuaAnalyzeOption);//图1
         unqualified.setOption(unqualifiedOption);//图2
         getbadQuaAnalyzeData();//图1
         getUnqualifiedData();//图2

         //获取图表数据并插入
         //图1
         function getbadQuaAnalyzeData() {
 //              $.ajax({
 //                  url: '',
 //                  data: {},
 //                  type: "POST",
 //                  dataType: 'json',
 //                  success: function(result){
             var result = {
                 meg:'处理成功',
                 req:true,
                 rows:[
                     {
                         name: "部件1",
                         num: 55,//数量
                         percent: 66,//百分比
                     },
                     {
                         name: "部件2",
                         num: 45,//数量
                         percent: 56,//百分比
                     },
                     {
                         name: "部件3",
                         num: 35,//数量
                         percent: 46,//百分比
                     },
                     {
                         name: "部件4",
                         num: 75,//数量
                         percent: 96,//百分比
                     },
                     {
                         name: "部件5",
                         num: 5,//数量
                         percent: 10,//百分比
                     },
                     {
                         name: "部件6",
                         num: 30,//数量
                         percent: 36,//百分比
                     },
                     {
                         name: "部件7",
                         num: 40,//数量
                         percent: 50,//百分比
                     },

                 ]
             }
             var _name = [], _markPoint = [] , _percent = [];
             console.log(result);
             if (result.rows!=null&&result.rows.length > 0) {
                 $.each(result.rows,function (i,v) {
                     _name.push(v.name);
                     _percent.push(v.percent);
                     _markPoint.push({name : '数量', value : v.num, xAxis: i, yAxis: v.percent})
                 });
                 badQuaAnalyze.setOption({
                     series : [
                         {
                             name:'数量',
                             barWidth: '30%',
                             type:'bar',
                             itemStyle : {
                                 normal : {
                                     lineStyle:{
                                         color:'#E09C19'
                                     },
                                     color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                                 }
                             },
                             data:_percent,
                             markPoint : {
                                 data : _markPoint
                             },
                         },
                     ],
                     xAxis : [
                         {
                             data:_name
                         }
                     ]
                 });
             }
 //                  }
 //              });
         }
         //图2
         function getUnqualifiedData() {
 //              $.ajax({
 //                  url: '',
 //                  data: {},
 //                  type: "POST",
 //                  dataType: 'json',
 //                  success: function(result){

             //图标的数据  是根据数据的顺序来的   如果需要图标X轴的时间顺序  请返回按时间排序的数据
             //同一个时间（"2017-05-24"）  相同名称的（类型7）   后者的（num）数量会覆盖前者   并不会累加
             var result = {
                 meg:'处理成功',
                 req:true,
                 rows:[
                     {
                         title:'标题',
                         time: "2017-05-24",
                         name:'类型2',
                         num: 54,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-24",
                         name:'类型1',
                         num: 54,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-24",
                         name:'类型4',
                         num: 54,//数量
                     },

                     {
                         title:'标题',
                         time: "2017-05-23",
                         name:'类型5',
                         num: 43,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-23",
                         name:'类型4',
                         num: 43,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-23",
                         name:'类型2',
                         num: 43,//数量
                     },

                     {
                         title:'标题',
                         time: "2017-05-22",
                         name:'类型5',
                         num: 32,//数量
                     },

                     {
                         title:'标题',
                         time: "2017-05-22",
                         name:'类型2',
                         num: 32,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-22",
                         name:'类型7',
                         num: 32,//数量
                     },

                     {
                         title:'标题',
                         time: "2017-05-25",
                         name:'类型2',
                         num: 33,//数量
                     },

                     {
                         title:'标题',
                         time: "2017-05-21",
                         name:'类型4',
                         num: 21,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-21",
                         name:'类型2',
                         num: 21,//数量
                     },
                     {
                         title:'标题',
                         time: "2017-05-21",
                         name:'类型7',
                         num: 21,//数量
                     },

                 ]
             }

             var _time = [],_name = [],_series = [];
             if (result.rows!=null&&result.rows.length > 0) {
                 $.each(result.rows,function (i,v) {//循环接口返回数据
                     if ($.inArray(v.time, _time) < 0 ) {//获得X轴横坐标
                         _time.push(v.time);
                     }
                     if ($.inArray(v.name, _name) < 0 ) {//没有出现过的名字（如：类型7） 创建一条
                         var current = {
                             name: v.name,
                             type: 'bar',
                             stack: '总量',
                             label: {
                                 normal: {
                                     show: true,
                                     position: 'inside'
                                 }
                             },
                             data: []
                         }
                         _name.push(v.name);//获取一组图例
                         $.each(_time,function (l,m) {
                             if (m === v.time) {
                                 current.data[l] = v.num;//确保插入到对应的时间坐标处
                             }
                         })
                         _series.push(current)
                     } else {//重复的名字
                         $.each(_series,function (j,o) {
                             if (o.name === v.name) {
                                 $.each(_time,function (a,b) {
                                     if (b === v.time) {
                                         o.data[a] = v.num;//确保插入到对应的时间坐标处
                                     }
                                 })

                             }
                         })
                     }
                 });
                 unqualified.setOption({
                     legend: {
                         data: _name
                     },
                     title : {
                         text: result.rows[0].title,
                         subtext: '',
                         x:'left'
                     },
                     series : _series,
                     xAxis : [
                         {
                             data:_time
                         }
                     ]
                 });
             }
 //                  }
 //              });
         }