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
                        }
                    ]
                });
            }
//                  }
//              });
        }