echarts+ajax+json动态生成多个不同随机颜色的柱状图

前端部分代码：

<div id="main" style="width: 1200px;height:600px;"></div>

<script type="text/javascript">
$(function(){
$.ajax({ 
url: "<%=basePath%>evaluate-getChartInfo.action?evaluateType=getChartInfo", 
type:"GET",
dataType:"json",
success: function(data){
var classes = new Array();
var serv = new Array();

$.each(data.data,function(i,obj){
classes[i] = obj.name;
var value = new Object(); 
value.name= obj.name;
value.type= 'bar';
value.data= obj.data;
serv[i]= value;

});


var colors=new Array();
for(var j=0;j<classes.length;j++){
//生成随机颜色  
       function getColorRandom(){  
           var c="#";  
           var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];  
           for(var i=0;i<6;i++){  
             var  cIndex= Math.round(Math.random()*15);  
               c+=cArray[cIndex];  
           }  
           return c;  
       }  
if(j===colors.length){
colors.push(getColorRandom());
}
}


var myChart = echarts.init(document.getElementById('main'));
var option = {
    color: colors,


    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        right: '5%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:classes
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ['0~30分','30~60分','60~90分','90~120分','120~150分','150~180分','180~210分','210~240分','240~270分','270~300分']
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            max: 30,
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: '#000'
                }
            },
            axisLabel: {
                formatter: '{value} 人'
            }
        },
    ],
    series: serv
};

console.log(option);
myChart.setOption(option);
     }
     });
})

</script>

    </div>

效果如下：

最后

以上就是甜蜜招牌为你收集整理的echarts+ajax+json动态生成多个不同随机颜色的柱状图的全部内容，希望文章能够帮你解决echarts+ajax+json动态生成多个不同随机颜色的柱状图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。