1. 程式人生 > >Echarts-柱形圖

Echarts-柱形圖

var clyyqst ={
            initAction:function(){
                /*$('.menuItem').removeClass('menuSelected');
                $('.menuItem').eq(4).addClass('menuSelected');*/
           
clyyqst.initChart();
            },
            initChart:function(){

                var chartOne = echart.init(document.getElementById('chartOne'));

var dataOne=[];
                $.ajax({
   

async : false,
    type: "POST",
    url: "clyyqs/qymc",      //企業名稱top10
    dataType: 'json',
    success: function (data) {
    for(var i in data.qymcs){
    dataOne.push(data.qymcs[i])
    }
    }
                });
                var legendOne=[];
                var seriesOne=[];
                $.each(dataOne,function (i,val) {
               
legendOne.push(val.QYMC);
                seriesOne.push(val.MC);
                });
                var optionOne={
                    tooltip: {
                        trigger: 'item',
                       formatter: "{b}: {c}"
                    },
                    grid:{
                        x:70,
                        y:45,
                        x2:50,
                        y2:80,
                    },
                    xAxis: {
                        data: legendOne,
                        axisLine:{
                            lineStyle:{
                                color:'#053b4c'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel: {
                        interval:0,  
                        rotate:30,
                            textStyle: {
                                color: '#0F0F0F'
                            }
                        },
                        splitLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        axisLine:{
                            show:false,
                            lineStyle:{
                                color:'#193b4e'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#0F0F0F'
                            }
                        },
                        splitLine:{
                            lineStyle:{
                                color:'#053b4c'
                            }
                        }
                    },
                    color:['#41bca0'],
                    series: [
                        {
                            type: 'bar',
                            barWidth:'46',
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var colorList = ['#41bca0','#2a9abf','#696daa','#f2bd32','#ff433d','#B8860B','#8B8B00','#7EC0EE','#458B00','#B0E2FF'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            },
                            data:seriesOne
                        }
                    ]
                };
                chartOne.setOption(optionOne);

}



ajax傳入資料:{"yyfwss":[{"MC":6774,"YYFWSMC":"湖北天凱風林電子有限公司"},{"MC":3327,"YYFWSMC":"武漢金飛田通訊技術有限公司"},{"MC":2482,"YYFWSMC":"湖北中寰衛星導航通訊有限公司"},{"MC":1741,"YYFWSMC":"湖北中交興路資訊科技有限公司"},{"MC":1616,"YYFWSMC":"湖北天盾電子技術有限公司"},{"MC":725,"YYFWSMC":"湖北航通北斗科技有限公司"},{"MC":676,"YYFWSMC":"湖北泰躍衛星技術發展股份有限公司"},{"MC":655,"YYFWSMC":"武漢長江通訊智聯技術有限公司"},{"MC":640,"YYFWSMC":"武漢中瀚科技有限公司"},{"MC":496,"YYFWSMC":"浙江道為爾科技有限公司武漢分公司"}]}