echarts柱狀圖/餅圖如何自定義不同顏色

寫博客不是爲了博眼球 是爲了記筆記

左側餅圖

    Pielinechart1(){
        let myChart = echarts.init(document.getElementById("Piechart1"));       
        let option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color:['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'],//自定義餅圖顏色
            legend: {
                itemWidth: 20,// 標誌圖形的長度
                itemHeight: 10,// 標誌圖形的寬度
                orient: 'vertical',// 標誌的位置
                right: 80,
                top: 20,
                bottom: 20,
                data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎','555','566','777','888','999','333']
            },
            series : [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius : '50%',
                    label: {
                        normal: {
                            position: 'inner',
                            show : false
                        }
                    },
                    center: ['28%', '50%'],// 調整餅的位置
                    data:[
                        {value:335, name:'直接訪問'},
                        {value:310, name:'郵件營銷'},
                        {value:234, name:'聯盟廣告'},
                        {value:135, name:'視頻廣告'},
                        {value:335, name:'直接訪問'},
                        {value:310, name:'999'},
                        {value:234, name:'555'},
                        {value:234, name:'566'},
                        {value:135, name:'777'},
                        {value:135, name:'333'},
                        {value:148, name:'888'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    },

右側橫向柱狀圖

Barchart2(){
        let myChart = echarts.init(document.getElementById("Barchart2"));       
        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            
                    type : 'shadow'       
                }
            },
            legend: {
                data: ['直接訪問', '郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
            },
            grid: { // 柱狀圖的位置調整
                top:'7%',
                left: '15%',
                right: '4%',
                containLabel: true
            },
            xAxis:  {// 控制橫座標顯示
                show:false,
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#00ffee'
                    // }
                },
            },
            yAxis: {// 控制縱座標顯示
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    // lineStyle: {
                    //     color: '#00ffee'
                    // }
                },
                type: 'category',
                data: ['週一','週二','週三','週四','週五','週六','週日','週四','週五','週六',]
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                             barBorderRadius:[6, 6, 6, 6],// 設置柱狀圖 圓角
                            color: function(params) {// 柱狀圖設置不同顏色
                                var colorList = ['#65b5c2', '#ffbe05','#1dc499','#177bbb', '#3ddcde','#177bbb','#1ccacc', '#e33244','#ffbe05','#3ddcde'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    stack: '總量',
                    label: {
                        normal: {
                            show: true,
                            position: 'insideRight'
                        }
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320, 832, 901, 934]
                }
            ]
        };
        myChart.setOption(option);
    },