echarts 柱狀圖 ，顏色和顯示設置並設置折線的顏色

最近在使用echart開發圖標，api里面雖然有些設置，但是如果想讓柱狀圖每個柱的顏色都不相同，簡單的通過color設置是沒有作用的，這里，就要用到其他的方式了

下面只是列舉下我認為比較常用的，其他的比較簡單，就不說了

xAxis : [
            {
                type : 'category',
//                 name:'額度',
　　　　　　　　//這是設置的false，就不不顯示下方的x軸，默認是true的
                show: false,
　　　　　　　　//這里呢，就是每個柱的name了，根據實際情況下就好了，我就先寫這三個
                data : ['最多','平均','最少'],
                axisLabel: {
　　　　　　　　　　　　　//這個是傾斜角度，也是考慮到文字過多的時候，方式覆蓋采用傾斜
//                     rotate: 30,
　　　　　　　　　　　　//這里是考慮到x軸文件過多的時候設置的，如果文字太多，默認是間隔顯示，設置為0，標示全部顯示，當然，如果x軸都不顯示，那也就沒有意義了
                    interval :0
                    }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name:'數量',
　　　　　　　　　　//下面的就很簡單了，最小是多少，最大是多少，默認一次增加多少
                 min: 0,
                 max: 30,
                 interval: 6,
　　　　　　　　　　//下面是顯示格式化，一般來說還是用的上的
                 axisLabel: {
                     formatter: '{value} 包'
                 }
            }
        ],
        series : [
            {
                name: '數量',
                type: 'bar',
                itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，這里就是重頭戲了，定義一個list，然后根據所以取得不同的值，這樣就實現了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　　//以下為是否顯示，顯示位置和顯示格式的設置了
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                },
　　　　　　　　　　//設置柱的寬度，要是數據太少，柱子太寬不美觀~
　　　　　　　　　　barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]

設置折線顏色部分

var option = {  
                    title: {  
                        text: ''  
                    },  
                    tooltip: {  
                        trigger: 'axis'  
                    },  
                    legend: {  
                        data:['銷售量']  
                    },  
                    grid: {  
                        left: '3%',  
                        right: '4%',  
                        bottom: '3%',  
                        containLabel: true  
                    },  
                    toolbox: {  
                        feature: {  
                            saveAsImage: {}  
                        }  
                    },  
                    xAxis: {  
                        type: 'category',  
                        boundaryGap: false,  
                        data: ['周一','周二','周三','周四','周五','周六','周日']  
                    },  
                    yAxis: {  
                        type: 'value'  
                    },  
                    series: [  //統一設置圈圈與線的顏色
                        {  
                            name:'銷售量',  
                            type:'line',  
                            stack: '銷售量',  
                            itemStyle : {  
                                normal : {  
                                    color:'#00FF00',  //圈圈的顏色
                                    lineStyle:{  
                                        color:'#00FF00'  //線的顏色
                                    }  
                                }  
                            },  
                            data:[220, 132, 601, 314, 890, 230, 510]  
                        }  
                    ]  
                };  
                    
                echart.setOption(option);    
            }); 

 最終效果代碼：

app.title = '折柱混合';

option = {
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            dataView: {show: false, readOnly: false},
            magicType: {show: false, type: ['line', 'bar']},
            restore: {show: false},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['分數','產業平均分']
    },
    xAxis: [
        {
            type: 'category',
            data: ['北京','昆明','重慶','貴陽','長沙','濱湖','寧波','羅源','北城','閩江']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '分數',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value} 分'
            }
        },
        {
            type: 'value',
            name: '平均分數',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
                formatter: '{value} 分'
            }
        }
    ],
    series: [
        {
            name:'分數',
            type:'bar',
            itemStyle: {
                    normal: {
                        color: function(params) {
                            var colorList = [
                              '#5e7e54','#e44f2f','#81b6b2','#eba422','#5e7e54',
                               '#e44f2f','#81b6b2','#eba422','#5e7e54','#e44f2f'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　
                    }
                },
            data:[60, 72, 80, 75, 91, 68, 88, 95, 72, 75]
        },
        {
            name:'產業平均分',
            type:'line',
            yAxisIndex: 1,
            itemStyle : {  
                normal : {  
                    color:'#58585a',  
                    lineStyle:{  
                        color:'#58585a'  
                    }  
                }  
            },  
            data:[70, 80, 60, 50, 90, 70, 65, 70, 50, 70]
        }
    ]
};

 最終效果圖展示：

 

效果就是這樣啦