關於echarts整合多個類似option

最近項目里面遇到一些圖表需要用echarts來做。而我之前只用過一次echarts,也只是做了一個簡單的餅狀圖，並沒有涉及到很多的配置。但是現在這個項目，這些圖表需要自己配置很多東西。像什么多余的網格線不顯示啊，每個柱子的不一樣的顏色漸變啊，這些都還好。問題在一個頁面有多個柱狀圖，而這些柱狀圖除了數據和顏色不一樣其他的都一毛一樣。最后模仿老大做的整合多個option自己做了一個demo，自己寫了詳細的注釋。效果圖如下：

html代碼如下：

<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
   <div id="chart1" style="width: 300px;height:300px;"></div>
   <div id="chart2" style="width: 300px;height:300px;"></div>
   <div id="chart3" style="width: 300px;height:300px;"></div>
   <div id="chart4" style="width: 300px;height:300px;"></div>
   <script src="aa.js"></script>
   <script>
       new aa();
   </script>

js代碼如下：

function aa(){
    //初始化加載圖表
    this.initchart();
}
aa.prototype = {
    initchart:function(){
        //定義每個圖表的顏色數組，我這里是漸變色的柱子，有四個
         var color = [ "#ad3f3b", "#df8380","#89a54e","#b7c894","#3c8d91","#78b1b5","#db853c","#f2b582"];
        var dex = 0;
        //遍歷裝圖表的盒子
        for(var i = 1; i <= 4; i++){
            //把echarts初始化圖表的方法提出來通過拼接id的方法找到每個div的id
            var chart = echarts.init(document.getElementById('chart'+ i));
            //把option做成一個變量，通過傳參來初始化每個圖 new echarts.graphic.LinearGradient是eachsrts柱子漸變的方法
            //傳遞的參數有圖表的名字，漸變的顏色，和所對應的單位
            var option = this.optionFun("銷售額", new echarts.graphic.LinearGradient(0,0,0,1,[
                {offset:0,color: color[dex++]},
                {offset:1,color:color[dex++]}
            ]), "單位");
             //常規操作 為echarts對象加載數據 
            chart.setOption(option);
        }
    },
    //然后接下來都是一些echarts的一些常規配置
    optionFun:function(title,color,unit){
        var option = {
            title:{
                text:title,
                left:'center',
                textStyle:{
                    fontStyle:'normal',
                    fontSizeL:'14px',
                },
                top:'top',
            },
            xAxis:{
                type:'category',
                data:['目標','完成'],
                axisLine:{
                    lineStyle:{
                        color:'#999',
                    },
                },
                axisLabel:{
                    textStyle:{
                        color:'#333',
                    },
                },
            },
            yAxis:{
                type:'value',
                name:unit,
                nameLocation:'start',
                nameTextStyle:{
                    color:'#333',
                },
                axisLine:{
                    lineStyle:{
                        color:'#999',
                    }
                },
                axisLabel:{
                    textStyle:{
                        color:'#333',
                    },
                },
                splitLine:{
                    show:false,
                },
            },
            series:[{
                data:data,//后台傳過來的數據[98,57]
                type:'bar',
                barWidth:20,
                itemStyle:{
                    normal:{
                        color:color,
                        barBorderRadius:2,
                        shadowColor:'rgba(4,13,31,0.5)',
                        shadowBlur:5,
                        shadowOffsetX:2,
                        shadowOffsetY:0,
                        label:{
                            show:true,
                            position:'top',
                            textStyle:{
                                color:'#333',
                            },
                        },
                    }
                }
            }],
        };
        //將option返回
        return option;
    }
}

其實后來發現，echarts一些常規的配置在官方給的文檔里面都有，就是自己不太熟悉。最主要的還是自己掌握的東西太少了，不懂的融會貫通。也更加清楚了js對於一個前端來說是多么的重要。而我自己也在不斷的努力中，很感謝我老大，很多不懂的地方問他，他都會幫我解決。繼續加油吧。

注：這個配置目前不支持圖表數量超過所定義的顏色數量后顏色循環，或許以后多研究下可以實現，但是目前是不支持的。