Echarts 餅狀圖自定義顏色


 

今天給餅狀圖着色問題,找了好久 終於找到了 話不多說直接上代碼
 $.ajax({
            url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx",
            data: { method: "QuanShiDuanMianShuiZhiLeiBieTongJi" },
            dataType: "json",
            cache: false,
            success: function (data) {
                if (data.length > 0) {
                    echarts.init(document.getElementById('WaterCategoryStatistics')).setOption({
                        legend: {
                            orient:'vertical',
                            left:'left',
                            data: ['II', 'III', 'IV', 'V', '劣V']
                        },

                        series: {
                            left:'center',//離容器左側的距離
                            top: 'top',//距離容器上測的距離
                            center: ['50%', '50%'],
                            radius: '85%',
                            type: 'pie',
                            data: [
                                { name: 'II', value: data[0].CNT },
                                { name: 'III', value: data[1].CNT },
                                { name: 'IV', value: data[2].CNT },
                                { name: 'V', value: data[3].CNT },
                                { name: '劣V', value: data[4].CNT },
                            ],

                            itemStyle: {
	        	                 emphasis: {
	        	                     shadowBlur: 10,
	        	                     shadowOffsetX: 0,
	        	                     shadowColor: 'rgba(0, 0, 0, 0.5)'
	        	                  },
			                     normal:{
		    	                     color:function(params) {
		    	                     //自定義顏色
		    	                     var colorList = [           
                                             '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
		    	                         ];
		    	                         return colorList[params.dataIndex]
		    	                      }
		    	                 }
	                       }
                        }
                    });
                }
            }
        });

  

效果圖

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM