动态渲染echart柱状图，动态series、颜色

1.官网下载echart.min.js

<script type="text/javascript" src="../js/echarts.min.js"></script>

2. html

<div id="chart" style="min-width: 265px; height: 280px;  overflow: auto;"></div>

3.script渲染图表  接收后台返回的数据

 var keyArr=["订单","裁剪","入库","工票工段1","工票工段2","工票工段3"]

var ValueArr=[90,90,50,0,0,0]

var Chart= echarts.init(document.getElementById('chart'), 'shine');

var i = 0;  

var color =['#ff829d', '#ffb266', '#5eb5ef','#ffd778','#6fcdcd','#ff829d', '#ffb266', '#5eb5ef']

Chart.setOption({

    backgroundColor: "#fff",

    tooltip: {

        trigger: "axis",

        axisPointer: {

            type: "shadow",

            shadowStyle: {

                color: "rgba(210,219,238,0.2)"

            }

        },

    },

    xAxis: {

        type: "value",

        axisLine: {

            show: false,

        },

        // max: 4000,

    },

    yAxis: {

        data:keyArr.reverse(),

        axisLine: {

            show: false,

        },

        axisTick: {

            show: false,

        },

        type: 'category',

        minInterval: 1,

    },

    grid: {

        left: "0%",

        // right: "4%",

        // bottom: "3%",

        top:'2%',

        containLabel: true

    },

    series : function(){  //动态数据

        var serie=[];

        var legend=['g'];      

        var data=ValueArr.reverse();

        for ( var k = 0; k < legend.length; k++) {

            var item = {

                type:'bar',data:data,

                barMaxWidth: 30,

                itemStyle: {

                    barBorderRadius: [10, 10, 0, 0],

                    color: function(){

                        return color[i++];

                    }

                },

            };

            serie.push(item); // 添加对象

        }

        return serie; //返回组装好的数据

    }()

})